fix: voice recording race conditions

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Alert, Linking, StyleSheet } from 'react-native';
 
-import {
-  Gesture,
-  GestureDetector,
-  PanGestureHandlerEventPayload,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector, State } from 'react-native-gesture-handler';
 import Animated, {
+  clamp,
   runOnJS,
   SharedValue,
   useAnimatedStyle,
@@ -22,6 +19,7 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../../../hooks';
 import { useStateStore } from '../../../../hooks/useStateStore';
 import { NewMic } from '../../../../icons/NewMic';
 import { NativeHandlers } from '../../../../native';
@@ -38,7 +36,7 @@ export type AudioRecordingButtonPropsWithContext = Pick<
   | 'deleteVoiceRecording'
   | 'uploadVoiceRecording'
 > &
-  Pick<AudioRecorderManagerState, 'duration' | 'recording' | 'status' | 'permissionsGranted'> & {
+  Pick<AudioRecorderManagerState, 'recording' | 'status'> & {
     /**
      * Size of the mic button.
      */
@@ -53,6 +51,7 @@ export type AudioRecordingButtonPropsWithContext = Pick<
     handlePress?: () => void;
     micPositionX: SharedValue<number>;
     micPositionY: SharedValue<number>;
+    cancellableDuration: boolean;
   };
 
 /**
@@ -72,8 +71,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     handlePress,
     micPositionX,
     micPositionY,
-    permissionsGranted,
-    duration: recordingDuration,
+    cancellableDuration,
     status,
     recording,
   } = props;
@@ -87,118 +85,139 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     },
   } = useTheme();
 
-  const onPressHandler = () => {
+  const onPressHandler = useStableCallback(() => {
     if (handlePress) {
       handlePress();
     }
     if (!recording) {
       NativeHandlers.triggerHaptic('notificationError');
       Alert.alert(t('Hold to start recording.'));
     }
-  };
+  });
 
-  const onLongPressHandler = async () => {
+  const onLongPressHandler = useStableCallback(async () => {
     if (handleLongPress) {
       handleLongPress();
       return;
     }
     if (recording) return;
-    NativeHandlers.triggerHaptic('impactHeavy');
-    if (!permissionsGranted) {
-      Alert.alert(t('Please allow Audio permissions in settings.'), '', [
-        {
-          onPress: () => {
-            Linking.openSettings();
-          },
-          text: t('Open Settings'),
-        },
-      ]);
-      return;
-    }
     if (startVoiceRecording) {
       if (activeAudioPlayer?.isPlaying) {
-        await activeAudioPlayer?.pause();
+        activeAudioPlayer?.pause();
+      }
+      const permissionsGranted = await startVoiceRecording();
+      if (!permissionsGranted) {
+        Alert.alert(t('Please allow Audio permissions in settings.'), '', [
+          {
+            onPress: () => {
+              Linking.openSettings();
+            },
+            text: t('Open Settings'),
+          },
+          {
+            text: t('Cancel'),
+            style: 'cancel',
+          },
+        ]);
+        return;
       }
-      await startVoiceRecording();
+      NativeHandlers.triggerHaptic('impactHeavy');
     }
-  };
+  });
+
   const X_AXIS_POSITION = -asyncMessagesSlideToCancelDistance;
   const Y_AXIS_POSITION = -asyncMessagesLockDistance;
 
-  const micUnlockHandler = () => {
-    audioRecorderManager.micLocked = false;
-  };
-
-  const micLockHandler = (value: boolean) => {
-    audioRecorderManager.micLocked = value;
-  };
+  const micLockHandler = useStableCallback((value: boolean) => {
+    if (status === 'recording') {
+      audioRecorderManager.micLocked = value;
+    }
+  });
 
-  const resetAudioRecording = async () => {
+  const resetAudioRecording = useStableCallback(async () => {
     NativeHandlers.triggerHaptic('notificationSuccess');
     await deleteVoiceRecording();
-  };
+  });
 
-  const onEarlyReleaseHandler = () => {
+  const onEarlyReleaseHandler = useStableCallback(() => {
     NativeHandlers.triggerHaptic('notificationError');
     resetAudioRecording();
-  };
-
-  const tapGesture = Gesture.Tap()
-    .onBegin(() => {
-      scale.value = withSpring(0.8, { mass: 0.5 });
-    })
-    .onEnd(() => {
-      scale.value = withSpring(1, { mass: 0.5 });
-    });
-
-  const panGesture = Gesture.Pan()
-    .activateAfterLongPress(asyncMessagesMinimumPressDuration + 100)
-    .onChange((event: PanGestureHandlerEventPayload) => {
-      const newPositionX = event.translationX;
-      const newPositionY = event.translationY;
+  });
 
-      if (newPositionX <= 0 && newPositionX >= X_AXIS_POSITION) {
-        micPositionX.value = newPositionX;
-      }
-      if (newPositionY <= 0 && newPositionY >= Y_AXIS_POSITION) {
-        micPositionY.value = newPositionY;
+  const onTouchGestureEnd = useStableCallback(() => {
+    if (status === 'recording') {
+      if (cancellableDuration) {
+        runOnJS(onEarlyReleaseHandler)();
+      } else {
+        runOnJS(uploadVoiceRecording)(asyncMessagesMultiSendEnabled);
       }
-    })
-    .onStart(() => {
-      micPositionX.value = 0;
-      micPositionY.value = 0;
-      runOnJS(micUnlockHandler)();
-    })
-    .onEnd(() => {
-      const belowThresholdY = micPositionY.value > Y_AXIS_POSITION / 2;
-      const belowThresholdX = micPositionX.value > X_AXIS_POSITION / 2;
+    }
+  });
 
-      if (belowThresholdY && belowThresholdX) {
-        micPositionY.value = withSpring(0);
-        micPositionX.value = withSpring(0);
-        if (status === 'recording') {
-          if (recordingDuration < 300) {
-            runOnJS(onEarlyReleaseHandler)();
-          } else {
-            runOnJS(uploadVoiceRecording)(asyncMessagesMultiSendEnabled);
+  const tapGesture = useMemo(
+    () =>
+      Gesture.LongPress()
+        .minDuration(asyncMessagesMinimumPressDuration)
+        .onBegin(() => {
+          scale.value = withSpring(0.8, { mass: 0.5 });
+        })
+        .onStart(() => {
+          runOnJS(onLongPressHandler)();
+        })
+        .onFinalize((e) => {
+          scale.value = withSpring(1, { mass: 0.5 });
+          if (e.state === State.FAILED) {
+            runOnJS(onPressHandler)();
           }
-        }
-        return;
-      }
+        }),
+    [asyncMessagesMinimumPressDuration, onLongPressHandler, onPressHandler, scale],
+  );
 
-      if (!belowThresholdY) {
-        micPositionY.value = withSpring(Y_AXIS_POSITION);
-        runOnJS(micLockHandler)(true);
-      }
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .activateAfterLongPress(asyncMessagesMinimumPressDuration)
+        .onUpdate((e) => {
+          micPositionX.value = clamp(e.translationX, X_AXIS_POSITION, 0);
+          micPositionY.value = clamp(e.translationY, Y_AXIS_POSITION, 0);
+        })
+        .onStart(() => {
+          micPositionX.value = 0;
+          micPositionY.value = 0;
+        })
+        .onEnd(() => {
+          const belowThresholdY = micPositionY.value > Y_AXIS_POSITION / 2;
+          const belowThresholdX = micPositionX.value > X_AXIS_POSITION / 2;
 
-      if (!belowThresholdX) {
-        micPositionX.value = withSpring(X_AXIS_POSITION);
-        runOnJS(resetAudioRecording)();
-      }
+          if (belowThresholdY && belowThresholdX) {
+            micPositionY.value = withSpring(0);
+            micPositionX.value = withSpring(0);
+            runOnJS(onTouchGestureEnd)();
+            return;
+          }
+
+          if (!belowThresholdX) {
+            micPositionX.value = withSpring(X_AXIS_POSITION);
+            runOnJS(resetAudioRecording)();
+          } else if (!belowThresholdY) {
+            micPositionY.value = withSpring(Y_AXIS_POSITION);
+            runOnJS(micLockHandler)(true);
+          }
 
-      micPositionX.value = 0;
-      micPositionY.value = 0;
-    });
+          micPositionX.value = 0;
+          micPositionY.value = 0;
+        }),
+    [
+      X_AXIS_POSITION,
+      Y_AXIS_POSITION,
+      asyncMessagesMinimumPressDuration,
+      micLockHandler,
+      micPositionX,
+      micPositionY,
+      onTouchGestureEnd,
+      resetAudioRecording,
+    ],
+  );
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
@@ -210,12 +229,10 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
       <Animated.View style={[styles.container, animatedStyle, micButtonContainer]}>
         <IconButton
+          disabled={true}
           accessibilityLabel='Start recording'
           category='ghost'
-          delayLongPress={asyncMessagesMinimumPressDuration}
           Icon={NewMic}
-          onLongPress={onLongPressHandler}
-          onPress={onPressHandler}
           size='sm'
           type='secondary'
         />
@@ -234,8 +251,7 @@ const MemoizedAudioRecordingButton = React.memo(
 ) as typeof AudioRecordingButtonWithContext;
 
 const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
-  duration: state.duration,
-  permissionsGranted: state.permissionsGranted,
+  cancellableDuration: state.duration < 300,
   recording: state.recording,
   status: state.status,
 });
@@ -252,7 +268,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
     uploadVoiceRecording,
   } = useMessageInputContext();
 
-  const { duration, status, permissionsGranted, recording } = useStateStore(
+  const { cancellableDuration, status, recording } = useStateStore(
     audioRecorderManager.state,
     audioRecorderSelector,
   );
@@ -268,9 +284,8 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
         startVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,
-        duration,
+        cancellableDuration,
         status,
-        permissionsGranted,
         recording,
       }}
       {...props}

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -50,10 +50,12 @@ export const useAudioRecorder = ({
   }, [isScheduledForSubmit, sendMessage]);
 
   /**
-   * Function to start voice recording.
+   * Function to start voice recording. Will return whether access is granted
+   * with regards to the microphone permission as that's how the underlying
+   * library works on iOS.
    */
   const startVoiceRecording = useCallback(async () => {
-    await audioRecorderManager.startRecording();
+    return await audioRecorderManager.startRecording();
   }, [audioRecorderManager]);
 
   /**

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -2195,7 +2195,7 @@ exports[`Thread should match thread snapshot 1`] = `
                         {
                           "busy": undefined,
                           "checked": undefined,
-                          "disabled": false,
+                          "disabled": true,
                           "expanded": undefined,
                           "selected": undefined,
                         }

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -102,7 +102,7 @@ export type LocalMessageInputContext = {
   toggleAttachmentPicker: () => void;
   uploadNewFile: (file: File) => Promise<void>;
   audioRecorderManager: AudioRecorderManager;
-  startVoiceRecording: () => Promise<void>;
+  startVoiceRecording: () => Promise<boolean | undefined>;
   deleteVoiceRecording: () => Promise<void>;
   uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
   stopVoiceRecording: () => Promise<void>;