feat: show audio attachments in message list (#1582)

* feat: allow audio upload and improve UI of audio files in message input

* feat: add audio upload in message input for expo apps

* feat: audio upload implementation for native cli

* fix: issues with audio attachment controls with native and expo cli

* fix: playing multiple audio in sync with url tracked in the state above the component

* feat: playing audio from message input one after the other

* fix: issues with audio playing in expo

* refactor: set state logic and made audio attachment upload preview component customizable

* fix: styling between two audio files

* feat: add support for audio attachments in message attachments inside messagelist

* fix: props usage and making the AudioAttachment customizable, added docs for the component

* fix: added isAudioPackageAvailable condition so that the audio Ui only renders if package available

* refactor: change of status parameter to pausedStatus in onPlayPause

Author: khushal87

docusaurus/docs/reactnative/common-content/core-components/channel/props/audio_attachment.mdx

@@ -0,0 +1,9 @@
+Component for rendering the Audio Attachment
+
+Available Props:
+
+- `index`
+
+| Type      | Default                                                             |
+| --------- | ------------------------------------------------------------------- |
+| Component | [`AudioAttachment`](../../../../ui-components/audio_attachment.mdx) |

docusaurus/docs/reactnative/contexts/message_input_context.mdx

@@ -7,6 +7,7 @@ import SelectedPicker from '../common-content/contexts/attachment-picker-context
 
 import AdditionalTextInputProps from '../common-content/core-components/channel/props/additional_text_input_props.mdx';
 import AttachButton from '../common-content/core-components/channel/props/attach_button.mdx';
+import AudioAttachment from '../common-content/core-components/channel/props/audio_attachment.mdx';
 import AutoCompleteSuggestionsLimit from '../common-content/core-components/channel/props/auto_complete_suggestions_limit.mdx';
 import AutoCompleteTriggerSettings from '../common-content/core-components/channel/props/auto_complete_trigger_settings.mdx';
 import CommandsButton from '../common-content/core-components/channel/props/commands_button.mdx';
@@ -370,6 +371,10 @@ const { sendMessage, toggleAttachmentPicker } = useMessageInputContext();
 
 <AttachButton />
 
+### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#audioattachment)_ props</div> AudioAttachment {#audioattachment}
+
+<AudioAttachment />
+
 ### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#commandsbutton)_ props</div> CommandsButton {#commandsbutton}
 
 <CommandsButton />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -26,6 +26,7 @@ import AdditionalTouchableProps from '../common-content/core-components/channel/
 import AttachButton from '../common-content/core-components/channel/props/attach_button.mdx';
 import Attachment from '../common-content/core-components/channel/props/attachment.mdx';
 import AttachmentActions from '../common-content/core-components/channel/props/attachment_actions.mdx';
+import AudioAttachment from '../common-content/core-components/channel/props/audio_attachment.mdx';
 import Card from '../common-content/core-components/channel/props/card.mdx';
 import CardCover from '../common-content/core-components/channel/props/card_cover.mdx';
 import CardFooter from '../common-content/core-components/channel/props/card_footer.mdx';
@@ -688,6 +689,10 @@ Callback function to set the [ref](https://reactjs.org/docs/refs-and-the-dom.htm
 
 <AttachmentActions />
 
+### AudioAttachment
+
+<AudioAttachment />
+
 ### Card
 
 <Card />

docusaurus/docs/reactnative/ui-components/audio_attachment.mdx

@@ -0,0 +1,46 @@
+---
+id: 'audio-attachment'
+title: 'AudioAttachment'
+---
+
+Component to render the Audio Attachment controls within the [MessageList](./message_list.mdx) and [MessageInput](./message_input.mdx).
+
+This is the default component provided to the prop [`AudioAttachment`](../core-components/channel.mdx#audioattachment) on the `Channel` component.
+
+## Props
+
+### <div class="label required">required</div> **index**
+
+| Type   |
+| ------ |
+| number |
+
+### <div class="label required">required</div> **item**
+
+| Type                                         |
+| -------------------------------------------- |
+| object(duration, progress, paused, id, file) |
+
+### <div class="label required">required</div> **onLoad**
+
+| Type                                        |
+| ------------------------------------------- |
+| `(index: string, duration: number) => void` |
+
+### <div class="label required">required</div> **onProgress**
+
+| Type                                                              |
+| ----------------------------------------------------------------- |
+| `(index: string, currentTime?: number, hasEnd?: boolean) => void` |
+
+### <div class="label required">required</div> **onPlayPause**
+
+| Type                                              |
+| ------------------------------------------------- |
+| `(index: string, pausedStatus?: boolean) => void` |
+
+### testID
+
+| Type   |
+| ------ |
+| string |

examples/ExpoMessaging/ios/Podfile.lock

@@ -536,7 +536,7 @@ SPEC CHECKSUMS:
   EXSharing: 328228a9f14503cfdec68892796478a7a15b8d4d
   EXSplashScreen: 21669e598804ee810547dbb6692c8deb5dd8dbf3
   FBLazyVector: c71c5917ec0ad2de41d5d06a5855f6d5eda06971
-  FBReactNativeSpec: 244d2780a858c4f0972d17e1d6a0cad15e32fbbc
+  FBReactNativeSpec: de8769e567b4274ba4a943fafbfe2f7e8fab89a8
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: d34bf57e17cb6e3b2681f4809b13843c021feb6c

examples/ExpoMessaging/yarn.lock

@@ -1864,6 +1864,27 @@
     xcode "^3.0.1"
     xml2js "0.4.23"
 
+"@expo/config-plugins@^4.0.14":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@expo/config-plugins/-/config-plugins-4.1.5.tgz#9d357d2cda9c095e511b51583ede8a3b76174068"
+  integrity sha512-RVvU40RtZt12HavuDAe+LDIq9lHj7sheOfMEHdmpJ/uTA8pgvkbc56XF6JHQD+yRr6+uhhb+JnAasGq49dsQbw==
+  dependencies:
+    "@expo/config-types" "^45.0.0"
+    "@expo/json-file" "8.2.36"
+    "@expo/plist" "0.0.18"
+    "@expo/sdk-runtime-versions" "^1.0.0"
+    "@react-native/normalize-color" "^2.0.0"
+    chalk "^4.1.2"
+    debug "^4.3.1"
+    find-up "~5.0.0"
+    getenv "^1.0.0"
+    glob "7.1.6"
+    resolve-from "^5.0.0"
+    semver "^7.3.5"
+    slash "^3.0.0"
+    xcode "^3.0.1"
+    xml2js "0.4.23"
+
 "@expo/config-types@^43.0.1":
   version "43.0.1"
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-43.0.1.tgz#3e047dccb371741a540980eaff26fb0c95039c30"
@@ -1874,6 +1895,11 @@
   resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-44.0.0.tgz#d3480fe2c99f9e895dae4ebba58b74ed72d03e26"
   integrity sha512-d+gpdKOAhqaD5RmcMzGgKzNtvE1w+GCqpFQNSXLliYlXjj+Tv0eL8EPeAdPtvke0vowpPFwd5McXLA90dgY6Jg==
 
+"@expo/config-types@^45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@expo/config-types/-/config-types-45.0.0.tgz#963c2fdce8fbcbd003758b92ed8a25375f437ef6"
+  integrity sha512-/QGhhLWyaGautgEyU50UJr5YqKJix5t77ePTwreOVAhmZH+ff3nrrtYTTnccx+qF08ZNQmfAyYMCD3rQfzpiJA==
+
 "@expo/[email protected]", "@expo/config@^6.0.6":
   version "6.0.19"
   resolved "https://registry.yarnpkg.com/@expo/config/-/config-6.0.19.tgz#26a7f7ffb6419cc6e6d4205b3c7764aa9ecb551a"
@@ -1957,6 +1983,15 @@
     json5 "^1.0.1"
     write-file-atomic "^2.3.0"
 
+"@expo/[email protected]":
+  version "8.2.36"
+  resolved "https://registry.yarnpkg.com/@expo/json-file/-/json-file-8.2.36.tgz#62a505cb7f30a34d097386476794680a3f7385ff"
+  integrity sha512-tOZfTiIFA5KmMpdW9KF7bc6CFiGjb0xnbieJhTGlHrLL+ps2G0OkqmuZ3pFEXBOMnJYUVpnSy++52LFxvpa5ZQ==
+  dependencies:
+    "@babel/code-frame" "~7.10.4"
+    json5 "^1.0.1"
+    write-file-atomic "^2.3.0"
+
 "@expo/metro-config@~0.2.6":
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/@expo/metro-config/-/metro-config-0.2.8.tgz#c0fd56723e2fb9bb352e788e8f8fe0e218aaf663"
@@ -1986,6 +2021,15 @@
     base64-js "^1.2.3"
     xmlbuilder "^14.0.0"
 
+"@expo/[email protected]":
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/@expo/plist/-/plist-0.0.18.tgz#9abcde78df703a88f6d9fa1a557ee2f045d178b0"
+  integrity sha512-+48gRqUiz65R21CZ/IXa7RNBXgAI/uPSdvJqoN9x1hfL44DNbUoWHgHiEXTx7XelcATpDwNTz6sHLfy0iNqf+w==
+  dependencies:
+    "@xmldom/xmldom" "~0.7.0"
+    base64-js "^1.2.3"
+    xmlbuilder "^14.0.0"
+
 "@expo/prebuild-config@^3.0.15":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@expo/prebuild-config/-/prebuild-config-3.1.0.tgz#9fa10f12745ecaa6d3d4957ba97142edb8747a85"
@@ -3677,6 +3721,13 @@ expo-asset@~8.4.6:
     path-browserify "^1.0.0"
     url-parse "^1.4.4"
 
+expo-av@^11.2.3:
+  version "11.2.3"
+  resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-11.2.3.tgz#254242dae76e3cd60ef9d9c33618e4a12d37aa33"
+  integrity sha512-ptTe96s33Ct0eOsOmNTvtaWFx4B0SDkQmDfPbiuX/C2afqbLQf8geEopw7BRO8ZZl7Qe3qBMH6YLHXKTkZkTyQ==
+  dependencies:
+    "@expo/config-plugins" "^4.0.14"
+
 expo-av@~10.2.0:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-10.2.1.tgz#c08bce464d673d0e90c68cac082bfb75a9437f25"

package/src/components/MessageInput/AudioAttachmentUploadPreview.tsx renamed to package/src/components/Attachment/AudioAttachment.tsx

@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     paddingRight: 8,
   },
-  fileContentContainer: { flexDirection: 'row' },
+  fileContentContainer: { flexDirection: 'row', paddingRight: 40 },
   filenameText: {
     fontSize: 14,
     fontWeight: 'bold',
@@ -76,24 +76,24 @@ const styles = StyleSheet.create({
   },
 });
 
-export type AudioAttachmentUploadPreviewPropsWithContext<
+export type AudioAttachmentPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
   'fileUploads' | 'removeFile' | 'uploadFile'
 > & {
   index: number;
-  item: FileUpload;
+  item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, status?: boolean) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
-  testID: string;
+  testID?: string;
 };
 
-const AudioAttachmentUploadPreviewWithContext = <
+const AudioAttachmentWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>,
+  props: AudioAttachmentPropsWithContext<StreamChatGenerics>,
 ) => {
   const soundRef = React.useRef<SoundReturnType | null>(null);
   const { fileUploads, index, item, onLoad, onPlayPause, onProgress } = props;
@@ -212,10 +212,10 @@ const AudioAttachmentUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white },
+      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white, white },
       messageInput: {
         fileUploadPreview: {
-          audioAttachmentUploadPreview: { progressControlView, progressDurationText, roundedView },
+          audioAttachment: { progressControlView, progressDurationText, roundedView },
           fileContainer,
           fileContentContainer,
           filenameText,
@@ -245,6 +245,7 @@ const AudioAttachmentUploadPreviewWithContext = <
             }
           : {},
         {
+          backgroundColor: white,
           borderColor: grey_whisper,
           width: -16,
         },
@@ -318,7 +319,7 @@ const AudioAttachmentUploadPreviewWithContext = <
                 onProgressDrag={handleProgressDrag}
                 progress={item.progress as number}
                 testID='progress-control'
-                width={110}
+                width={120}
               />
             </View>
           </View>
@@ -328,35 +329,29 @@ const AudioAttachmentUploadPreviewWithContext = <
   );
 };
 
-export type AudioAttachmentUploadPreviewProps<
+export type AudioAttachmentProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>> & {
+> = Partial<AudioAttachmentPropsWithContext<StreamChatGenerics>> & {
   index: number;
-  item: FileUpload;
+  item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
-  onPlayPause: (index: string, status?: boolean) => void;
+  onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
   testID: string;
 };
 
 /**
- * AudioAttachmentUploadPreview
- * UI Component to preview the audio files set for upload
+ * AudioAttachment
+ * UI Component to preview the audio files
  */
-export const AudioAttachmentUploadPreview = <
+export const AudioAttachment = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AudioAttachmentUploadPreviewProps<StreamChatGenerics>,
+  props: AudioAttachmentProps<StreamChatGenerics>,
 ) => {
   const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
 
-  return (
-    <AudioAttachmentUploadPreviewWithContext
-      {...{ fileUploads, removeFile, uploadFile }}
-      {...props}
-    />
-  );
+  return <AudioAttachmentWithContext {...{ fileUploads, removeFile, uploadFile }} {...props} />;
 };
 
-AudioAttachmentUploadPreview.displayName =
-  'AudioAttachmentUploadPreview{messageInput{autoAttachmentUploadPreview}}';
+AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';