fix: erroneous usage of AudioAttachment and its props from message input context (#1588)

* fix: erroneous usage of AudioAttachment and its props from message input context

* fix: do not play audio message on message overlay

Co-authored-by: Santhosh Vaiyapuri <[email protected]>

Author: khushal87

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

@@ -1,9 +1,5 @@
 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,7 +7,6 @@ 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';
@@ -371,10 +370,6 @@ 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/contexts/messages_context.mdx

@@ -6,6 +6,7 @@ title: MessagesContext
 import AdditionalTouchableProps from '../common-content/core-components/channel/props/additional_touchable_props.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';
@@ -254,6 +255,10 @@ Upserts a given message in local channel state. Please note that this function d
 
 <AttachmentActions />
 
+### <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#card)_ props</div> Card {#card}
 
 <Card />

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

@@ -9,12 +9,6 @@ This is the default component provided to the prop [`AudioAttachment`](../core-c
 
 ## Props
 
-### <div class="label required">required</div> **index**
-
-| Type   |
-| ------ |
-| number |
-
 ### <div class="label required">required</div> **item**
 
 | Type                                         |

package/src/components/Attachment/AudioAttachment.tsx

@@ -4,12 +4,7 @@ import { I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-nat
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import {
-  FileUpload,
-  MessageInputContextValue,
-  useMessageInputContext,
-  useTheme,
-} from '../../contexts';
+import { FileUpload, useTheme } from '../../contexts';
 import { Pause, Play } from '../../icons';
 import {
   PlaybackStatus,
@@ -18,7 +13,6 @@ import {
   VideoPayloadData,
   VideoProgressData,
 } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ProgressControl } from '../ProgressControl/ProgressControl';
 
 dayjs.extend(duration);
@@ -76,27 +70,17 @@ const styles = StyleSheet.create({
   },
 });
 
-export type AudioAttachmentPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile'
-> & {
-  index: number;
+export type AudioAttachmentPropsWithContext = {
   item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
   onPlayPause: (index: string, pausedStatus?: boolean) => void;
   onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
   testID?: string;
 };
 
-const AudioAttachmentWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioAttachmentPropsWithContext<StreamChatGenerics>,
-) => {
+const AudioAttachmentWithContext = (props: AudioAttachmentPropsWithContext) => {
   const soundRef = React.useRef<SoundReturnType | null>(null);
-  const { fileUploads, index, item, onLoad, onPlayPause, onProgress } = props;
+  const { item, onLoad, onPlayPause, onProgress } = props;
 
   const handleLoad = (payload: VideoPayloadData) => {
     onLoad(item.id, payload.duration);
@@ -212,11 +196,10 @@ const AudioAttachmentWithContext = <
 
   const {
     theme: {
-      colors: { accent_blue, black, grey_dark, grey_whisper, static_black, static_white, white },
+      colors: { accent_blue, black, grey_dark, static_black, static_white },
       messageInput: {
         fileUploadPreview: {
           audioAttachment: { progressControlView, progressDurationText, roundedView },
-          fileContainer,
           fileContentContainer,
           filenameText,
           fileTextContainer,
@@ -236,103 +219,82 @@ const AudioAttachmentWithContext = <
   const lastIndexOfDot = item.file.name.lastIndexOf('.');
 
   return (
-    <View
-      style={[
-        styles.fileContainer,
-        index === fileUploads.length - 1
-          ? {
-              marginBottom: 0,
-            }
-          : {},
-        {
-          backgroundColor: white,
-          borderColor: grey_whisper,
-          width: -16,
-        },
-        fileContainer,
-      ]}
-      testID='audio-attachment-upload-preview'
-    >
-      <View style={[styles.fileContentContainer, fileContentContainer]}>
-        <TouchableOpacity
-          accessibilityLabel='Play Pause Button'
-          onPress={() => handlePlayPause()}
+    <View style={[styles.fileContentContainer, fileContentContainer]}>
+      <TouchableOpacity
+        accessibilityLabel='Play Pause Button'
+        onPress={() => handlePlayPause()}
+        style={[
+          styles.roundedView,
+          roundedView,
+          { backgroundColor: static_white, shadowColor: black },
+        ]}
+      >
+        {item.paused ? (
+          <Play height={24} pathFill={static_black} width={24} />
+        ) : (
+          <Pause height={24} pathFill={static_black} width={24} />
+        )}
+      </TouchableOpacity>
+      <View style={[styles.fileTextContainer, fileTextContainer]}>
+        <Text
+          accessibilityLabel='File Name'
+          numberOfLines={1}
           style={[
-            styles.roundedView,
-            roundedView,
-            { backgroundColor: static_white, shadowColor: black },
+            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,
           ]}
         >
-          {item.paused ? (
-            <Play height={24} pathFill={static_black} width={24} />
-          ) : (
-            <Pause height={24} pathFill={static_black} width={24} />
+          {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}
+        </Text>
+        <View
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          {/* <ExpoSoundPlayer filePaused={!!item.paused} soundRef={soundRef} /> */}
+          {Sound.Player && (
+            <Sound.Player
+              onEnd={handleEnd}
+              onLoad={handleLoad}
+              onProgress={handleProgress}
+              paused={item.paused as boolean}
+              soundRef={soundRef}
+              testID='sound-player'
+              uri={item.file.uri}
+            />
           )}
-        </TouchableOpacity>
-        <View style={[styles.fileTextContainer, fileTextContainer]}>
-          <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,
-            ]}
-          >
-            {item.file.name.slice(0, 12) + '...' + item.file.name.slice(lastIndexOfDot)}
+          <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
+            {progressDuration}
           </Text>
-          <View
-            style={{
-              alignItems: 'center',
-              display: 'flex',
-              flexDirection: 'row',
-            }}
-          >
-            {/* <ExpoSoundPlayer filePaused={!!item.paused} soundRef={soundRef} /> */}
-            {Sound.Player && (
-              <Sound.Player
-                onEnd={handleEnd}
-                onLoad={handleLoad}
-                onProgress={handleProgress}
-                paused={item.paused as boolean}
-                soundRef={soundRef}
-                testID='sound-player'
-                uri={item.file.uri}
-              />
-            )}
-            <Text style={[styles.progressDurationText, { color: grey_dark }, progressDurationText]}>
-              {progressDuration}
-            </Text>
-            <View style={[styles.progressControlView, progressControlView]}>
-              <ProgressControl
-                duration={item.duration as number}
-                filledColor={accent_blue}
-                onPlayPause={handlePlayPause}
-                onProgressDrag={handleProgressDrag}
-                progress={item.progress as number}
-                testID='progress-control'
-                width={120}
-              />
-            </View>
+          <View style={[styles.progressControlView, progressControlView]}>
+            <ProgressControl
+              duration={item.duration as number}
+              filledColor={accent_blue}
+              onPlayPause={handlePlayPause}
+              onProgressDrag={handleProgressDrag}
+              progress={item.progress as number}
+              testID='progress-control'
+              width={120}
+            />
           </View>
         </View>
       </View>
     </View>
   );
 };
 
-export type AudioAttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<AudioAttachmentPropsWithContext<StreamChatGenerics>> & {
-  index: number;
+export type AudioAttachmentProps = Partial<AudioAttachmentPropsWithContext> & {
   item: Omit<FileUpload, 'state'>;
   onLoad: (index: string, duration: number) => void;
   onPlayPause: (index: string, pausedStatus?: boolean) => void;
@@ -344,14 +306,8 @@ export type AudioAttachmentProps<
  * AudioAttachment
  * UI Component to preview the audio files
  */
-export const AudioAttachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioAttachmentProps<StreamChatGenerics>,
-) => {
-  const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
-
-  return <AudioAttachmentWithContext {...{ fileUploads, removeFile, uploadFile }} {...props} />;
-};
+export const AudioAttachment = (props: AudioAttachmentProps) => (
+  <AudioAttachmentWithContext {...props} />
+);
 
 AudioAttachment.displayName = 'AudioAttachment{messageInput{autoAttachment}}';