stream-chat-react-native-core 4.12.0-beta.3 → 4.12.0

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,13 +70,7 @@ 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;
@@ -90,13 +78,9 @@ export type AudioAttachmentPropsWithContext<
   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,92 +219,74 @@ 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>
@@ -329,10 +294,7 @@ const AudioAttachmentWithContext = <
   );
 };
 
-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}}';

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -9,10 +9,7 @@ import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
-import {
-  MessageInputContextValue,
-  useMessageInputContext,
-} from '../../contexts/messageInputContext/MessageInputContext';
+
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -22,17 +19,27 @@ import { isAudioPackageAvailable } from '../../native';
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const FILE_PREVIEW_HEIGHT = 60;
+
 const styles = StyleSheet.create({
   container: {
     padding: 4,
   },
+  fileContainer: {
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    height: FILE_PREVIEW_HEIGHT,
+    justifyContent: 'space-between',
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
 });
 
 export type FileAttachmentGroupPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'files'> &
-  Pick<MessageInputContextValue<StreamChatGenerics>, 'AudioAttachment'> &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment'> & {
+  Pick<MessagesContextValue<StreamChatGenerics>, 'Attachment' | 'AudioAttachment'> & {
     /**
      * The unique id for the message with file attachments
      */
@@ -113,6 +120,7 @@ const FileAttachmentGroupWithContext = <
 
   const {
     theme: {
+      colors: { grey_whisper, white },
       messageSimple: {
         fileAttachmentGroup: { container },
       },
@@ -130,9 +138,23 @@ const FileAttachmentGroupWithContext = <
           ]}
         >
           {file.type === 'audio' && isAudioPackageAvailable() ? (
-            <View accessibilityLabel='audio-attachment-preview'>
+            <View
+              accessibilityLabel='audio-attachment-preview'
+              style={[
+                styles.fileContainer,
+                index === filesToDisplay.length - 1
+                  ? {
+                      marginBottom: 0,
+                    }
+                  : {},
+                {
+                  backgroundColor: white,
+                  borderColor: grey_whisper,
+                  width: -16,
+                },
+              ]}
+            >
               <AudioAttachment
-                index={index}
                 item={{
                   duration: file.duration,
                   file: { name: file.title as string, uri: file.asset_url },
@@ -184,9 +206,8 @@ export const FileAttachmentGroup = <
 
   const { files: contextFiles } = useMessageContext<StreamChatGenerics>();
 
-  const { Attachment = AttachmentDefault } = useMessagesContext<StreamChatGenerics>();
-
-  const { AudioAttachment } = useMessageInputContext<StreamChatGenerics>();
+  const { Attachment = AttachmentDefault, AudioAttachment } =
+    useMessagesContext<StreamChatGenerics>();
 
   const files = propFiles || contextFiles;
 

package/src/components/Attachment/Gallery.tsx

@@ -62,6 +62,12 @@ const styles = StyleSheet.create({
     left: 4,
     position: 'absolute',
   },
+  imageLoadingIndicatorContainer: {
+    height: '100%',
+    justifyContent: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
   imageLoadingIndicatorStyle: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -490,7 +496,7 @@ const GalleryImageThumbnail = <
             uri={thumbnail.url}
           />
           {isLoadingImage && (
-            <View style={{ position: 'absolute' }}>
+            <View style={[styles.imageLoadingIndicatorContainer]}>
               <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
             </View>
           )}

package/src/components/Channel/Channel.tsx

@@ -229,6 +229,7 @@ export type ChannelPropsWithContext<
       | 'additionalTouchableProps'
       | 'Attachment'
       | 'AttachmentActions'
+      | 'AudioAttachment'
       | 'Card'
       | 'CardCover'
       | 'CardFooter'
@@ -1620,7 +1621,6 @@ const ChannelWithContext = <
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
-    AudioAttachment,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,
@@ -1679,6 +1679,7 @@ const ChannelWithContext = <
     additionalTouchableProps,
     Attachment,
     AttachmentActions,
+    AudioAttachment,
     Card,
     CardCover,
     CardFooter,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -8,7 +8,6 @@ export const useCreateInputMessageInputContext = <
 >({
   additionalTextInputProps,
   AttachButton,
-  AudioAttachment,
   autoCompleteSuggestionsLimit,
   autoCompleteTriggerSettings,
   channelId,
@@ -65,7 +64,6 @@ export const useCreateInputMessageInputContext = <
     () => ({
       additionalTextInputProps,
       AttachButton,
-      AudioAttachment,
       autoCompleteSuggestionsLimit,
       autoCompleteTriggerSettings,
       clearEditingState,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -9,6 +9,7 @@ export const useCreateMessagesContext = <
   additionalTouchableProps,
   Attachment,
   AttachmentActions,
+  AudioAttachment,
   Card,
   CardCover,
   CardFooter,
@@ -99,6 +100,7 @@ export const useCreateMessagesContext = <
       additionalTouchableProps,
       Attachment,
       AttachmentActions,
+      AudioAttachment,
       Card,
       CardCover,
       CardFooter,

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -123,9 +123,9 @@ type FileUploadPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachment'
+  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;
+  Pick<MessagesContextValue<StreamChatGenerics>, 'AudioAttachment' | 'FileAttachmentIcon'>;
 
 const FileUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -194,7 +194,7 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey_dark, grey_gainsboro, grey_whisper },
+      colors: { black, grey_dark, grey_gainsboro, grey_whisper, white },
       messageInput: {
         fileUploadPreview: {
           audioAttachmentFileContainer,
@@ -230,14 +230,31 @@ const FileUploadPreviewWithContext = <
                 audioAttachmentFileContainer,
               ]}
             >
-              <AudioAttachment
-                index={index}
-                item={item}
-                onLoad={onLoad}
-                onPlayPause={onPlayPause}
-                onProgress={onProgress}
+              <View
+                style={[
+                  styles.fileContainer,
+                  index === fileUploads.length - 1
+                    ? {
+                        marginBottom: 0,
+                      }
+                    : {},
+                  {
+                    backgroundColor: white,
+                    borderColor: grey_whisper,
+                    width: -16,
+                  },
+                  fileContainer,
+                ]}
                 testID='audio-attachment-upload-preview'
-              />
+              >
+                <AudioAttachment
+                  item={item}
+                  onLoad={onLoad}
+                  onPlayPause={onPlayPause}
+                  onProgress={onProgress}
+                  testID='audio-attachment-upload-preview'
+                />
+              </View>
             </View>
           ) : (
             <View
@@ -371,9 +388,9 @@ export const FileUploadPreview = <
 >(
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
-  const { AudioAttachment, fileUploads, removeFile, setFileUploads, uploadFile } =
+  const { fileUploads, removeFile, setFileUploads, uploadFile } =
     useMessageInputContext<StreamChatGenerics>();
-  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
+  const { AudioAttachment, FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedFileUploadPreview

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx

@@ -4,7 +4,11 @@ import { act } from 'react-test-renderer';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import type { FileUpload } from '../../../contexts/messageInputContext/MessageInputContext';
+import {
+  FileUpload,
+  MessageInputContext,
+  MessageInputContextValue,
+} from '../../../contexts/messageInputContext/MessageInputContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
@@ -26,9 +30,15 @@ jest.mock('react-native/Libraries/ReactNative/I18nManager', () => ({
   isRTL: true,
 }));
 
-const getComponent = (props: Partial<AudioAttachmentProps>) => (
+const getComponent = (
+  props: Partial<AudioAttachmentProps & Pick<MessageInputContextValue, 'fileUploads'>>,
+) => (
   <ThemeProvider theme={defaultTheme}>
-    <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+    <MessageInputContext.Provider
+      value={{ fileUploads: props.fileUploads } as unknown as MessageInputContextValue}
+    >
+      <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+    </MessageInputContext.Provider>
   </ThemeProvider>
 );
 

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx

@@ -4,7 +4,11 @@ import { act } from 'react-test-renderer';
 
 import { fireEvent, render } from '@testing-library/react-native';
 
-import type { FileUpload } from '../../../contexts/messageInputContext/MessageInputContext';
+import {
+  FileUpload,
+  MessageInputContext,
+  MessageInputContextValue,
+} from '../../../contexts/messageInputContext/MessageInputContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
@@ -25,9 +29,15 @@ jest.mock('../../../native.ts', () => {
   };
 });
 
-const getComponent = (props: Partial<AudioAttachmentProps>) => (
+const getComponent = (
+  props: Partial<AudioAttachmentProps & Pick<MessageInputContextValue, 'fileUploads'>>,
+) => (
   <ThemeProvider theme={defaultTheme}>
-    <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+    <MessageInputContext.Provider
+      value={{ fileUploads: props.fileUploads } as unknown as MessageInputContextValue}
+    >
+      <AudioAttachment {...(props as unknown as AudioAttachmentProps)} />,
+    </MessageInputContext.Provider>
   </ThemeProvider>
 );
 

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -327,6 +327,7 @@ const MessageOverlayWithContext = <
                     <Animated.View style={[styles.flex, panStyle]}>
                       {message && (
                         <View
+                          pointerEvents='none'
                           style={[
                             styles.center,
                             styles.overlayPadding,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -21,7 +21,6 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
-import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
 import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
@@ -225,9 +224,6 @@ export type InputMessageInputContextValue<
    */
   AttachButton: React.ComponentType<AttachButtonProps<StreamChatGenerics>>;
 
-  /** Custom UI component for AudioAttachment. */
-  AudioAttachment: React.ComponentType<AudioAttachmentProps<StreamChatGenerics>>;
-
   clearEditingState: () => void;
   clearQuotedMessageState: () => void;
   /**

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -12,7 +12,6 @@ export const useCreateMessageInputContext = <
   asyncIds,
   asyncUploads,
   AttachButton,
-  AudioAttachment,
   autoCompleteSuggestionsLimit,
   clearEditingState,
   clearQuotedMessageState,
@@ -116,7 +115,6 @@ export const useCreateMessageInputContext = <
       asyncIds,
       asyncUploads,
       AttachButton,
-      AudioAttachment,
       autoCompleteSuggestionsLimit,
       clearEditingState,
       clearQuotedMessageState,

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -11,6 +11,7 @@ import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
+import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
 import type { CardProps } from '../../components/Attachment/Card';
 import type { FileAttachmentProps } from '../../components/Attachment/FileAttachment';
 import type { FileAttachmentGroupProps } from '../../components/Attachment/FileAttachmentGroup';
@@ -72,6 +73,8 @@ export type MessagesContextValue<
    * Defaults to: [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/AttachmentActions.tsx)
    */
   AttachmentActions: React.ComponentType<AttachmentActionsProps<StreamChatGenerics>>;
+  /** Custom UI component for AudioAttachment. */
+  AudioAttachment: React.ComponentType<AudioAttachmentProps>;
   /**
    * UI component to display generic media type e.g. giphy, url preview etc
    * Defaults to: [Card](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Card.tsx)

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.12.0-beta.3"
+  "version": "4.12.0"
 }