fix: audio attachment issues

Author: khushal87

package/src/components/Attachment/AudioAttachment.tsx

@@ -4,6 +4,8 @@ import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
+import { AudioAttachment as StreamAudioAttachment } from 'stream-chat';
+
 import { useTheme } from '../../contexts';
 import { useAudioPlayer } from '../../hooks/useAudioPlayer';
 import { Audio, Pause, Play } from '../../icons';
@@ -22,19 +24,18 @@ import { WaveProgressBar } from '../ProgressControl/WaveProgressBar';
 
 dayjs.extend(duration);
 
-export type AudioAttachmentType = AudioConfig & {
-  asset_url?: string;
-  id: string;
-  title?: string;
-  type: 'audio' | 'voiceRecording';
-  waveform_data?: number[];
-};
+export type AudioAttachmentType = AudioConfig &
+  Pick<StreamAudioAttachment, 'waveform_data' | 'asset_url' | 'title'> & {
+    id: string;
+    type: 'audio' | 'voiceRecording';
+  };
 
 export type AudioAttachmentProps = {
   item: AudioAttachmentType;
   onLoad: (index: string, duration: number) => void;
   onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, progress: number) => void;
+  titleMaxLength?: number;
   hideProgressBar?: boolean;
   showSpeedSettings?: boolean;
   testID?: string;
@@ -56,6 +57,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     onProgress,
     showSpeedSettings = false,
     testID,
+    titleMaxLength,
   } = props;
   const { changeAudioSpeed, pauseAudio, playAudio, seekAudio } = useAudioPlayer({ soundRef });
   const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
@@ -326,7 +328,9 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             filenameText,
           ]}
         >
-          {getTrimmedAttachmentTitle(item.title)}
+          {item.type === FileTypes.VoiceRecording
+            ? 'Recording'
+            : getTrimmedAttachmentTitle(item.title, titleMaxLength)}
         </Text>
         <View style={styles.audioInfo}>
           <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -111,14 +111,9 @@ const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithConte
           isSoundPackageAvailable() ? (
             <AudioAttachment
               item={{
-                asset_url: file.asset_url,
-                duration: file.duration,
+                ...file,
                 id: index.toString(),
-                paused: file.paused,
-                progress: file.progress,
-                title: file.title,
                 type: file.type,
-                waveform_data: file.waveform_data,
               }}
               onLoad={onLoad}
               onPlayPause={onPlayPause}

package/src/components/Channel/Channel.tsx

@@ -1302,7 +1302,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
           messageResponse = await doSendMessageRequest(channel?.cid || '', messageData, options);
         } else if (channel) {
           messageResponse = await channel.sendMessage(messageData, options);
-          console.log(messageResponse);
         }
 
         if (messageResponse.message) {

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

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 
-import { LocalAudioAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';
+import { FileReference, LocalAudioAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';
 
 import { AttachmentUploadProgressIndicator } from './AttachmentUploadProgressIndicator';
 import { DismissAttachmentUpload } from './DismissAttachmentUpload';
@@ -39,11 +39,9 @@ export const AudioAttachmentUploadPreview = ({
 
   const finalAttachment = useMemo(
     () => ({
-      asset_url: attachment.asset_url,
+      ...attachment,
+      asset_url: (attachment.localMetadata.file as FileReference).uri,
       id: attachment.localMetadata.id,
-      title: attachment.title,
-      type: attachment.type,
-      waveform_data: attachment.waveform_data,
       ...audioAttachmentConfig,
     }),
     [attachment, audioAttachmentConfig],
@@ -72,6 +70,7 @@ export const AudioAttachmentUploadPreview = ({
           onProgress={onProgress}
           showSpeedSettings={false}
           testID='audio-attachment-upload-preview'
+          titleMaxLength={12}
         />
       </AttachmentUploadProgressIndicator>
       <View style={styles.dismissWrapper}>

package/src/utils/getTrimmedAttachmentTitle.ts

@@ -1,16 +1,17 @@
-import { lookup } from 'mime-types';
+// Add dots in between the title if it is too long and then append the remaining last characters.
+// Eg: "This is a very long title" => "This is a very long ti...le"
+export const getTrimmedAttachmentTitle = (title?: string, maxLength?: number) => {
+  const maxLengthValue = maxLength || 18;
+  if (!title) return '';
 
-export const getTrimmedAttachmentTitle = (title?: string) => {
-  if (!title) {
-    return '';
-  }
+  const ellipsis = '...';
 
-  const mimeType = lookup(title);
-  if (mimeType) {
-    const lastIndexOfDot = title.lastIndexOf('.');
-    return title.length < 12 ? title : title.slice(0, 12) + '...' + title.slice(lastIndexOfDot);
-  } else {
-    // shorten title
-    return title.length < 20 ? title : title.slice(0, 20) + '...';
+  if (title.length <= maxLengthValue) {
+    return title;
   }
+
+  const start = title.slice(0, maxLengthValue / 2);
+  const end = title.slice(title.length - maxLengthValue / 2);
+
+  return `${start}${ellipsis}${end}`;
 };