fix: audio attachment title overflow issue (#2821)

* fix: audio attachment title overflow issue

* fix: remove constant progress bar width

Author: khushal87

package/src/components/Attachment/AudioAttachment.tsx

@@ -36,6 +36,7 @@ export type AudioAttachmentProps = {
  */
 export const AudioAttachment = (props: AudioAttachmentProps) => {
   const [width, setWidth] = useState(0);
+  const [progressControlTextWidth, setProgressControlTextWidth] = useState(0);
   const [currentSpeed, setCurrentSpeed] = useState<number>(1.0);
   const soundRef = React.useRef<SoundReturnType | null>(null);
   const {
@@ -228,9 +229,6 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   return (
     <View
       accessibilityLabel='audio-attachment-preview'
-      onLayout={({ nativeEvent }) => {
-        setWidth(nativeEvent.layout.width);
-      }}
       style={[
         styles.container,
         {
@@ -256,19 +254,19 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
           <Pause fill={static_black} height={32} width={32} />
         )}
       </Pressable>
-      <View style={[styles.leftContainer, leftContainer]}>
+      <View
+        onLayout={({ nativeEvent }) => {
+          setWidth(nativeEvent.layout.width);
+        }}
+        style={[styles.leftContainer, leftContainer]}
+      >
         <Text
           accessibilityLabel='File Name'
           numberOfLines={1}
           style={[
             styles.filenameText,
             {
               color: black,
-              width:
-                16 - // 16 = horizontal padding
-                40 - // 40 = file icon size
-                24 - // 24 = close icon size
-                24, // 24 = internal padding
             },
             I18nManager.isRTL ? { writingDirection: 'rtl' } : { writingDirection: 'ltr' },
             filenameText,
@@ -290,7 +288,12 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
               uri={item.file.uri}
             />
           )}
-          <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
+          <Text
+            onLayout={({ nativeEvent }) => {
+              setProgressControlTextWidth(nativeEvent.layout.width);
+            }}
+            style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}
+          >
             {progressDuration}
           </Text>
           {!hideProgressBar && (
@@ -316,7 +319,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
                   onProgressDrag={handleProgressDrag}
                   progress={item.progress as number}
                   testID='progress-control'
-                  width={width / 2}
+                  width={width - progressControlTextWidth}
                 />
               )}
             </View>
@@ -365,50 +368,48 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: 'bold',
     paddingBottom: 12,
-    paddingLeft: 8,
   },
   leftContainer: {
     justifyContent: 'space-around',
+    marginHorizontal: 16,
+    width: '60%',
   },
   playPauseButton: {
     alignItems: 'center',
     alignSelf: 'center',
     borderRadius: 50,
-    display: 'flex',
     elevation: 4,
     justifyContent: 'center',
-    paddingVertical: 2,
+    padding: 2,
     shadowOffset: {
       height: 2,
       width: 0,
     },
     shadowOpacity: 0.23,
     shadowRadius: 2.62,
-    width: 36,
   },
   progressControlContainer: {},
   progressDurationText: {
     fontSize: 12,
-    paddingLeft: 10,
-    paddingRight: 8,
+    marginRight: 4,
   },
   rightContainer: {
-    marginLeft: 10,
+    marginLeft: 'auto',
   },
   speedChangeButton: {
     alignItems: 'center',
     alignSelf: 'center',
     borderRadius: 50,
     elevation: 4,
     justifyContent: 'center',
+    paddingHorizontal: 10,
     paddingVertical: 5,
     shadowOffset: {
       height: 2,
       width: 0,
     },
     shadowOpacity: 0.23,
     shadowRadius: 2.62,
-    width: 36,
   },
   speedChangeButtonText: {
     fontSize: 12,

package/src/utils/getTrimmedAttachmentTitle.ts

@@ -1,5 +1,13 @@
+import { lookup } from 'mime-types';
+
 export const getTrimmedAttachmentTitle = (title?: string) => {
   if (!title) return '';
-  const lastIndexOfDot = title.lastIndexOf('.');
-  return title.length < 12 ? title : title.slice(0, 12) + '...' + title.slice(lastIndexOfDot);
+
+  const mimeType = lookup(title);
+  if (mimeType) {
+    const lastIndexOfDot = title.lastIndexOf('.');
+    return title.length < 12 ? title : title.slice(0, 12) + '...' + title.slice(lastIndexOfDot);
+  } else {
+    return title;
+  }
 };