feat: async audio (#2501)

* feat: async audio initial steps for Expo CLI

* feat: add async audio for native cli

* feat: add recording to message input context

* feat: add playback support for native CLI for recordings

* feat: audio playback support for expo cli

* feat: async audio play in message list and improvements

* feat: add audio speed change button

* chore: upgrade rn-videi

* feat: native android permissions

* fix: permissions android

* fix: improve async audio

* fix: remove redundant console logs

* fix: improve normalization of waveform

* fix: add prop description

* fix: improve theme

* fix: add improvements to file upload preview

* fix: translation issue

* feat: add comments

* feat: improve state of recording

* feat: props improvement

* docs: message input props

* docs: lint fix

* feat: add audio support guide

* fix: delete voice recording

* feat: enable async audio in TS app and Expo app

* fix: normalization fix

* test: fix tests

docusaurus/docs/reactnative/basics/installation.mdx

@@ -123,6 +123,7 @@ values={[
 <TabItem value='rncli'>
 
 - [`react-native-video`](https://github.com/react-native-video/react-native-video) for Video and Audio playback support.
+- [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and async audio messages support.
 - [`react-native-share`](https://github.com/react-native-share/react-native-share) for Attachment sharing support.
 - [`react-native-haptic-feedback`](https://github.com/junina-de/react-native-haptic-feedback) for user haptics feedback.
 - [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard) for Copy message support.
@@ -132,7 +133,7 @@ values={[
 </TabItem>
 <TabItem value="expo">
 
-- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback support.
+- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback, recording and async audio messages support.
 - [`expo-sharing`](https://docs.expo.dev/versions/latest/sdk/sharing/) for Attachments sharing support.
 - [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) for user haptics support.
 - [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/) for Copy message support.
@@ -142,6 +143,10 @@ values={[
 </TabItem>
 </Tabs>
 
+:::note
+Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application.
+:::
+
 ### Additional Steps
 
 Some dependencies require us to make changes to our application for all functionalities to be available.

docusaurus/docs/reactnative/basics/overview.mdx

@@ -103,6 +103,7 @@ There are a few optional dependencies that can be added by our users to have mor
 <TabItem value='rncli'>
 
 - [`react-native-video`](https://github.com/react-native-video/react-native-video) for Video and Audio playback support.
+- [`react-native-audio-recorder-player`](https://github.com/hyochan/react-native-audio-recorder-player) for Audio recording and async audio messages support.
 - [`react-native-share`](https://github.com/react-native-share/react-native-share) for Attachment sharing support.
 - [`react-native-haptic-feedback`](https://github.com/junina-de/react-native-haptic-feedback) for user haptics feedback.
 - [`@react-native-clipboard/clipboard`](https://github.com/react-native-clipboard/clipboard) for Copy message support.
@@ -112,15 +113,20 @@ There are a few optional dependencies that can be added by our users to have mor
 </TabItem>
 <TabItem value="expo">
 
-- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback support.
+- [`expo-av`](https://docs.expo.dev/versions/latest/sdk/av/) for Video and Audio playback, recording and async audio messages support.
 - [`expo-sharing`](https://docs.expo.dev/versions/latest/sdk/sharing/) for Attachments sharing support.
 - [`expo-haptics`](https://docs.expo.dev/versions/latest/sdk/haptics/) for user haptics support.
 - [`expo-clipboard`](https://docs.expo.dev/versions/latest/sdk/clipboard/) for Copy message support.
 - [`expo-document-picker`](https://docs.expo.dev/versions/latest/sdk/document-picker/) to access device media files.
+- [`react-native-quick-sqlite`](https://github.com/margelo/react-native-quick-sqlite) to enable Offline support in the app.
 
 </TabItem>
 </Tabs>
 
+:::note
+Please follow along the linked documentation of each optional dependencies so as to support them correctly in your application.
+:::
+
 ## Choosing the Right SDK
 
 When integrating with our chat platform, you get to choose which SDK you would like to integrate with.

docusaurus/docs/reactnative/common-content/ui-components/channel/props/async_messages_lock_distance.mdx

@@ -0,0 +1,5 @@
+Controls how many pixels to the top side the user has to scroll in order to lock the recording view and allow the user to lift their finger from the screen without stopping the recording.
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 50      |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/async_messages_minimum_press_duration.mdx

@@ -0,0 +1,5 @@
+Controls the minimum duration(in milliseconds) that the user has to press on the record button in the composer, in order to start recording a new voice message.
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 500     |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/async_messages_multi_send_enabled.mdx

@@ -0,0 +1,5 @@
+When it’s enabled, recorded messages won’t be sent immediately. Instead they will “stack up” in the composer allowing the user to send multiple voice recording as part of the same message.
+
+| Type    | Default |
+| ------- | ------- |
+| Boolean | true    |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/async_messages_slide_to_cancel_distance.mdx

@@ -0,0 +1,5 @@
+Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice message.
+
+| Type   | Default |
+| ------ | ------- |
+| Number | 100     |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_attachment_upload_preview.mdx

@@ -0,0 +1,5 @@
+Component prop used to customize the audio attachment upload preview when its uploading/uploaded in the `MessageInput`.
+
+| Type          | Default                                                             |
+| ------------- | ------------------------------------------------------------------- |
+| ComponentType | [`AudioAttachment`](../../../../ui-components/audio-attachment.mdx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_recorder.mdx

@@ -0,0 +1,5 @@
+Custom UI component to render audio recorder controls in [MessageInput](../../../../ui-components/message-input.mdx).
+
+| Type          | Default                                                                                                                                  |
+| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`AudioRecorder`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/AudioRecorder.tsx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_recording_enabled.mdx

@@ -0,0 +1,5 @@
+Controls whether the feature is enabled.
+
+| Type    | Default |
+| ------- | ------- |
+| Boolean | false   |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_recording_in_progress.mdx

@@ -0,0 +1,5 @@
+Custom UI component to render audio recording in progress in [MessageInput](../../../../ui-components/message-input.mdx). It renders the waveform, duration etc, for the recording.
+
+| Type          | Default                                                                                                                                                                                 |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`AudioRecordingInProgress`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_recording_lock_indicator.mdx

@@ -0,0 +1,5 @@
+Custom UI component to render audio recording lock indicator in [MessageInput](../../../../ui-components/message-input.mdx) that can be dragged up to lock the recording start.
+
+| Type          | Default                                                                                                                                                                                       |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`AudioRecordingLockIndicator`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_recording_preview.mdx

@@ -0,0 +1,5 @@
+Custom UI component to render audio recording preview in [MessageInput](../../../../ui-components/message-input.mdx) that allows playing the recording.
+
+| Type          | Default                                                                                                                                                                           |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`AudioRecordingPreview`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/audio_recording_waveform.mdx

@@ -0,0 +1,5 @@
+Custom UI component to render audio recording waveform in [MessageInput](../../../../ui-components/message-input.mdx).
+
+| Type          | Default                                                                                                                                                                             |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ComponentType | [`AudioRecordingWaveform`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingWaveform.tsx) |

docusaurus/docs/reactnative/common-content/ui-components/channel/props/start_audio_recording_button.mdx

@@ -0,0 +1,5 @@
+Custom UI component for audio recording mic button in [MessageInput](../../../../ui-components/message-input.mdx).
+
+| Type          | Default                                                                                                                                                                              |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ComponentType | [`StartAudioRecordingButton`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx) |

docusaurus/docs/reactnative/contexts/message-input-context.mdx

@@ -6,7 +6,18 @@ title: MessageInputContext
 import SelectedPicker from '../common-content/contexts/attachment-picker-context/selected_picker.mdx';
 
 import AdditionalTextInputProps from '../common-content/ui-components/channel/props/additional_text_input_props.mdx';
+import AsyncMessagesLockDistance from '../common-content/ui-components/channel/props/async_messages_lock_distance.mdx';
+import AsyncMessagesMinimumPressDuration from '../common-content/ui-components/channel/props/async_messages_minimum_press_duration.mdx';
+import AsyncMessagesMultiSendEnabled from '../common-content/ui-components/channel/props/async_messages_multi_send_enabled.mdx';
+import AsyncMessagesSlideToCancelDistance from '../common-content/ui-components/channel/props/async_messages_slide_to_cancel_distance.mdx';
 import AttachButton from '../common-content/ui-components/channel/props/attach_button.mdx';
+import AudioAttachmentUploadPreview from '../common-content/ui-components/channel/props/audio_attachment_upload_preview.mdx';
+import AudioRecorder from '../common-content/ui-components/channel/props/audio_recorder.mdx';
+import AudioRecordingEnabled from '../common-content/ui-components/channel/props/audio_recording_enabled.mdx';
+import AudioRecordingInProgress from '../common-content/ui-components/channel/props/audio_recording_in_progress.mdx';
+import AudioRecordingLockIndicator from '../common-content/ui-components/channel/props/audio_recording_lock_indicator.mdx';
+import AudioRecordingPreview from '../common-content/ui-components/channel/props/audio_recording_preview.mdx';
+import AudioRecordingWaveform from '../common-content/ui-components/channel/props/audio_recording_waveform.mdx';
 import AutoCompleteSuggestionsLimit from '../common-content/ui-components/channel/props/auto_complete_suggestions_limit.mdx';
 import AutoCompleteTriggerSettings from '../common-content/ui-components/channel/props/auto_complete_trigger_settings.mdx';
 import CommandsButton from '../common-content/ui-components/channel/props/commands_button.mdx';
@@ -33,6 +44,7 @@ import SendButton from '../common-content/ui-components/channel/props/send_butto
 import SendMessageDisallowedIndicator from '../common-content/ui-components/channel/props/send_message_disallowed_indicator.mdx';
 import SendImageAsync from '../common-content/ui-components/channel/props/send_image_async.mdx';
 import ShowThreadMessageInChannelButton from '../common-content/ui-components/channel/props/show_thread_message_in_channel_button.mdx';
+import StartAudioRecordingButton from '../common-content/ui-components/channel/props/start_audio_recording_button.mdx';
 import Thread from '../common-content/ui-components/channel/props/thread.mdx';
 import UploadProgressIndicator from '../common-content/ui-components/channel/props/upload_progress_indicator.mdx';
 
@@ -106,6 +118,26 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <AdditionalTextInputProps />
 
+### ayncMessagesLockDistance
+
+<AsyncMessagesLockDistance />
+
+### ayncMessagesMinimumPressDuration
+
+<AsyncMessagesMinimumPressDuration />
+
+### ayncMessagesMultiSendEnabled
+
+<AsyncMessagesMultiSendEnabled />
+
+### ayncMessagesSlideToCancelDistance
+
+<AsyncMessagesSlideToCancelDistance />
+
+### audioRecordingEnabled
+
+<AudioRecordingEnabled />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#autocompletesuggestionslimit)_ props</div> autoCompleteSuggestionsLimit {#autocompletesuggestionslimit}
 
 <AutoCompleteSuggestionsLimit />
@@ -376,6 +408,30 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <AttachButton />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#audioattachmentuploadpreview)_ props</div> AudioAttachmentUploadPreview {#audioattachmentuploadpreview}
+
+<AudioAttachmentUploadPreview />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#audiorecorder)_ props</div> AudioRecorder {#audiorecorder}
+
+<AudioRecorder />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#audiorecordinginprogress)_ props</div> AudioRecordingInProgress {#audiorecordinginprogress}
+
+<AudioRecordingInProgress />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#audiorecordinglockindicator)_ props</div> AudioRecordingLockIndicator {#audiorecordinglockindicator}
+
+<AudioRecordingLockIndicator />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#audiorecordingpreview)_ props</div> AudioRecordingPreview {#audiorecordingpreview}
+
+<AudioRecordingPreview />
+
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#audiorecordingwaveform)_ props</div> AudioRecordingWaveform {#audiorecordingwaveform}
+
+<AudioRecordingWaveform />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#commandsbutton)_ props</div> CommandsButton {#commandsbutton}
 
 <CommandsButton />
@@ -412,6 +468,10 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <ShowThreadMessageInChannelButton />
 
+### <div class="label description">_forwarded from [Channel](../../core-components/channel#startaudiorecordingbutton)_ props</div> StartAudioRecordingButton {#startaudiorecordingbutton}
+
+<StartAudioRecordingButton />
+
 ### <div class="label description">_forwarded from [Channel](../../core-components/channel#uploadprogressindicator)_ props</div> UploadProgressIndicator {#uploadprogressindicator}
 
 <UploadProgressIndicator />