Ignore keyboard listener when typing in text field

web/src/hooks/use-keyboard-listener.tsx

@@ -14,7 +14,8 @@ export default function useKeyboardListener(
 ) {
   const keyDownListener = useCallback(
     (e: KeyboardEvent) => {
-      if (!e) {
+      // @ts-expect-error we know this field exists
+      if (!e || e.target.tagName == "INPUT") {
         return;
       }
 

web/src/pages/Live.tsx

@@ -1,4 +1,5 @@
 import { useFullscreen } from "@/hooks/use-fullscreen";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import {
   useHashState,
   usePersistedOverlayState,
@@ -43,6 +44,18 @@ function Live() {
   const { fullscreen, toggleFullscreen, supportsFullScreen } =
     useFullscreen(mainRef);
 
+  useKeyboardListener(["f"], (key, modifiers) => {
+    if (!modifiers.down) {
+      return;
+    }
+
+    switch (key) {
+      case "f":
+        toggleFullscreen();
+        break;
+    }
+  });
+
   // document title
 
   useEffect(() => {