Only apply certain keyboard shortcuts in situations

ts/hooks/useKeyboardShortcuts.tsx

@@ -3,8 +3,15 @@
 
 import { useCallback, useEffect } from 'react';
 import { get } from 'lodash';
+import { useSelector } from 'react-redux';
 
+import type { PanelRenderType } from '../types/Panels';
+import type { StateType } from '../state/reducer';
 import * as KeyboardLayout from '../services/keyboardLayout';
+import { getTopPanel } from '../state/selectors/conversations';
+import { isInFullScreenCall } from '../state/selectors/calling';
+import { isShowingAnyModal } from '../state/selectors/globalModals';
+import { shouldShowStoriesView } from '../state/selectors/stories';
 
 type KeyboardShortcutHandlerType = (ev: KeyboardEvent) => boolean;
 
@@ -22,6 +29,34 @@ function isCtrlOrAlt(ev: KeyboardEvent): boolean {
   return controlKey || theAltKey;
 }
 
+function useHasPanels(): boolean {
+  const topPanel = useSelector<StateType, PanelRenderType | undefined>(
+    getTopPanel
+  );
+  return Boolean(topPanel);
+}
+
+function useHasGlobalModal(): boolean {
+  return useSelector<StateType, boolean>(isShowingAnyModal);
+}
+
+function useHasStories(): boolean {
+  return useSelector<StateType, boolean>(shouldShowStoriesView);
+}
+
+function useHasCalling(): boolean {
+  return useSelector<StateType, boolean>(isInFullScreenCall);
+}
+
+function useHasAnyOverlay(): boolean {
+  const panels = useHasPanels();
+  const globalModal = useHasGlobalModal();
+  const stories = useHasStories();
+  const calling = useHasCalling();
+
+  return panels || globalModal || stories || calling;
+}
+
 export function useActiveCallShortcuts(
   hangUp: (reason: string) => unknown
 ): KeyboardShortcutHandlerType {
@@ -118,8 +153,14 @@ export function useStartCallShortcuts(
 export function useStartRecordingShortcut(
   startAudioRecording: () => unknown
 ): KeyboardShortcutHandlerType {
+  const hasOverlay = useHasAnyOverlay();
+
   return useCallback(
     ev => {
+      if (hasOverlay) {
+        return false;
+      }
+
       const { shiftKey } = ev;
       const key = KeyboardLayout.lookup(ev);
 
@@ -133,15 +174,21 @@ export function useStartRecordingShortcut(
 
       return false;
     },
-    [startAudioRecording]
+    [hasOverlay, startAudioRecording]
   );
 }
 
 export function useAttachFileShortcut(
   attachFile: () => unknown
 ): KeyboardShortcutHandlerType {
+  const hasOverlay = useHasAnyOverlay();
+
   return useCallback(
     ev => {
+      if (hasOverlay) {
+        return false;
+      }
+
       const { shiftKey } = ev;
       const key = KeyboardLayout.lookup(ev);
 
@@ -155,15 +202,21 @@ export function useAttachFileShortcut(
 
       return false;
     },
-    [attachFile]
+    [attachFile, hasOverlay]
   );
 }
 
 export function useToggleReactionPicker(
   handleReact: () => unknown
 ): KeyboardShortcutHandlerType {
+  const hasOverlay = useHasAnyOverlay();
+
   return useCallback(
     ev => {
+      if (hasOverlay) {
+        return false;
+      }
+
       const { shiftKey } = ev;
       const key = KeyboardLayout.lookup(ev);
 
@@ -177,15 +230,21 @@ export function useToggleReactionPicker(
 
       return false;
     },
-    [handleReact]
+    [handleReact, hasOverlay]
   );
 }
 
 export function useEditLastMessageSent(
   maybeEditMessage: () => boolean
 ): KeyboardShortcutHandlerType {
+  const hasOverlay = useHasAnyOverlay();
+
   return useCallback(
     ev => {
+      if (hasOverlay) {
+        return false;
+      }
+
       const key = KeyboardLayout.lookup(ev);
 
       if (key === 'ArrowUp') {
@@ -200,7 +259,7 @@ export function useEditLastMessageSent(
 
       return false;
     },
-    [maybeEditMessage]
+    [hasOverlay, maybeEditMessage]
   );
 }
 

ts/state/selectors/globalModals.ts

@@ -0,0 +1,16 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { createSelector } from 'reselect';
+
+import type { StateType } from '../reducer';
+import type { GlobalModalsStateType } from '../ducks/globalModals';
+
+export const getGlobalModalsState = (state: StateType): GlobalModalsStateType =>
+  state.globalModals;
+
+export const isShowingAnyModal = createSelector(
+  getGlobalModalsState,
+  (globalModalsState): boolean =>
+    Object.values(globalModalsState).some(value => Boolean(value))
+);