fix: audio recording designs (#3498)

## 🎯 Goal

<!-- Describe why we are making this change -->

## 🛠 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/AttachmentPreview/AttachmentUploadPreviewList.tsx

@@ -25,6 +25,8 @@ import {
   isLocalVoiceRecordingAttachment,
   isVideoAttachment,
   LocalAttachment,
+  LocalAudioAttachment,
+  LocalVoiceRecordingAttachment,
 } from 'stream-chat';
 
 import { useMessageComposer } from '../../../../contexts';
@@ -39,6 +41,7 @@ import { primitives } from '../../../../theme';
 
 const END_ANCHOR_THRESHOLD = 16;
 const END_SHRINK_COMPENSATION_DURATION = 200;
+const MAX_AUDIO_ATTACHMENTS_CONTAINER_WIDTH = 560;
 
 export type AttachmentUploadListPreviewPropsWithContext = Pick<
   MessageInputContextValue,
@@ -69,6 +72,14 @@ const ItemSeparatorComponent = () => {
   return <View style={[styles.itemSeparator, itemSeparator]} />;
 };
 
+const getIsAudioAttachmentPreview =
+  (soundPackageAvailable: boolean) =>
+  (
+    attachment: LocalAttachment,
+  ): attachment is LocalAudioAttachment | LocalVoiceRecordingAttachment =>
+    isLocalVoiceRecordingAttachment(attachment) ||
+    (soundPackageAvailable && isLocalAudioAttachment(attachment));
+
 /**
  * AttachmentUploadPreviewList
  * UI Component to preview the files set for upload
@@ -85,16 +96,22 @@ const UnMemoizedAttachmentUploadPreviewList = (
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const attachmentListRef = useRef<FlatList<LocalAttachment>>(null);
-  const previousAttachmentsLengthRef = useRef(attachments.length);
+  const soundPackageAvailable = isSoundPackageAvailable();
+  const isAudioAttachmentPreview = getIsAudioAttachmentPreview(soundPackageAvailable);
+  const previousNonAudioAttachmentsLengthRef = useRef(0);
   const contentWidthRef = useRef(0);
   const viewportWidthRef = useRef(0);
   const scrollOffsetXRef = useRef(0);
   const endShrinkCompensationX = useSharedValue(0);
+  const audioAttachments = attachments.filter(isAudioAttachmentPreview);
+  const nonAudioAttachments = attachments.filter(
+    (attachment) => !isAudioAttachmentPreview(attachment),
+  );
 
   const {
     theme: {
       messageInput: {
-        attachmentUploadPreviewList: { flatList },
+        attachmentUploadPreviewList: { audioAttachmentsContainer, flatList },
       },
     },
   } = useTheme();
@@ -224,10 +241,10 @@ const UnMemoizedAttachmentUploadPreviewList = (
   );
 
   useEffect(() => {
-    const previousLength = previousAttachmentsLengthRef.current;
-    const nextLength = attachments.length;
+    const previousLength = previousNonAudioAttachmentsLengthRef.current;
+    const nextLength = nonAudioAttachments.length;
     const didAddAttachment = nextLength > previousLength;
-    previousAttachmentsLengthRef.current = nextLength;
+    previousNonAudioAttachmentsLengthRef.current = nextLength;
 
     if (!didAddAttachment) {
       return;
@@ -238,7 +255,7 @@ const UnMemoizedAttachmentUploadPreviewList = (
     requestAnimationFrame(() => {
       attachmentListRef.current?.scrollToEnd({ animated: true });
     });
-  }, [attachments.length, endShrinkCompensationX]);
+  }, [endShrinkCompensationX, nonAudioAttachments.length]);
 
   const animatedListWrapperStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: endShrinkCompensationX.value }],
@@ -249,24 +266,53 @@ const UnMemoizedAttachmentUploadPreviewList = (
   }
 
   return (
-    <Animated.View style={animatedListWrapperStyle}>
-      <FlatList
-        data={attachments}
-        horizontal
-        ItemSeparatorComponent={ItemSeparatorComponent}
-        keyExtractor={(item) => item.localMetadata.id}
-        onContentSizeChange={onContentSizeChangeHandler}
-        onLayout={onLayoutHandler}
-        onScroll={onScrollHandler}
-        removeClippedSubviews={false}
-        ref={attachmentListRef}
-        renderItem={renderItem}
-        scrollEventThrottle={16}
-        showsHorizontalScrollIndicator={false}
-        style={[styles.flatList, flatList]}
-        testID={'attachment-upload-preview-list'}
-      />
-    </Animated.View>
+    <>
+      {audioAttachments.length ? (
+        <Animated.View
+          entering={ZoomIn.duration(200)}
+          exiting={ZoomOut.duration(200)}
+          layout={LinearTransition.duration(200)}
+          style={[styles.audioAttachmentsContainer, audioAttachmentsContainer]}
+        >
+          {audioAttachments.map((attachment) => (
+            <AttachmentPreviewCell key={attachment.localMetadata.id}>
+              <AudioAttachmentUploadPreview
+                attachment={attachment}
+                handleRetry={attachmentManager.uploadAttachment}
+                removeAttachments={attachmentManager.removeAttachments}
+              />
+            </AttachmentPreviewCell>
+          ))}
+        </Animated.View>
+      ) : null}
+
+      {nonAudioAttachments.length ? (
+        <Animated.View
+          entering={ZoomIn.duration(200)}
+          exiting={ZoomOut.duration(200)}
+          layout={LinearTransition.duration(200)}
+        >
+          <Animated.View style={animatedListWrapperStyle}>
+            <FlatList
+              data={nonAudioAttachments}
+              horizontal
+              ItemSeparatorComponent={ItemSeparatorComponent}
+              keyExtractor={(item) => item.localMetadata.id}
+              onContentSizeChange={onContentSizeChangeHandler}
+              onLayout={onLayoutHandler}
+              onScroll={onScrollHandler}
+              removeClippedSubviews={false}
+              ref={attachmentListRef}
+              renderItem={renderItem}
+              scrollEventThrottle={16}
+              showsHorizontalScrollIndicator={false}
+              style={[styles.flatList, flatList]}
+              testID={'attachment-upload-preview-list'}
+            />
+          </Animated.View>
+        </Animated.View>
+      ) : null}
+    </>
   );
 };
 
@@ -301,6 +347,10 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr
 };
 
 const styles = StyleSheet.create({
+  audioAttachmentsContainer: {
+    maxWidth: MAX_AUDIO_ATTACHMENTS_CONTAINER_WIDTH,
+    width: '100%',
+  },
   flatList: {
     overflow: 'visible',
   },

package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx

@@ -104,12 +104,13 @@ const useStyles = () => {
         },
         wrapper: {
           padding: primitives.spacingXxs,
+          width: '100%',
         },
         audioAttachmentContainer: {
           borderRadius: primitives.radiusLg,
           borderColor: semantics.borderCoreDefault,
           borderWidth: 1,
-          width: 274, // TODO: Fix this
+          width: '100%',
         },
       }),
     [semantics.borderCoreDefault],

package/src/contexts/themeContext/utils/theme.ts

@@ -325,6 +325,7 @@ export type Theme = {
     attachButtonContainer: ViewStyle;
     attachmentSelectionBar: ViewStyle;
     attachmentUploadPreviewList: {
+      audioAttachmentsContainer: ViewStyle;
       flatList: ViewStyle;
       itemSeparator: ViewStyle;
     };
@@ -1253,6 +1254,7 @@ export const defaultTheme: Theme = {
     attachButtonContainer: {},
     attachmentSelectionBar: {},
     attachmentUploadPreviewList: {
+      audioAttachmentsContainer: {},
       flatList: {},
       itemSeparator: {},
     },