stream-chat-react-native-core 4.11.1-beta.2 → 4.12.0-beta.1

package/lib/typescript/components/MessageInput/AudioAttachmentUploadPreview.d.ts

@@ -0,0 +1,26 @@
+import { FileUpload, MessageInputContextValue } from '../../contexts';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare type AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageInputContextValue<StreamChatGenerics>, 'fileUploads' | 'removeFile' | 'uploadFile'> & {
+    index: number;
+    item: FileUpload;
+    onLoad: (index: string, duration: number) => void;
+    onPlayPause: (index: string, status?: boolean) => void;
+    onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
+    testID: string;
+};
+export declare type AudioAttachmentUploadPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<AudioAttachmentUploadPreviewPropsWithContext<StreamChatGenerics>> & {
+    index: number;
+    item: FileUpload;
+    onLoad: (index: string, duration: number) => void;
+    onPlayPause: (index: string, status?: boolean) => void;
+    onProgress: (index: string, currentTime?: number, hasEnd?: boolean) => void;
+    testID: string;
+};
+/**
+ * AudioAttachmentUploadPreview
+ * UI Component to preview the audio files set for upload
+ */
+export declare const AudioAttachmentUploadPreview: {
+    <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AudioAttachmentUploadPreviewProps<StreamChatGenerics>): JSX.Element;
+    displayName: string;
+};

package/lib/typescript/components/MessageInput/FileUploadPreview.d.ts

@@ -1,7 +1,7 @@
 import { MessageInputContextValue } from '../../contexts/messageInputContext/MessageInputContext';
 import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-declare type FileUploadPreviewPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageInputContextValue<StreamChatGenerics>, 'fileUploads' | 'removeFile' | 'uploadFile'> & Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;
+declare type FileUploadPreviewPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageInputContextValue<StreamChatGenerics>, 'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'> & Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'>;
 export declare type FileUploadPreviewProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;
 /**
  * FileUploadPreview

package/lib/typescript/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/ProgressControl/ProgressControl.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type ProgressControlProps = {
+    duration: number;
+    filledColor: string;
+    onPlayPause: (status?: boolean) => void;
+    onProgressDrag: (progress: number) => void;
+    progress: number;
+    testID: string;
+    width: number;
+};
+export declare const ProgressControl: React.FC<ProgressControlProps>;

package/lib/typescript/components/index.d.ts

@@ -101,6 +101,7 @@ export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';
 export * from './MessageInput/CooldownTimer';
 export * from './MessageInput/FileUploadPreview';
+export * from './MessageInput/AudioAttachmentUploadPreview';
 export * from './MessageInput/ImageUploadPreview';
 export * from './MessageInput/InputButtons';
 export * from './MessageInput/MessageInput';
@@ -134,6 +135,7 @@ export * from './MessageOverlay/OverlayBackdrop';
 export * from './MessageOverlay/OverlayReactions';
 export * from './MessageOverlay/OverlayReactionsAvatar';
 export * from './MessageOverlay/OverlayReactionList';
+export * from './ProgressControl/ProgressControl';
 export * from './Reply/Reply';
 export * from './Spinner/Spinner';
 export * from './Thread/Thread';

package/lib/typescript/contexts/messageContext/MessageContext.d.ts

@@ -100,4 +100,4 @@ export declare const useMessageContext: <StreamChatGenerics extends DefaultStrea
  * typing is desired while using the HOC withMessageContextContext the Props for the
  * wrapped component must be provided as the first generic.
  */
-export declare const withMessageContext: <P extends UnknownType, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<P>) => React.FC<Omit<P, "disabled" | "onPress" | "onPressIn" | "onLongPress" | "channel" | "members" | "threadList" | "reactions" | "images" | "message" | "handleAction" | "alignment" | "actionsEnabled" | "files" | "groupStyles" | "handleDeleteMessage" | "handleEditMessage" | "handleQuotedReplyMessage" | "handleResendMessage" | "handleToggleBanUser" | "handleToggleMuteUser" | "handleToggleReaction" | "hasReactions" | "isMyMessage" | "lastGroupMessage" | "messageContentOrder" | "onlyEmojis" | "onOpenThread" | "otherAttachments" | "showMessageOverlay" | "showMessageStatus" | "videos" | "goToMessage" | "lastReceivedId" | "preventPress" | "showAvatar">>;
+export declare const withMessageContext: <P extends UnknownType, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<P>) => React.FC<Omit<P, "disabled" | "onPress" | "onPressIn" | "onLongPress" | "channel" | "members" | "threadList" | "reactions" | "images" | "alignment" | "files" | "groupStyles" | "message" | "onlyEmojis" | "otherAttachments" | "videos" | "isMyMessage" | "actionsEnabled" | "handleAction" | "handleDeleteMessage" | "handleEditMessage" | "handleQuotedReplyMessage" | "handleResendMessage" | "handleToggleBanUser" | "handleToggleMuteUser" | "handleToggleReaction" | "hasReactions" | "lastGroupMessage" | "messageContentOrder" | "onOpenThread" | "showMessageOverlay" | "showMessageStatus" | "goToMessage" | "lastReceivedId" | "preventPress" | "showAvatar">>;

package/lib/typescript/contexts/messageInputContext/MessageInputContext.d.ts

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import type { TextInput, TextInputProps } from 'react-native';
 import { Attachment, SendFileAPIResponse, StreamChat, Message as StreamMessage, UserFilters, UserOptions, UserResponse, UserSort } from 'stream-chat';
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
+import type { AudioAttachmentUploadPreviewProps } from '../../components/MessageInput/AudioAttachmentUploadPreview';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
 import type { InputEditingStateHeaderProps } from '../../components/MessageInput/components/InputEditingStateHeader';
 import type { InputGiphySearchProps } from '../../components/MessageInput/components/InputGiphySearch';
@@ -22,6 +23,9 @@ export declare type FileUpload = {
     file: File;
     id: string;
     state: FileStateValue;
+    duration?: number;
+    paused?: boolean;
+    progress?: number;
     thumb_url?: string;
     url?: string;
 };
@@ -172,6 +176,8 @@ export declare type InputMessageInputContextValue<StreamChatGenerics extends Def
      * Defaults to and accepts same props as: [AttachButton](https://getstream.io/chat/docs/sdk/reactnative/ui-components/attach-button/)
      */
     AttachButton: React.ComponentType<AttachButtonProps<StreamChatGenerics>>;
+    /** Custom UI component for AudioAttachmentUploadPreview. */
+    AudioAttachmentUploadPreview: React.ComponentType<AudioAttachmentUploadPreviewProps<StreamChatGenerics>>;
     clearEditingState: () => void;
     clearQuotedMessageState: () => void;
     /**
@@ -341,4 +347,4 @@ export declare const useMessageInputContext: <StreamChatGenerics extends Default
  * typing is desired while using the HOC withMessageInputContext the Props for the
  * wrapped component must be provided as the first generic.
  */
-export declare const withMessageInputContext: <P extends UnknownType, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<P>) => React.FC<Omit<P, "AttachButton" | "clearEditingState" | "clearQuotedMessageState" | "CommandsButton" | "CooldownTimer" | "editing" | "editMessage" | "FileUploadPreview" | "hasCommands" | "hasFilePicker" | "hasImagePicker" | "ImageUploadPreview" | "InputEditingStateHeader" | "InputGiphySearch" | "InputReplyStateHeader" | "maxNumberOfFiles" | "MoreOptionsButton" | "numberOfLines" | "quotedMessage" | "SendButton" | "sendImageAsync" | "setQuotedMessageState" | "ShowThreadMessageInChannelButton" | "UploadProgressIndicator" | "additionalTextInputProps" | "autoCompleteSuggestionsLimit" | "autoCompleteTriggerSettings" | "compressImageQuality" | "doDocUploadRequest" | "doImageUploadRequest" | "initialValue" | "Input" | "InputButtons" | "maxMessageLength" | "mentionAllAppUsersEnabled" | "mentionAllAppUsersQuery" | "onChangeText" | "SendMessageDisallowedIndicator" | "setInputRef" | keyof LocalMessageInputContext<StreamChatGenerics>>>;
+export declare const withMessageInputContext: <P extends UnknownType, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<P>) => React.FC<Omit<P, "AttachButton" | "AudioAttachmentUploadPreview" | "clearEditingState" | "clearQuotedMessageState" | "CommandsButton" | "CooldownTimer" | "editing" | "editMessage" | "FileUploadPreview" | "hasCommands" | "hasFilePicker" | "hasImagePicker" | "ImageUploadPreview" | "InputEditingStateHeader" | "InputGiphySearch" | "InputReplyStateHeader" | "maxNumberOfFiles" | "MoreOptionsButton" | "numberOfLines" | "quotedMessage" | "SendButton" | "sendImageAsync" | "setQuotedMessageState" | "ShowThreadMessageInChannelButton" | "UploadProgressIndicator" | "additionalTextInputProps" | "autoCompleteSuggestionsLimit" | "autoCompleteTriggerSettings" | "compressImageQuality" | "doDocUploadRequest" | "doImageUploadRequest" | "initialValue" | "Input" | "InputButtons" | "maxMessageLength" | "mentionAllAppUsersEnabled" | "mentionAllAppUsersQuery" | "onChangeText" | "SendMessageDisallowedIndicator" | "setInputRef" | keyof LocalMessageInputContext<StreamChatGenerics>>>;

package/lib/typescript/contexts/messageInputContext/hooks/useCreateMessageInputContext.d.ts

@@ -1,4 +1,4 @@
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ThreadContextValue } from '../../threadContext/ThreadContext';
 import type { MessageInputContextValue } from '../MessageInputContext';
-export declare const useCreateMessageInputContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTextInputProps, appendText, asyncIds, asyncUploads, AttachButton, autoCompleteSuggestionsLimit, clearEditingState, clearQuotedMessageState, closeAttachmentPicker, CommandsButton, compressImageQuality, cooldownEndsAt, CooldownTimer, doDocUploadRequest, doImageUploadRequest, editing, editMessage, FileUploadPreview, fileUploads, giphyActive, hasCommands, hasFilePicker, hasImagePicker, ImageUploadPreview, imageUploads, initialValue, Input, inputBoxRef, InputButtons, InputEditingStateHeader, InputGiphySearch, InputReplyStateHeader, isValidMessage, maxMessageLength, maxNumberOfFiles, mentionAllAppUsersEnabled, mentionAllAppUsersQuery, mentionedUsers, MoreOptionsButton, numberOfLines, numberOfUploads, onChange, onChangeText, onSelectItem, openAttachmentPicker, openCommandsPicker, openFilePicker, openMentionsPicker, pickFile, quotedMessage, removeFile, removeImage, resetInput, selectedPicker, SendButton, sendImageAsync, sending, sendMessage, sendMessageAsync, SendMessageDisallowedIndicator, sendThreadMessageInChannel, setAsyncIds, setAsyncUploads, setFileUploads, setGiphyActive, setImageUploads, setInputBoxRef, setInputRef, setMentionedUsers, setNumberOfUploads, setQuotedMessageState, setSendThreadMessageInChannel, setShowMoreOptions, setText, showMoreOptions, ShowThreadMessageInChannelButton, text, thread, toggleAttachmentPicker, triggerSettings, updateMessage, uploadFile, uploadImage, uploadNewFile, uploadNewImage, UploadProgressIndicator, }: import("../MessageInputContext").LocalMessageInputContext<StreamChatGenerics> & Omit<import("../MessageInputContext").InputMessageInputContextValue<StreamChatGenerics>, "sendMessage"> & Pick<ThreadContextValue<StreamChatGenerics>, "thread">) => MessageInputContextValue<StreamChatGenerics>;
+export declare const useCreateMessageInputContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTextInputProps, appendText, asyncIds, asyncUploads, AttachButton, AudioAttachmentUploadPreview, autoCompleteSuggestionsLimit, clearEditingState, clearQuotedMessageState, closeAttachmentPicker, CommandsButton, compressImageQuality, cooldownEndsAt, CooldownTimer, doDocUploadRequest, doImageUploadRequest, editing, editMessage, FileUploadPreview, fileUploads, giphyActive, hasCommands, hasFilePicker, hasImagePicker, ImageUploadPreview, imageUploads, initialValue, Input, inputBoxRef, InputButtons, InputEditingStateHeader, InputGiphySearch, InputReplyStateHeader, isValidMessage, maxMessageLength, maxNumberOfFiles, mentionAllAppUsersEnabled, mentionAllAppUsersQuery, mentionedUsers, MoreOptionsButton, numberOfLines, numberOfUploads, onChange, onChangeText, onSelectItem, openAttachmentPicker, openCommandsPicker, openFilePicker, openMentionsPicker, pickFile, quotedMessage, removeFile, removeImage, resetInput, selectedPicker, SendButton, sendImageAsync, sending, sendMessage, sendMessageAsync, SendMessageDisallowedIndicator, sendThreadMessageInChannel, setAsyncIds, setAsyncUploads, setFileUploads, setGiphyActive, setImageUploads, setInputBoxRef, setInputRef, setMentionedUsers, setNumberOfUploads, setQuotedMessageState, setSendThreadMessageInChannel, setShowMoreOptions, setText, showMoreOptions, ShowThreadMessageInChannelButton, text, thread, toggleAttachmentPicker, triggerSettings, updateMessage, uploadFile, uploadImage, uploadNewFile, uploadNewImage, UploadProgressIndicator, }: import("../MessageInputContext").LocalMessageInputContext<StreamChatGenerics> & Omit<import("../MessageInputContext").InputMessageInputContextValue<StreamChatGenerics>, "sendMessage"> & Pick<ThreadContextValue<StreamChatGenerics>, "thread">) => MessageInputContextValue<StreamChatGenerics>;

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -17,9 +17,12 @@ export declare const Colors: {
     grey_whisper: string;
     icon_background: string;
     label_bg_transparent: string;
+    light_gray: string;
     modal_shadow: string;
     overlay: string;
     shadow_icon: string;
+    static_black: string;
+    static_white: string;
     targetedMessageBackground: string;
     transparent: string;
     white: string;
@@ -240,6 +243,12 @@ export declare type Theme = {
             editingBoxHeaderTitle: TextStyle;
         };
         fileUploadPreview: {
+            audioAttachmentFileContainer: ViewStyle;
+            audioAttachmentUploadPreview: {
+                progressControlView: ViewStyle;
+                progressDurationText: TextStyle;
+                roundedView: ViewStyle;
+            };
             dismiss: ViewStyle;
             fileContainer: ViewStyle;
             fileContentContainer: ViewStyle;
@@ -525,6 +534,10 @@ export declare type Theme = {
         markdownStyles: MarkdownStyle;
         messageContainer: ViewStyle;
         textContainer: ViewStyle;
+        videoThumbnail: {
+            container: ViewStyle;
+            image: ImageStyle;
+        };
     };
     screenPadding: number;
     spinner: ViewStyle;

package/lib/typescript/native.d.ts

@@ -64,7 +64,6 @@ export declare let takePhoto: TakePhoto;
 declare type HapticFeedbackMethod = 'impactHeavy' | 'impactLight' | 'impactMedium' | 'notificationError' | 'notificationSuccess' | 'notificationWarning' | 'selection';
 declare type TriggerHaptic = (method: HapticFeedbackMethod) => void | never;
 export declare let triggerHaptic: TriggerHaptic;
-export declare let SDK: string;
 export declare type PlaybackStatus = {
     didJustFinish: boolean;
     durationMillis: number;
@@ -75,12 +74,68 @@ export declare type PlaybackStatus = {
     isPlaying: boolean;
     positionMillis: number;
 };
+export declare type AVPlaybackStatusToSet = {
+    isLooping: boolean;
+    isMuted: boolean;
+    positionMillis: number;
+    progressUpdateIntervalMillis: number;
+    rate: number;
+    shouldCorrectPitch: boolean;
+    shouldPlay: boolean;
+    volume: number;
+};
+export declare let SDK: string;
+export declare type SoundOptions = {
+    basePathOrCallback?: string;
+    callback?: () => void;
+    filenameOrFile?: string;
+    initialStatus?: Partial<AVPlaybackStatusToSet>;
+    onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+    source?: {
+        uri: string;
+    };
+};
+export declare type SoundReturnType = {
+    paused: boolean;
+    testID: string;
+    getDuration?: () => number;
+    isPlaying?: () => boolean;
+    onBuffer?: (props: {
+        isBuffering: boolean;
+    }) => void;
+    onEnd?: () => void;
+    onLoad?: (payload: VideoPayloadData) => void;
+    onLoadStart?: () => void;
+    onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+    onProgress?: (data: VideoProgressData) => void;
+    onReadyForDisplay?: () => void;
+    pauseAsync?: () => void;
+    play?: () => void;
+    playAsync?: () => void;
+    replayAsync?: () => void;
+    resizeMode?: string;
+    seek?: (progress: number) => void;
+    setPositionAsync?: (millis: number) => void;
+    soundRef?: React.RefObject<SoundReturnType>;
+    stopAsync?: () => void;
+    style?: StyleProp<ViewStyle>;
+    unloadAsync?: () => void;
+    uri?: string;
+};
+export declare type SoundType = {
+    initializeSound: (source?: {
+        uri: string;
+    }, initialStatus?: Partial<AVPlaybackStatusToSet>, onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void) => SoundReturnType | null;
+    Player: React.ComponentType<SoundReturnType> | null;
+};
+export declare let Sound: SoundType;
 export declare type VideoProgressData = {
     currentTime?: number;
     playableDuration?: number;
     seekableDuration?: number;
 };
 export declare type VideoPayloadData = {
+    duration: number;
     audioTracks?: {
         index: number;
         language: string;
@@ -88,7 +143,6 @@ export declare type VideoPayloadData = {
         type: string;
     }[];
     currentPosition?: number;
-    duration?: number;
     naturalSize?: {
         height: number;
         orientation: 'portrait' | 'landscape';
@@ -110,6 +164,7 @@ export declare type VideoPayloadData = {
 };
 export declare type VideoType = {
     paused: boolean;
+    testID: string;
     uri: string;
     videoRef: React.RefObject<VideoType>;
     onBuffer?: (props: {
@@ -139,10 +194,12 @@ declare type Handlers = {
     saveFile?: SaveFile;
     SDK?: string;
     shareImage?: ShareImage;
+    Sound?: SoundType;
     takePhoto?: TakePhoto;
     triggerHaptic?: TriggerHaptic;
     Video?: React.ComponentType<VideoType>;
 };
 export declare const registerNativeHandlers: (handlers: Handlers) => void;
 export declare const isVideoPackageAvailable: () => boolean;
+export declare const isAudioPackageAvailable: () => true;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.11.1-beta.2",
+  "version": "4.12.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Gallery.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { GalleryImage } from './GallaryImage';
+import { GalleryImage } from './GalleryImage';
 import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 

package/src/components/Attachment/{GallaryImage.tsx → GalleryImage.tsx}

@@ -13,7 +13,7 @@ export const GalleryImage: React.FC<
   return (
     <ImageBackground
       {...rest}
-      accessibilityLabel='gallery-image'
+      accessibilityLabel='Gallery Image'
       source={{
         uri: makeImageCompatibleUrl(uri),
       }}

package/src/components/Attachment/Giphy.tsx

@@ -341,7 +341,7 @@ const GiphyWithContext = <
         ]}
       >
         <Image
-          accessibilityLabel='giphy-attachment-image'
+          accessibilityLabel='Giphy Attachment Image'
           onError={(error) => {
             console.warn(error);
             setLoadingImage(false);

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native';
+import { ImageBackground, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons';
@@ -15,16 +15,25 @@ const styles = StyleSheet.create({
   },
   roundedView: {
     alignItems: 'center',
-    backgroundColor: '#fff',
     borderRadius: 50,
     display: 'flex',
+    elevation: 6,
     height: 36,
     justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      height: 3,
+      width: 0,
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
     width: 36,
   },
 });
 
-export type VideoThumbnailProps = ViewProps & {
+export type VideoThumbnailProps = {
+  imageStyle?: StyleProp<ImageStyle>;
+  style?: StyleProp<ViewStyle>;
   thumb_url?: string;
 };
 
@@ -36,12 +45,12 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       },
     },
   } = useTheme();
-  const { style, thumb_url, ...rest } = props;
+  const { imageStyle, style, thumb_url } = props;
   return (
     <ImageBackground
-      accessibilityLabel='video-thumbnail'
+      accessibilityLabel='Video Thumbnail'
+      imageStyle={imageStyle}
       source={{ uri: thumb_url }}
-      {...rest}
       style={[styles.container, container, style]}
     >
       <View style={[styles.roundedView, roundedView]}>

package/src/components/Attachment/__tests__/Gallery.test.js

@@ -93,7 +93,7 @@ describe('Gallery', () => {
       expect(queryAllByTestId('gallery-row-0').length).toBe(1);
 
       expect(queryAllByTestId('gallery-row-0-item-0').length).toBe(1);
-      expect(getAllByA11yLabel('video-thumbnail').length).toBe(1);
+      expect(getAllByA11yLabel('Video Thumbnail').length).toBe(1);
     });
   });
 
@@ -267,7 +267,7 @@ describe('Gallery', () => {
     const component = await getComponent([image1]);
     const { getByA11yLabel, getByAccessibilityHint } = render(component);
 
-    fireEvent(getByA11yLabel('gallery-image'), 'error');
+    fireEvent(getByA11yLabel('Gallery Image'), 'error');
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
@@ -280,11 +280,11 @@ describe('Gallery', () => {
     const component = await getComponent([image1]);
     const { getByA11yLabel, getByAccessibilityHint } = render(component);
 
-    fireEvent(getByA11yLabel('gallery-image'), 'onLoadStart');
+    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadStart');
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('gallery-image'), 'onLoadFinish');
-    waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
-    expect(getByA11yLabel('gallery-image')).toBeTruthy();
+    fireEvent(getByA11yLabel('Gallery Image'), 'onLoadFinish');
+    waitForElementToBeRemoved(() => getByAccessibilityHint('Image Loading'));
+    expect(getByA11yLabel('Gallery Image')).toBeTruthy();
   });
 });

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -285,7 +285,7 @@ describe('Giphy', () => {
       </OverlayProvider>,
     );
 
-    fireEvent(getByA11yLabel('giphy-attachment-image'), 'error');
+    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'error');
     expect(getByAccessibilityHint('image-loading-error')).toBeTruthy();
   });
 
@@ -302,13 +302,13 @@ describe('Giphy', () => {
 
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadStart');
+    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadStart');
 
     expect(getByAccessibilityHint('image-loading')).toBeTruthy();
 
-    fireEvent(getByA11yLabel('giphy-attachment-image'), 'onLoadFinish');
+    fireEvent(getByA11yLabel('Giphy Attachment Image'), 'onLoadFinish');
 
     waitForElementToBeRemoved(() => getByAccessibilityHint('image-loading'));
-    expect(getByA11yLabel('giphy-attachment-image')).toBeTruthy();
+    expect(getByA11yLabel('Giphy Attachment Image')).toBeTruthy();
   });
 });

package/src/components/Avatar/Avatar.tsx

@@ -85,7 +85,7 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
         ]}
       >
         <Image
-          accessibilityLabel={testID || 'avatar-image'}
+          accessibilityLabel={testID || 'Avatar Image'}
           onError={() => setImageError(true)}
           source={{
             uri:

package/src/components/Avatar/GroupAvatar.tsx

@@ -127,7 +127,7 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
         >
           {column.map(({ height, name, url, width }, rowIndex) => (
             <Image
-              accessibilityLabel={testID || 'avatar-image'}
+              accessibilityLabel={testID || 'Avatar Image'}
               key={`avatar-${url}-${rowIndex}`}
               onError={() => setImageError(true)}
               source={{

package/src/components/Channel/Channel.tsx

@@ -107,6 +107,7 @@ import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
+import { AudioAttachmentUploadPreview as AudioAttachmentUploadPreviewDefault } from '../MessageInput/AudioAttachmentUploadPreview';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
 import { InputGiphySearch as InputGiphyCommandInputDefault } from '../MessageInput/components/InputGiphySearch';
@@ -398,6 +399,7 @@ const ChannelWithContext = <
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
+    AudioAttachmentUploadPreview = AudioAttachmentUploadPreviewDefault,
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
@@ -1618,6 +1620,7 @@ const ChannelWithContext = <
   const inputMessageInputContext = useCreateInputMessageInputContext<StreamChatGenerics>({
     additionalTextInputProps,
     AttachButton,
+    AudioAttachmentUploadPreview,
     autoCompleteSuggestionsLimit,
     autoCompleteTriggerSettings,
     channelId,

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

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

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -69,25 +69,27 @@ const ChannelPreviewWithContext = <
   }, [channelLastMessageString]);
 
   useEffect(() => {
-    const handleEvent = (event: Event<StreamChatGenerics>) => {
-      if (event.message) {
+    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {
+      const message = event.message;
+      if (message && (!message.parent_id || message.show_in_channel)) {
         setLastMessage(event.message);
+        setUnread(channel.countUnread());
       }
+    };
 
-      if (event.type === 'message.new') {
-        setUnread(channel.countUnread());
+    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
+      if (event.message?.id === lastMessage?.id) {
+        setLastMessage(event.message);
       }
     };
 
-    channel.on('message.new', handleEvent);
-    channel.on('message.updated', handleEvent);
-    channel.on('message.deleted', handleEvent);
+    const listeners = [
+      channel.on('message.new', handleNewMessageEvent),
+      channel.on('message.updated', handleUpdatedOrDeletedMessage),
+      channel.on('message.deleted', handleUpdatedOrDeletedMessage),
+    ];
 
-    return () => {
-      channel.off('message.new', handleEvent);
-      channel.off('message.updated', handleEvent);
-      channel.off('message.deleted', handleEvent);
-    };
+    return () => listeners.forEach((l) => l.unsubscribe());
   }, []);
 
   useEffect(() => {

package/src/components/ImageGallery/ImageGallery.tsx

@@ -471,17 +471,21 @@ export const ImageGallery = <
     }
   };
 
-  const handlePlayPause = () => {
-    // React Native Video for RN CLI has seek as an API to move to a particular location in the video
-    if (progress === 1 && videoRef.current && videoRef.current.seek) {
-      videoRef.current.seek(0);
-    }
-    // Expo AV for Expo has replayAsync as an API to move to a starting of the video
-    if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
-      videoRef.current.replayAsync();
-    }
+  const handlePlayPause = (status?: boolean) => {
+    if (status === undefined) {
+      // React Native Video for RN CLI has seek as an API to move to a particular location in the video
+      if (progress === 1 && videoRef.current && videoRef.current.seek) {
+        videoRef.current.seek(0);
+      }
+      // Expo AV for Expo has replayAsync as an API to move to a starting of the video
+      if (progress === 1 && videoRef.current && videoRef.current.replayAsync) {
+        videoRef.current.replayAsync();
+      }
 
-    setPaused((state) => !state);
+      setPaused((state) => !state);
+    } else {
+      setPaused(status);
+    }
   };
 
   const onProgressDrag = (progress: number) => {
@@ -497,7 +501,11 @@ export const ImageGallery = <
   };
 
   return (
-    <Animated.View pointerEvents={'auto'} style={[StyleSheet.absoluteFillObject, showScreenStyle]}>
+    <Animated.View
+      accessibilityLabel='Image Gallery'
+      pointerEvents={'auto'}
+      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+    >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
       <TapGestureHandler
         minPointers={1}
@@ -577,6 +585,7 @@ export const ImageGallery = <
                             />
                           ) : (
                             <AnimatedGalleryImage
+                              accessibilityLabel={'Image Item'}
                               index={i}
                               key={`${photo.uri}-${i}`}
                               offsetScale={offsetScale}
@@ -615,6 +624,7 @@ export const ImageGallery = <
         {...imageGalleryCustomComponents?.header}
       />
       <ImageGalleryFooter<StreamChatGenerics>
+        accessibilityLabel={'Image Gallery Footer'}
         duration={duration}
         onPlayPause={handlePlayPause}
         onProgressDrag={onProgressDrag}