fix: incorrect typing of getPhotos between expo and native (#2146)

* fix: align types of getPhotos between expo and native

* chore: align types

* chore: remove playableDuration

* Update package/src/types/types.ts

Co-authored-by: Khushal Agarwal <[email protected]>

* chore: fix the ascending order

---------

Co-authored-by: Khushal Agarwal <[email protected]>

Author: santhoshvai

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

@@ -1,6 +1,16 @@
 import * as MediaLibrary from 'expo-media-library';
+import type { Asset } from 'stream-chat-react-native-core';
 
-export const getPhotos = async ({ after, first }: MediaLibrary.AssetsOptions) => {
+type ReturnType = {
+  assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+  endCursor: string | undefined;
+  hasNextPage: boolean;
+};
+
+export const getPhotos = async ({
+  after,
+  first,
+}: MediaLibrary.AssetsOptions): Promise<ReturnType> => {
   try {
     const { status } = await MediaLibrary.requestPermissionsAsync();
     if (status !== 'granted') {
@@ -17,7 +27,7 @@ export const getPhotos = async ({ after, first }: MediaLibrary.AssetsOptions) =>
       filename: asset.filename,
       height: asset.height,
       id: asset.id,
-      source: 'picker',
+      source: 'picker' as const,
       type: asset.mediaType,
       uri: asset.uri,
       width: asset.width,

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

@@ -1,6 +1,13 @@
 import { PermissionsAndroid, Platform } from 'react-native';
 
 import { CameraRoll, GetPhotosParams } from '@react-native-camera-roll/camera-roll';
+import type { Asset } from 'stream-chat-react-native-core';
+
+type ReturnType = {
+  assets: Array<Omit<Asset, 'source'> & { source: 'picker' }>;
+  endCursor: string | undefined;
+  hasNextPage: boolean;
+};
 
 const verifyAndroidPermissions = async () => {
   const isRN71orAbove = Platform.constants.reactNativeVersion?.minor >= 71;
@@ -49,7 +56,10 @@ const verifyAndroidPermissions = async () => {
   return true;
 };
 
-export const getPhotos = async ({ after, first }: Pick<GetPhotosParams, 'after' | 'first'>) => {
+export const getPhotos = async ({
+  after,
+  first,
+}: Pick<GetPhotosParams, 'after' | 'first'>): Promise<ReturnType> => {
   try {
     if (Platform.OS === 'android') {
       const granted = await verifyAndroidPermissions();
@@ -65,7 +75,12 @@ export const getPhotos = async ({ after, first }: Pick<GetPhotosParams, 'after'
     });
     const assets = results.edges.map((edge) => ({
       ...edge.node.image,
-      source: 'picker',
+      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,
+      source: 'picker' as const,
+      type: edge.node.type,
     }));
     const hasNextPage = results.page_info.has_next_page;
     const endCursor = results.page_info.end_cursor;

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

@@ -44,9 +44,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     },
   } = useTheme();
 
-  const { duration, playableDuration, uri } = asset;
-
-  const videoDuration = duration ? duration : playableDuration;
+  const { duration: videoDuration, uri } = asset;
 
   const ONE_HOUR_IN_SECONDS = 3600;
 

package/src/types/types.ts

@@ -3,13 +3,12 @@ import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 export type Asset = {
   duration: number | null;
   filename: string;
-  fileSize: string;
   height: number;
-  playableDuration: number | null;
   source: 'camera' | 'picker';
   type: string;
   uri: string;
   width: number;
+  fileSize?: number;
   id?: string;
   size?: number | string;
 };