fix: voice recording race conditions (#3382)

## 🎯 Goal

This PR fixes a couple of race conditions and locked stale state issues
with regards to voice recording in the SDK.

Most notably, the following:

- Disabling permissions prevents voice recording from being played ever
again
- Quickly jumping from recording to prevented recording breaks the
recording state
- Mismatch between when we're actually recording and the state updating
(possible missed recording by up to a second)
- The underlying `Pressable`'s gesture not being recognized sometimes as
the `Tap` gesture from RNGH took precedence

It also includes various optimizations for the animations to make sure
we are not rerendering heavily when the animations are running (or
recreating gesture detector primitives).

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: isekovanic

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>;