fix: improve upload preview components

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -147,6 +147,10 @@ import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { AttachmentUploadProgressIndicator as AttachmentUploadProgressIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
+import { AudioAttachmentUploadPreview as AudioAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview';
+import { FileAttachmentUploadPreview as FileAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/FileAttachmentUploadPreview';
+import { ImageAttachmentUploadPreview as ImageAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview';
+import { VideoAttachmentUploadPreview as VideoAttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview';
 import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
 import { AudioRecordingButton as AudioRecordingButtonDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingButton';
 import { AudioRecordingInProgress as AudioRecordingInProgressDefault } from '../MessageInput/components/AudioRecorder/AudioRecordingInProgress';
@@ -474,7 +478,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     Attachment = AttachmentDefault,
     AttachmentActions = AttachmentActionsDefault,
     AudioAttachment = AudioAttachmentDefault,
-    AudioAttachmentUploadPreview = AudioAttachmentDefault,
+    AudioAttachmentUploadPreview = AudioAttachmentUploadPreviewDefault,
     AudioRecorder = AudioRecorderDefault,
     audioRecordingEnabled = false,
     AudioRecordingInProgress = AudioRecordingInProgressDefault,
@@ -484,6 +488,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     AutoCompleteSuggestionHeader = AutoCompleteSuggestionHeaderDefault,
     AutoCompleteSuggestionItem = AutoCompleteSuggestionItemDefault,
     AutoCompleteSuggestionList = AutoCompleteSuggestionListDefault,
+
     autoCompleteSuggestionsLimit,
     Card = CardDefault,
     CardCover,
@@ -511,6 +516,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     enableSwipeToReply = true,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
+    FileAttachmentUploadPreview = FileAttachmentUploadPreviewDefault,
     FileAttachmentGroup = FileAttachmentGroupDefault,
     FileAttachmentIcon = FileIconDefault,
     FileUploadPreview = FileUploadPreviewDefault,
@@ -542,6 +548,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     hasImagePicker = isImagePickerAvailable() || isImageMediaLibraryAvailable(),
     hideDateSeparators = false,
     hideStickyDateHeader = false,
+    ImageAttachmentUploadPreview = ImageAttachmentUploadPreviewDefault,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
     ImageLoadingIndicator = ImageLoadingIndicatorDefault,
     ImageReloadIndicator = ImageReloadIndicatorDefault,
@@ -649,6 +656,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     UnreadMessagesNotification = UnreadMessagesNotificationDefault,
     UploadProgressIndicator = AttachmentUploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
+    VideoAttachmentUploadPreview = VideoAttachmentUploadPreviewDefault,
     VideoThumbnail = VideoThumbnailDefault,
   } = props;
 
@@ -1701,12 +1709,14 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     doFileUploadRequest,
     editing,
     editMessage,
+    FileAttachmentUploadPreview,
     FileUploadPreview,
     handleAttachButtonPress,
     hasCameraPicker,
     hasCommands: hasCommands ?? (getChannelConfigSafely()?.commands ?? []).length > 0,
     hasFilePicker,
     hasImagePicker,
+    ImageAttachmentUploadPreview,
     ImageUploadPreview,
     initialValue,
     Input,
@@ -1727,6 +1737,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     StartAudioRecordingButton,
     StopMessageStreamingButton,
     UploadProgressIndicator,
+    VideoAttachmentUploadPreview,
   });
 
   const messageListContext = useCreatePaginatedMessageListContext({

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

@@ -30,12 +30,14 @@ export const useCreateInputMessageInputContext = ({
   doFileUploadRequest,
   editing,
   editMessage,
+  FileAttachmentUploadPreview,
   FileUploadPreview,
   handleAttachButtonPress,
   hasCameraPicker,
   hasCommands,
   hasFilePicker,
   hasImagePicker,
+  ImageAttachmentUploadPreview,
   ImageUploadPreview,
   initialValue,
   Input,
@@ -57,6 +59,7 @@ export const useCreateInputMessageInputContext = ({
   StartAudioRecordingButton,
   StopMessageStreamingButton,
   UploadProgressIndicator,
+  VideoAttachmentUploadPreview,
 }: InputMessageInputContextValue & {
   /**
    * To ensure we allow re-render, when channel is changed
@@ -93,12 +96,14 @@ export const useCreateInputMessageInputContext = ({
       doFileUploadRequest,
       editing,
       editMessage,
+      FileAttachmentUploadPreview,
       FileUploadPreview,
       handleAttachButtonPress,
       hasCameraPicker,
       hasCommands,
       hasFilePicker,
       hasImagePicker,
+      ImageAttachmentUploadPreview,
       ImageUploadPreview,
       initialValue,
       Input,
@@ -120,6 +125,7 @@ export const useCreateInputMessageInputContext = ({
       StartAudioRecordingButton,
       StopMessageStreamingButton,
       UploadProgressIndicator,
+      VideoAttachmentUploadPreview,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -11,40 +11,37 @@ import {
   isVoiceRecordingAttachment,
   LocalAudioAttachment,
   LocalFileAttachment,
-  LocalVideoAttachment,
   LocalVoiceRecordingAttachment,
 } from 'stream-chat';
 
-import { AudioAttachmentUploadPreview } from './components/AttachmentPreview/AudioAttachmentUploadPreview';
-import { FileAttachmentUploadPreview } from './components/AttachmentPreview/FileAttachmentUploadPreview';
-
-import { ChatContextValue, useMessageComposer } from '../../contexts';
+import { useMessageComposer } from '../../contexts';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
-import { MessageInputContextValue } from '../../contexts/messageInputContext/MessageInputContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { isSoundPackageAvailable } from '../../native';
 import { AudioConfig } from '../../types/types';
 
 const FILE_PREVIEW_HEIGHT = 60;
 
-export type FileUploadPreviewProps = Partial<
-  Pick<MessageInputContextValue, 'AudioAttachmentUploadPreview'>
-> &
-  Partial<Pick<MessagesContextValue, 'FileAttachmentIcon'>> &
-  Partial<Pick<ChatContextValue, 'enableOfflineSupport'>>;
+export type FileUploadPreviewPropsWithContext = Pick<
+  MessageInputContextValue,
+  'AudioAttachmentUploadPreview' | 'FileAttachmentUploadPreview'
+>;
 
 type FileAttachmentType<CustomLocalMetadata = Record<string, unknown>> =
   | LocalFileAttachment<CustomLocalMetadata>
-  | LocalVideoAttachment<CustomLocalMetadata>
   | LocalAudioAttachment<CustomLocalMetadata>
   | LocalVoiceRecordingAttachment<CustomLocalMetadata>;
 
 /**
  * FileUploadPreview
  * UI Component to preview the files set for upload
  */
-export const FileUploadPreview = () => {
+const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) => {
+  const { AudioAttachmentUploadPreview, FileAttachmentUploadPreview } = props;
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const [audioAttachmentsStateMap, setAudioAttachmentsStateMap] = useState<
@@ -57,7 +54,6 @@ export const FileUploadPreview = () => {
     return attachments.filter(
       (attachment) =>
         isLocalFileAttachment(attachment) ||
-        isLocalVideoAttachment(attachment) ||
         isAudioAttachment(attachment) ||
         isVoiceRecordingAttachment(attachment),
     );
@@ -147,7 +143,7 @@ export const FileUploadPreview = () => {
 
   const renderItem = useCallback(
     ({ item }: { item: FileAttachmentType }) => {
-      if (isLocalImageAttachment(item)) {
+      if (isLocalImageAttachment(item) || isLocalVideoAttachment(item)) {
         // This is already handled in the `ImageUploadPreview` component
         return null;
       } else if (isLocalVoiceRecordingAttachment(item)) {
@@ -185,15 +181,6 @@ export const FileUploadPreview = () => {
             />
           );
         }
-      } else if (isLocalVideoAttachment(item)) {
-        return (
-          <FileAttachmentUploadPreview
-            attachment={item}
-            flatListWidth={flatListWidth}
-            handleRetry={attachmentManager.uploadAttachment}
-            removeAttachments={attachmentManager.removeAttachments}
-          />
-        );
       } else if (isLocalFileAttachment(item)) {
         return (
           <FileAttachmentUploadPreview
@@ -206,6 +193,8 @@ export const FileUploadPreview = () => {
       } else return null;
     },
     [
+      AudioAttachmentUploadPreview,
+      FileAttachmentUploadPreview,
       attachmentManager.removeAttachments,
       attachmentManager.uploadAttachment,
       audioAttachmentsStateMap,
@@ -252,6 +241,27 @@ export const FileUploadPreview = () => {
   );
 };
 
+export type FileUploadPreviewProps = Partial<FileUploadPreviewPropsWithContext>;
+
+const MemoizedFileUploadPreviewWithContext = React.memo(UnMemoizedFileUploadPreview);
+
+/**
+ * FileUploadPreview
+ * UI Component to preview the files set for upload
+ */
+export const FileUploadPreview = (props: FileUploadPreviewProps) => {
+  const { AudioAttachmentUploadPreview, FileAttachmentUploadPreview } = useMessageInputContext();
+  return (
+    <MemoizedFileUploadPreviewWithContext
+      {...{
+        AudioAttachmentUploadPreview,
+        FileAttachmentUploadPreview,
+      }}
+      {...props}
+    />
+  );
+};
+
 const styles = StyleSheet.create({
   flatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
 });

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,31 +1,45 @@
 import React, { useCallback } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 
-import { isLocalImageAttachment, LocalImageAttachment } from 'stream-chat';
+import {
+  isLocalImageAttachment,
+  isLocalVideoAttachment,
+  LocalImageAttachment,
+  LocalVideoAttachment,
+} from 'stream-chat';
 
-import { ImageAttachmentUploadPreview } from './components/AttachmentPreview/ImageAttachmentUploadPreview';
-
-import { ChatContextValue, useMessageComposer } from '../../contexts';
+import {
+  MessageInputContextValue,
+  useMessageComposer,
+  useMessageInputContext,
+} from '../../contexts';
 import { useAttachmentManagerState } from '../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 const IMAGE_PREVIEW_SIZE = 100;
 
-export type ImageUploadPreviewProps = Partial<Pick<ChatContextValue, 'enableOfflineSupport'>>;
+export type ImageUploadPreviewPropsWithContext = Pick<
+  MessageInputContextValue,
+  'ImageAttachmentUploadPreview' | 'VideoAttachmentUploadPreview'
+>;
 
 export type ImageAttachmentPreview<CustomLocalMetadata = Record<string, unknown>> =
-  LocalImageAttachment<CustomLocalMetadata>;
+  | LocalImageAttachment<CustomLocalMetadata>
+  | LocalVideoAttachment<CustomLocalMetadata>;
 
 type ImageUploadPreviewItem = { index: number; item: ImageAttachmentPreview };
 
 /**
  * UI Component to preview the images set for upload
  */
-export const ImageUploadPreview = () => {
+const UnmemoizedImageUploadPreview = (props: ImageUploadPreviewPropsWithContext) => {
+  const { ImageAttachmentUploadPreview, VideoAttachmentUploadPreview } = props;
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
 
-  const imageUploads = attachments.filter((attachment) => isLocalImageAttachment(attachment));
+  const imageOrVideoUploads = attachments.filter(
+    (attachment) => isLocalImageAttachment(attachment) || isLocalVideoAttachment(attachment),
+  );
 
   const {
     theme: {
@@ -37,24 +51,39 @@ export const ImageUploadPreview = () => {
 
   const renderItem = useCallback(
     ({ item }: ImageUploadPreviewItem) => {
-      return (
-        <ImageAttachmentUploadPreview
-          attachment={item}
-          handleRetry={attachmentManager.uploadAttachment}
-          removeAttachments={attachmentManager.removeAttachments}
-        />
-      );
+      if (isLocalImageAttachment(item)) {
+        return (
+          <ImageAttachmentUploadPreview
+            attachment={item}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={attachmentManager.removeAttachments}
+          />
+        );
+      } else {
+        return (
+          <VideoAttachmentUploadPreview
+            attachment={item}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={attachmentManager.removeAttachments}
+          />
+        );
+      }
     },
-    [attachmentManager],
+    [
+      ImageAttachmentUploadPreview,
+      VideoAttachmentUploadPreview,
+      attachmentManager.removeAttachments,
+      attachmentManager.uploadAttachment,
+    ],
   );
 
-  if (!imageUploads.length) {
+  if (!imageOrVideoUploads.length) {
     return null;
   }
 
   return (
     <FlatList
-      data={imageUploads}
+      data={imageOrVideoUploads}
       getItemLayout={(_, index) => ({
         index,
         length: IMAGE_PREVIEW_SIZE + 8,
@@ -68,6 +97,23 @@ export const ImageUploadPreview = () => {
   );
 };
 
+const MemoizedImageUploadPreviewWithContext = React.memo(UnmemoizedImageUploadPreview);
+
+export type ImageUploadPreviewProps = Partial<ImageUploadPreviewPropsWithContext>;
+
+/**
+ * UI Component to preview the images set for upload
+ */
+export const ImageUploadPreview = (props: ImageUploadPreviewProps) => {
+  const { ImageAttachmentUploadPreview, VideoAttachmentUploadPreview } = useMessageInputContext();
+  return (
+    <MemoizedImageUploadPreviewWithContext
+      {...{ ImageAttachmentUploadPreview, VideoAttachmentUploadPreview }}
+      {...props}
+    />
+  );
+};
+
 const styles = StyleSheet.create({
   fileSizeText: {
     fontSize: 12,