fix: file unsupported types

Author: khushal87

package/src/components/Channel/Channel.tsx

@@ -150,7 +150,6 @@ import { AttachmentUploadProgressIndicator as AttachmentUploadProgressIndicatorD
 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';
@@ -652,7 +651,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     UnreadMessagesNotification = UnreadMessagesNotificationDefault,
     AttachmentUploadProgressIndicator = AttachmentUploadProgressIndicatorDefault,
     UrlPreview = CardDefault,
-    VideoAttachmentUploadPreview = VideoAttachmentUploadPreviewDefault,
+    VideoAttachmentUploadPreview = FileAttachmentUploadPreviewDefault,
     VideoThumbnail = VideoThumbnailDefault,
   } = props;
 

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -8,9 +8,11 @@ import {
   isLocalImageAttachment,
   isLocalVideoAttachment,
   isLocalVoiceRecordingAttachment,
+  isVideoAttachment,
   isVoiceRecordingAttachment,
   LocalAudioAttachment,
   LocalFileAttachment,
+  LocalVideoAttachment,
   LocalVoiceRecordingAttachment,
 } from 'stream-chat';
 
@@ -28,20 +30,25 @@ const FILE_PREVIEW_HEIGHT = 60;
 
 export type FileUploadPreviewPropsWithContext = Pick<
   MessageInputContextValue,
-  'AudioAttachmentUploadPreview' | 'FileAttachmentUploadPreview'
+  'AudioAttachmentUploadPreview' | 'FileAttachmentUploadPreview' | 'VideoAttachmentUploadPreview'
 >;
 
 type FileAttachmentType<CustomLocalMetadata = Record<string, unknown>> =
   | LocalFileAttachment<CustomLocalMetadata>
   | LocalAudioAttachment<CustomLocalMetadata>
-  | LocalVoiceRecordingAttachment<CustomLocalMetadata>;
+  | LocalVoiceRecordingAttachment<CustomLocalMetadata>
+  | LocalVideoAttachment<CustomLocalMetadata>;
 
 /**
  * FileUploadPreview
  * UI Component to preview the files set for upload
  */
 const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) => {
-  const { AudioAttachmentUploadPreview, FileAttachmentUploadPreview } = props;
+  const {
+    AudioAttachmentUploadPreview,
+    FileAttachmentUploadPreview,
+    VideoAttachmentUploadPreview,
+  } = props;
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
   const [audioAttachmentsStateMap, setAudioAttachmentsStateMap] = useState<
@@ -54,8 +61,9 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
     return attachments.filter(
       (attachment) =>
         isLocalFileAttachment(attachment) ||
-        isAudioAttachment(attachment) ||
-        isVoiceRecordingAttachment(attachment),
+        isLocalFileAttachment(attachment) ||
+        isLocalVoiceRecordingAttachment(attachment) ||
+        isLocalVideoAttachment(attachment),
     );
   }, [attachments]);
 
@@ -143,7 +151,7 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
 
   const renderItem = useCallback(
     ({ item }: { item: FileAttachmentType }) => {
-      if (isLocalImageAttachment(item) || isLocalVideoAttachment(item)) {
+      if (isLocalImageAttachment(item)) {
         // This is already handled in the `ImageUploadPreview` component
         return null;
       } else if (isLocalVoiceRecordingAttachment(item)) {
@@ -181,6 +189,15 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
             />
           );
         }
+      } else if (isVideoAttachment(item)) {
+        return (
+          <VideoAttachmentUploadPreview
+            attachment={item}
+            flatListWidth={flatListWidth}
+            handleRetry={attachmentManager.uploadAttachment}
+            removeAttachments={attachmentManager.removeAttachments}
+          />
+        );
       } else if (isLocalFileAttachment(item)) {
         return (
           <FileAttachmentUploadPreview
@@ -195,6 +212,7 @@ const UnMemoizedFileUploadPreview = (props: FileUploadPreviewPropsWithContext) =
     [
       AudioAttachmentUploadPreview,
       FileAttachmentUploadPreview,
+      VideoAttachmentUploadPreview,
       attachmentManager.removeAttachments,
       attachmentManager.uploadAttachment,
       audioAttachmentsStateMap,
@@ -250,12 +268,17 @@ const MemoizedFileUploadPreviewWithContext = React.memo(UnMemoizedFileUploadPrev
  * UI Component to preview the files set for upload
  */
 export const FileUploadPreview = (props: FileUploadPreviewProps) => {
-  const { AudioAttachmentUploadPreview, FileAttachmentUploadPreview } = useMessageInputContext();
+  const {
+    AudioAttachmentUploadPreview,
+    FileAttachmentUploadPreview,
+    VideoAttachmentUploadPreview,
+  } = useMessageInputContext();
   return (
     <MemoizedFileUploadPreviewWithContext
       {...{
         AudioAttachmentUploadPreview,
         FileAttachmentUploadPreview,
+        VideoAttachmentUploadPreview,
       }}
       {...props}
     />

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,12 +1,7 @@
 import React, { useCallback } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 
-import {
-  isLocalImageAttachment,
-  isLocalVideoAttachment,
-  LocalImageAttachment,
-  LocalVideoAttachment,
-} from 'stream-chat';
+import { isLocalImageAttachment, LocalImageAttachment } from 'stream-chat';
 
 import {
   MessageInputContextValue,
@@ -20,25 +15,24 @@ const IMAGE_PREVIEW_SIZE = 100;
 
 export type ImageUploadPreviewPropsWithContext = Pick<
   MessageInputContextValue,
-  'ImageAttachmentUploadPreview' | 'VideoAttachmentUploadPreview'
+  'ImageAttachmentUploadPreview'
 >;
 
 export type ImageAttachmentPreview<CustomLocalMetadata = Record<string, unknown>> =
-  | LocalImageAttachment<CustomLocalMetadata>
-  | LocalVideoAttachment<CustomLocalMetadata>;
+  LocalImageAttachment<CustomLocalMetadata>;
 
 type ImageUploadPreviewItem = { index: number; item: ImageAttachmentPreview };
 
 /**
  * UI Component to preview the images set for upload
  */
 const UnmemoizedImageUploadPreview = (props: ImageUploadPreviewPropsWithContext) => {
-  const { ImageAttachmentUploadPreview, VideoAttachmentUploadPreview } = props;
+  const { ImageAttachmentUploadPreview } = props;
   const { attachmentManager } = useMessageComposer();
   const { attachments } = useAttachmentManagerState();
 
-  const imageOrVideoUploads = attachments.filter(
-    (attachment) => isLocalImageAttachment(attachment) || isLocalVideoAttachment(attachment),
+  const imageOrVideoUploads = attachments.filter((attachment) =>
+    isLocalImageAttachment(attachment),
   );
 
   const {
@@ -51,27 +45,16 @@ const UnmemoizedImageUploadPreview = (props: ImageUploadPreviewPropsWithContext)
 
   const renderItem = useCallback(
     ({ item }: ImageUploadPreviewItem) => {
-      if (isLocalImageAttachment(item)) {
-        return (
-          <ImageAttachmentUploadPreview
-            attachment={item}
-            handleRetry={attachmentManager.uploadAttachment}
-            removeAttachments={attachmentManager.removeAttachments}
-          />
-        );
-      } else {
-        return (
-          <VideoAttachmentUploadPreview
-            attachment={item}
-            handleRetry={attachmentManager.uploadAttachment}
-            removeAttachments={attachmentManager.removeAttachments}
-          />
-        );
-      }
+      return (
+        <ImageAttachmentUploadPreview
+          attachment={item}
+          handleRetry={attachmentManager.uploadAttachment}
+          removeAttachments={attachmentManager.removeAttachments}
+        />
+      );
     },
     [
       ImageAttachmentUploadPreview,
-      VideoAttachmentUploadPreview,
       attachmentManager.removeAttachments,
       attachmentManager.uploadAttachment,
     ],
@@ -105,13 +88,8 @@ 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 { ImageAttachmentUploadPreview } = useMessageInputContext();
+  return <MemoizedImageUploadPreviewWithContext {...{ ImageAttachmentUploadPreview }} {...props} />;
 };
 
 const styles = StyleSheet.create({

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUnsupportedIndicator.tsx

@@ -11,16 +11,19 @@ const WARNING_ICON_SIZE = 16;
 export type AttachmentUnsupportedIndicatorProps = {
   /** Type of active indicator */
   indicatorType?: Progress;
+  /** Boolean to determine whether the attachment is an image */
+  isImage?: boolean;
 };
 
 export const AttachmentUnsupportedIndicator = ({
   indicatorType,
+  isImage = false,
 }: AttachmentUnsupportedIndicatorProps) => {
   const {
     theme: {
-      colors: { accent_red, overlay, white },
+      colors: { accent_red, grey_dark, overlay, white },
       messageInput: {
-        attachmentUnsupportedIndicator: { container, text, warningIcon, wrapper },
+        attachmentUnsupportedIndicator: { container, text, warningIcon },
       },
     },
   } = useTheme();
@@ -32,34 +35,37 @@ export const AttachmentUnsupportedIndicator = ({
   }
 
   return (
-    <View style={[styles.unsupportedImageWrapper, { backgroundColor: overlay }, wrapper]}>
-      <View style={[styles.iconContainer, container]}>
-        <Warning
-          height={WARNING_ICON_SIZE}
-          pathFill={accent_red}
-          style={styles.warningIconStyle}
-          width={WARNING_ICON_SIZE}
-          {...warningIcon}
-        />
-        <Text style={[styles.warningText, { color: white }, text]}>
-          {t<string>('Not supported')}
-        </Text>
-      </View>
+    <View
+      style={[
+        styles.container,
+        isImage ? [styles.imageStyle, { backgroundColor: overlay }] : null,
+        container,
+      ]}
+    >
+      <Warning
+        height={WARNING_ICON_SIZE}
+        pathFill={accent_red}
+        style={styles.warningIconStyle}
+        width={WARNING_ICON_SIZE}
+        {...warningIcon}
+      />
+      <Text style={[styles.warningText, { color: isImage ? white : grey_dark }, text]}>
+        {t<string>('Not supported')}
+      </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  iconContainer: {
+  container: {
     alignItems: 'center',
     flexDirection: 'row',
-    justifyContent: 'center',
+    marginTop: 4,
+    paddingHorizontal: 4,
   },
-  unsupportedImageWrapper: {
-    borderRadius: 20,
+  imageStyle: {
+    borderRadius: 16,
     bottom: 8,
-    flexDirection: 'row',
-    marginHorizontal: 3,
     position: 'absolute',
   },
   warningIconStyle: {

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -60,7 +60,7 @@ export const ImageAttachmentUploadPreview = ({
       </AttachmentUploadProgressIndicator>
       <DismissAttachmentUpload onPress={onDismissHandler} />
       {indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
-        <AttachmentUnsupportedIndicator indicatorType={indicatorType} />
+        <AttachmentUnsupportedIndicator indicatorType={indicatorType} isImage={true} />
       ) : null}
     </View>
   );