From 64170ca4dbd79dfa2d6300d0849251e885f08f13 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Tue, 3 Dec 2024 12:12:05 +0530
Subject: [PATCH 1/2] fix: audio attachment title overflow issue

---
 .../components/Attachment/AudioAttachment.tsx | 25 ++++++-------------
 .../src/utils/getTrimmedAttachmentTitle.ts    | 12 +++++++--
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/package/src/components/Attachment/AudioAttachment.tsx b/package/src/components/Attachment/AudioAttachment.tsx
index eb4d7e9f16..00e16105b3 100644
--- a/package/src/components/Attachment/AudioAttachment.tsx
+++ b/package/src/components/Attachment/AudioAttachment.tsx
@@ -35,7 +35,6 @@ export type AudioAttachmentProps = {
  * UI Component to preview the audio files
  */
 export const AudioAttachment = (props: AudioAttachmentProps) => {
-  const [width, setWidth] = useState(0);
   const [currentSpeed, setCurrentSpeed] = useState<number>(1.0);
   const soundRef = React.useRef<SoundReturnType | null>(null);
   const {
@@ -228,9 +227,6 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   return (
     <View
       accessibilityLabel='audio-attachment-preview'
-      onLayout={({ nativeEvent }) => {
-        setWidth(nativeEvent.layout.width);
-      }}
       style={[
         styles.container,
         {
@@ -264,11 +260,6 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             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,
@@ -316,7 +307,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
                   onProgressDrag={handleProgressDrag}
                   progress={item.progress as number}
                   testID='progress-control'
-                  width={width / 2}
+                  width={150}
                 />
               )}
             </View>
@@ -365,35 +356,33 @@ 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',
@@ -401,6 +390,7 @@ const styles = StyleSheet.create({
     borderRadius: 50,
     elevation: 4,
     justifyContent: 'center',
+    paddingHorizontal: 10,
     paddingVertical: 5,
     shadowOffset: {
       height: 2,
@@ -408,7 +398,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.23,
     shadowRadius: 2.62,
-    width: 36,
   },
   speedChangeButtonText: {
     fontSize: 12,
diff --git a/package/src/utils/getTrimmedAttachmentTitle.ts b/package/src/utils/getTrimmedAttachmentTitle.ts
index 59079851b0..e798d5f4cd 100644
--- a/package/src/utils/getTrimmedAttachmentTitle.ts
+++ b/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;
+  }
 };

From 3c7dd055f2ba9cf2acf04d407d99fc8db8d3b538 Mon Sep 17 00:00:00 2001
From: Khushal Agarwal <khushal.agarwal987@gmail.com>
Date: Tue, 3 Dec 2024 16:04:53 +0530
Subject: [PATCH 2/2] fix: remove constant progress bar width

---
 .../components/Attachment/AudioAttachment.tsx  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/package/src/components/Attachment/AudioAttachment.tsx b/package/src/components/Attachment/AudioAttachment.tsx
index 00e16105b3..9109159594 100644
--- a/package/src/components/Attachment/AudioAttachment.tsx
+++ b/package/src/components/Attachment/AudioAttachment.tsx
@@ -35,6 +35,8 @@ export type AudioAttachmentProps = {
  * UI Component to preview the audio files
  */
 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 {
@@ -252,7 +254,12 @@ 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}
@@ -281,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 && (
@@ -307,7 +319,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
                   onProgressDrag={handleProgressDrag}
                   progress={item.progress as number}
                   testID='progress-control'
-                  width={150}
+                  width={width - progressControlTextWidth}
                 />
               )}
             </View>