fix: refine types

Author: khushal87

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

@@ -1,6 +1,8 @@
 import { Platform } from 'react-native';
 import mime from 'mime';
 
+import type { File } from 'stream-chat-react-native-core';
+
 let MediaLibrary;
 
 try {
@@ -14,12 +16,11 @@ if (!MediaLibrary) {
     'expo-media-library is not installed. Please install it or you can choose to install expo-image-picker for native image picker.',
   );
 }
-import type { RNFile } from 'stream-chat';
 
 import { getLocalAssetUri } from './getLocalAssetUri';
 
 type ReturnType = {
-  assets: RNFile[];
+  assets: File[];
   endCursor: string | undefined;
   hasNextPage: boolean;
   iOSLimited: boolean;

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

@@ -1,6 +1,7 @@
 import { PermissionsAndroid, Platform } from 'react-native';
 import mime from 'mime';
-import { RNFile } from 'stream-chat';
+
+import type { File } from 'stream-chat-react-native-core';
 
 let CameraRollDependency;
 
@@ -16,7 +17,7 @@ try {
 import { getLocalAssetUri } from './getLocalAssetUri';
 
 type ReturnType = {
-  assets: RNFile[];
+  assets: File[];
   endCursor: string | undefined;
   hasNextPage: boolean;
   iOSLimited: boolean;

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -7,8 +7,6 @@ import type { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
-import { RNFile } from 'stream-chat';
-
 import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
 
 import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
@@ -20,6 +18,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { NativeHandlers } from '../../native';
+import type { File } from '../../types/types';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { BottomSheetFlatList } from '../BottomSheetCompatibility/BottomSheetFlatList';
 
@@ -109,7 +108,7 @@ export const AttachmentPicker = React.forwardRef(
     const [iOSLimited, setIosLimited] = useState(false);
     const hasNextPageRef = useRef(true);
     const [loadingPhotos, setLoadingPhotos] = useState(false);
-    const [photos, setPhotos] = useState<RNFile[]>([]);
+    const [photos, setPhotos] = useState<File[]>([]);
     const attemptedToLoadPhotosOnOpenRef = useRef(false);
 
     const getMorePhotos = useCallback(async () => {

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

@@ -2,20 +2,19 @@ import React from 'react';
 
 import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
-import { RNFile } from 'stream-chat';
-
 import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
+import type { File } from '../../../types/types';
 import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { BottomSheetTouchableOpacity } from '../../BottomSheetCompatibility/BottomSheetTouchableOpacity';
 type AttachmentPickerItemType = Pick<
   AttachmentPickerContextValue,
   'selectedFiles' | 'setSelectedFiles' | 'setSelectedImages' | 'selectedImages' | 'maxNumberOfFiles'
 > & {
-  asset: RNFile;
+  asset: File;
   ImageOverlaySelectedComponent: React.ComponentType;
   numberOfUploads: number;
   selected: boolean;
@@ -48,7 +47,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
 
   const { duration: videoDuration, thumb_url, uri } = asset;
 
-  const durationLabel = getDurationLabelFromDuration(videoDuration);
+  const durationLabel = videoDuration ? getDurationLabelFromDuration(videoDuration) : '00:00';
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -2,8 +2,6 @@ import { useEffect, useRef, useState } from 'react';
 
 import { Alert, Platform } from 'react-native';
 
-import { RNFile } from 'stream-chat';
-
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import {
   AudioRecordingReturnType,
@@ -12,6 +10,7 @@ import {
   RecordingStatus,
   SoundReturnType,
 } from '../../../native';
+import type { File } from '../../../types/types';
 import { FileTypes } from '../../../types/types';
 import { resampleWaveformData } from '../utils/audioSampling';
 import { normalizeAudioLevel } from '../utils/normalizeAudioLevel';
@@ -267,7 +266,7 @@ export const useAudioController = () => {
     const clearFilter = new RegExp('[.:]', 'g');
     const date = new Date().toISOString().replace(clearFilter, '_');
 
-    const file: RNFile = {
+    const file: File = {
       duration: durationInSeconds,
       name: `audio_recording_${date}.aac`,
       size: 0,

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useContext, useEffect, useState } from 'react
 
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 
-import { RNFile } from 'stream-chat';
+import type { File } from '../../types/types';
 
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -82,12 +82,12 @@ export type AttachmentPickerContextValue = {
    */
   maxNumberOfFiles: number;
   openPicker: () => void;
-  selectedFiles: RNFile[];
-  selectedImages: RNFile[];
+  selectedFiles: File[];
+  selectedImages: File[];
   setBottomInset: React.Dispatch<React.SetStateAction<number>>;
   setMaxNumberOfFiles: React.Dispatch<React.SetStateAction<number>>;
-  setSelectedFiles: React.Dispatch<React.SetStateAction<RNFile[]>>;
-  setSelectedImages: React.Dispatch<React.SetStateAction<RNFile[]>>;
+  setSelectedFiles: React.Dispatch<React.SetStateAction<File[]>>;
+  setSelectedImages: React.Dispatch<React.SetStateAction<File[]>>;
   setSelectedPicker: React.Dispatch<React.SetStateAction<'images' | undefined>>;
   setTopInset: React.Dispatch<React.SetStateAction<number>>;
   topInset: number;
@@ -125,8 +125,8 @@ export const AttachmentPickerProvider = ({
 
   const [bottomInset, setBottomInset] = useState<number>(bottomInsetValue ?? 0);
   const [maxNumberOfFiles, setMaxNumberOfFiles] = useState(10);
-  const [selectedImages, setSelectedImages] = useState<RNFile[]>([]);
-  const [selectedFiles, setSelectedFiles] = useState<RNFile[]>([]);
+  const [selectedImages, setSelectedImages] = useState<File[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [selectedPicker, setSelectedPicker] = useState<'images'>();
   const [topInset, setTopInset] = useState<number>(topInsetValue ?? 0);
 

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -14,7 +14,6 @@ import {
   Attachment,
   logChatPromiseExecution,
   Message,
-  RNFile,
   SendFileAPIResponse,
   StreamChat,
   Message as StreamMessage,
@@ -60,7 +59,7 @@ import {
   MediaTypes,
   NativeHandlers,
 } from '../../native';
-import { FileTypes, FileUpload } from '../../types/types';
+import { File, FileTypes, FileUpload } from '../../types/types';
 import {
   ACITriggerSettings,
   ACITriggerSettingsParams,
@@ -231,8 +230,8 @@ export type LocalMessageInputContext = {
   uploadFile: ({ newFile }: { newFile: FileUpload }) => Promise<void>;
   /** Function for attempting to upload an image */
   uploadImage: ({ newImage }: { newImage: FileUpload }) => Promise<void>;
-  uploadNewFile: (file: RNFile, fileType?: FileTypes) => Promise<void>;
-  uploadNewImage: (image: RNFile) => Promise<void>;
+  uploadNewFile: (file: File, fileType?: FileTypes) => Promise<void>;
+  uploadNewImage: (image: File) => Promise<void>;
 };
 
 export type InputMessageInputContextValue = {
@@ -416,7 +415,7 @@ export type InputMessageInputContextValue = {
    * @overrideType Function
    */
   doDocUploadRequest?: (
-    file: RNFile,
+    file: File,
     channel: ChannelContextValue['channel'],
   ) => Promise<SendFileAPIResponse>;
 
@@ -429,7 +428,7 @@ export type InputMessageInputContextValue = {
    * @overrideType Function
    */
   doImageUploadRequest?: (
-    file: RNFile,
+    file: File,
     channel: ChannelContextValue['channel'],
   ) => Promise<SendFileAPIResponse>;
 
@@ -1320,7 +1319,7 @@ export const MessageInputProvider = ({
    * This is useful for voice recordings, where the file type is not always detected correctly.
    * This will change if we unify the file uploads to attachments.
    */
-  const uploadNewFile = async (file: RNFile, fileType?: FileTypes) => {
+  const uploadNewFile = async (file: File, fileType?: FileTypes) => {
     try {
       const id: string = generateRandomId();
       const fileConfig = getFileUploadConfig();
@@ -1368,7 +1367,7 @@ export const MessageInputProvider = ({
     }
   };
 
-  const uploadNewImage = async (image: RNFile) => {
+  const uploadNewImage = async (image: File) => {
     try {
       const id = generateRandomId();
       const imageUploadConfig = getImageUploadConfig();

package/src/contexts/messageInputContext/utils/utils.ts

@@ -1,11 +1,13 @@
 import { lookup } from 'mime-types';
-import type { FileUploadConfig, RNFile } from 'stream-chat';
+import type { FileUploadConfig } from 'stream-chat';
+
+import { File } from '../../../types/types';
 
 export const MAX_FILE_SIZE_TO_UPLOAD = 100 * 1024 * 1024; // 100 MB
 
 type CheckUploadPermissionsParams = {
   config: FileUploadConfig;
-  file: RNFile;
+  file: File;
 };
 
 /**

package/src/native.ts

@@ -1,8 +1,7 @@
 import type React from 'react';
 import { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';
 
-import { RNFile } from 'stream-chat';
-
+import type { File } from './types/types';
 const fail = () => {
   throw Error(
     'Native handler was not registered, you should import stream-chat-expo or stream-chat-react-native',
@@ -31,7 +30,7 @@ type iOS14RefreshGallerySelection = () => Promise<void>;
 
 type GetPhotos = ({ after, first }: { first: number; after?: string }) =>
   | Promise<{
-      assets: RNFile[];
+      assets: File[];
       endCursor: string;
       hasNextPage: boolean;
       iOSLimited: boolean;
@@ -41,13 +40,13 @@ type GetPhotos = ({ after, first }: { first: number; after?: string }) =>
 type PickDocument = ({ maxNumberOfFiles }: { maxNumberOfFiles?: number }) =>
   | Promise<{
       cancelled: boolean;
-      assets?: RNFile[];
+      assets?: File[];
     }>
   | never;
 
 type PickImageAssetType = {
   askToOpenSettings?: boolean;
-  assets?: RNFile[];
+  assets?: File[];
   cancelled?: boolean;
 };
 
@@ -67,7 +66,7 @@ type ShareOptions = {
 };
 type ShareImage = (options: ShareOptions) => Promise<boolean> | never;
 
-type TakePhotoFileType = RNFile & {
+type TakePhotoFileType = File & {
   askToOpenSettings?: boolean;
   cancelled?: boolean;
 };

package/src/types/types.ts

@@ -12,12 +12,14 @@ export enum FileTypes {
   VoiceRecording = 'voiceRecording',
 }
 
+export type File = RNFile;
+
 /**
  * This is nothing but a substitute for the attachment type prior to sending the message.
  * This will change if we unify the file uploads to attachments.
  */
 export type FileUpload = {
-  file: RNFile;
+  file: File;
   id: string;
   state: FileStateValue;
 
@@ -44,8 +46,8 @@ export interface DefaultAttachmentType {
   duration?: number;
   file_size?: number;
   mime_type?: string;
-  originalFile?: RNFile;
-  originalImage?: RNFile;
+  originalFile?: File;
+  originalImage?: File;
   waveform_data?: number[];
 }