chore: resolve conflicts from develop

package/expo-package/src/handlers/getPhotos.ts

@@ -32,9 +32,9 @@ export const getPhotos = async ({
     });
     const assets = results.assets.map((asset) => ({
       duration: asset.duration,
-      filename: asset.filename,
       height: asset.height,
       id: asset.id,
+      name: asset.filename,
       source: 'picker' as const,
       type: asset.mediaType,
       uri: asset.uri,

package/native-package/src/handlers/getPhotos.ts

@@ -78,8 +78,8 @@ export const getPhotos = async ({
       ...edge.node.image,
       duration: edge.node.image.playableDuration,
       // since we include filename, fileSize in the query, we can safely assume it will be defined
-      filename: edge.node.image.filename as string,
-      fileSize: edge.node.image.fileSize as number,
+      name: edge.node.image.filename as string,
+      size: edge.node.image.fileSize as number,
       source: 'picker' as const,
       type: edge.node.type,
     }));

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -71,15 +71,15 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     const localAssetURI = Platform.OS === 'ios' && asset.id && (await getLocalAssetUri(asset.id));
     const uri = localAssetURI || asset.uri || '';
     // We need a mime-type to upload a video file.
-    const mimeType = lookup(asset.filename) || 'multipart/form-data';
+    const mimeType = lookup(asset.name) || 'multipart/form-data';
     return [
       ...files,
       {
-        duration: durationLabel,
+        duration: asset.duration,
         id: asset.id,
         mimeType,
-        name: asset.filename,
-        size: asset.fileSize,
+        name: asset.name,
+        size: asset.size,
         uri,
       },
     ];

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import dayjs from 'dayjs';
+
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
@@ -101,6 +103,19 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     },
   } = useTheme();
 
+  const ONE_HOUR_IN_SECONDS = 3600;
+  let durationLabel = '00:00';
+  const videoDuration = item.file.duration;
+
+  if (videoDuration) {
+    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
+    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+    const formattedVideoDuration = dayjs
+      .duration(videoDuration, 'second')
+      .format(formattedDurationParam);
+    durationLabel = formattedVideoDuration;
+  }
+
   const { t } = useTranslationContext();
 
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
@@ -117,7 +132,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

package/src/components/MessageInput/MessageInput.tsx

@@ -288,7 +288,7 @@ const MessageInputWithContext = <
     // Check if the file size of the image exceeds the threshold of 100MB
     if (
       imageToUpload &&
-      Number(imageToUpload.fileSize) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
+      Number(imageToUpload.size) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
     ) {
       Alert.alert(
         t(

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -39,12 +39,12 @@ describe('MessageInput', () => {
       selectedImages: [
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 500000000,
+          size: 500000000,
           uri: 'https://picsum.photos/200/300',
         }),
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 600000000,
+          size: 600000000,
           uri: 'https://picsum.photos/200/300',
         }),
       ],

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -642,8 +642,8 @@ export const MessageInputProvider = <
   };
 
   const mapImageUploadToAttachment = (image: ImageUpload): Attachment<StreamChatGenerics> => {
-    const mime_type: string | boolean = lookup(image.file.filename as string);
-    const name = image.file.name ?? (image.file.filename as string);
+    const mime_type: string | boolean = lookup(image.file.name as string);
+    const name = image.file.name as string;
     return {
       fallback: name,
       image_url: image.url,
@@ -652,7 +652,7 @@ export const MessageInputProvider = <
       original_width: image.width,
       originalFile: {
         ...image.file,
-        duration: image.file.duration ? `${image.file.duration}` : undefined,
+        duration: image.file.duration,
         name,
       },
       type: 'image',
@@ -1006,7 +1006,7 @@ export const MessageInputProvider = <
     let response = {} as SendFileAPIResponse;
 
     const uri = file.uri || '';
-    const filename = file.filename ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
+    const filename = file.name ?? uri.replace(/^(file:\/\/|content:\/\/)/, '');
 
     try {
       /**
@@ -1027,7 +1027,6 @@ export const MessageInputProvider = <
             uri,
             width: file.width,
           }));
-
       const contentType = lookup(filename) || 'multipart/form-data';
       if (value.doImageUploadRequest) {
         response = await value.doImageUploadRequest(file, channel);

package/src/types/types.ts

@@ -1,33 +1,29 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 
 export type Asset = {
-  duration: number | null;
-  filename: string;
+  duration: number;
   height: number;
+  name: string;
   source: 'camera' | 'picker';
   type: string;
   uri: string;
   width: number;
-  fileSize?: number;
   id?: string;
-  size?: number | string;
+  size?: number;
 };
 
-export type FileAssetType = {
+export type File = {
   name: string;
+  duration?: number;
+  id?: string;
   mimeType?: string;
-  size?: number | string;
+  size?: number;
   // The uri should be of type `string`. But is `string|undefined` because the same type is used for the response from Stream's Attachment. This shall be fixed.
   uri?: string;
 };
 
-export type File = FileAssetType & {
-  duration?: string | null;
-  id?: string;
-};
-
 export type DefaultAttachmentType = UnknownType & {
-  file_size?: number | string;
+  file_size?: number;
   mime_type?: string;
   originalFile?: File;
 };