@nikelroot/video-player 0.1.6 → 0.1.7

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

@@ -772,6 +772,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 +1386,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;

package/dist/index.js

@@ -743,6 +743,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 +1357,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;

package/package.json

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