Misc Improvements (#14076)

* Return ID of export in http response

* Ignore keyboard listener when typing in text field

* Add other keyboard listeners

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(() => {

web/src/views/live/LiveCameraView.tsx

@@ -236,6 +236,25 @@ export default function LiveCameraView({
     return "mse";
   }, [lowBandwidth, mic, webRTC, isRestreamed]);
 
+  useKeyboardListener(["m"], (key, modifiers) => {
+    if (!modifiers.down) {
+      return;
+    }
+
+    switch (key) {
+      case "m":
+        if (supportsAudioOutput) {
+          setAudio(!audio);
+        }
+        break;
+      case "t":
+        if (supports2WayTalk) {
+          setMic(!mic);
+        }
+        break;
+    }
+  });
+
   // layout state
 
   const windowAspectRatio = useMemo(() => {