diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index cf1e4dc..1202534 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -157,7 +157,7 @@ export function InCallView({ const { hideScreensharing } = useUrlParams(); useCallViewKeyboardShortcuts( - !feedbackModalState.isOpen, + containerRef1, toggleMicrophoneMuted, toggleLocalVideoMuted, setMicrophoneMuted diff --git a/src/useCallViewKeyboardShortcuts.ts b/src/useCallViewKeyboardShortcuts.ts index d1689dd..e753ea4 100644 --- a/src/useCallViewKeyboardShortcuts.ts +++ b/src/useCallViewKeyboardShortcuts.ts @@ -14,30 +14,41 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useCallback, useRef } from "react"; +import { RefObject, useCallback, useRef } from "react"; import { getSetting } from "./settings/useSetting"; import { useEventTarget } from "./useEvents"; +/** + * Determines whether focus is in the same part of the tree as the given + * element (specifically, if an ancestor or descendant of it is focused). + */ +const mayReceiveKeyEvents = (e: HTMLElement): boolean => { + const focusedElement = document.activeElement + return focusedElement !== null && (focusedElement.contains(e) || e.contains(focusedElement)) +} + export function useCallViewKeyboardShortcuts( - enabled: boolean, + focusElement: RefObject, toggleMicrophoneMuted: () => void, toggleLocalVideoMuted: () => void, setMicrophoneMuted: (muted: boolean) => void ) { const spacebarHeld = useRef(false); + // These event handlers are set on the window because we want users to be able + // to trigger them without going to the trouble of focusing something + useEventTarget( window, "keydown", useCallback( (event: KeyboardEvent) => { - if (!enabled) return; + if (focusElement.current === null) return + if (!mayReceiveKeyEvents(focusElement.current)) return; // Check if keyboard shortcuts are enabled const keyboardShortcuts = getSetting("keyboard-shortcuts", true); - if (!keyboardShortcuts) { - return; - } + if (!keyboardShortcuts) return; if (event.key === "m") { toggleMicrophoneMuted(); @@ -49,8 +60,6 @@ export function useCallViewKeyboardShortcuts( } }, [ - enabled, - spacebarHeld, toggleLocalVideoMuted, toggleMicrophoneMuted, setMicrophoneMuted, @@ -63,19 +72,18 @@ export function useCallViewKeyboardShortcuts( "keyup", useCallback( (event: KeyboardEvent) => { - if (!enabled) return; + if (focusElement.current === null) return + if (!mayReceiveKeyEvents(focusElement.current)) return; // Check if keyboard shortcuts are enabled const keyboardShortcuts = getSetting("keyboard-shortcuts", true); - if (!keyboardShortcuts) { - return; - } + if (!keyboardShortcuts) return; if (event.key === " ") { spacebarHeld.current = false; setMicrophoneMuted(true); } }, - [enabled, setMicrophoneMuted] + [setMicrophoneMuted] ) );