stream-chat-react-native-core 4.6.1 → 4.7.0-beta.3

package/lib/typescript/mock-builders/api/queryMembers.d.ts

@@ -0,0 +1,161 @@
+export function queryMembersApi(members?: any): {
+    response: {
+        data: any;
+        status: number;
+    };
+    type: string;
+};
+export namespace ONE_CHANNEL_MEMBER_MOCK {
+    namespace okey {
+        const banned: boolean;
+        const channel_role: string;
+        const created_at: string;
+        const role: string;
+        const shadow_banned: boolean;
+        const updated_at: string;
+        namespace user {
+            const id: string;
+            const name: string;
+        }
+        const user_id: string;
+    }
+}
+export namespace GROUP_CHANNEL_MEMBERS_MOCK {
+    export namespace ben {
+        const banned_1: boolean;
+        export { banned_1 as banned };
+        const channel_role_1: string;
+        export { channel_role_1 as channel_role };
+        const created_at_1: string;
+        export { created_at_1 as created_at };
+        const role_1: string;
+        export { role_1 as role };
+        const shadow_banned_1: boolean;
+        export { shadow_banned_1 as shadow_banned };
+        const updated_at_1: string;
+        export { updated_at_1 as updated_at };
+        export namespace user_1 {
+            const id_1: string;
+            export { id_1 as id };
+            const name_1: string;
+            export { name_1 as name };
+        }
+        export { user_1 as user };
+        const user_id_1: string;
+        export { user_id_1 as user_id };
+    }
+    export namespace nick {
+        const banned_2: boolean;
+        export { banned_2 as banned };
+        const channel_role_2: string;
+        export { channel_role_2 as channel_role };
+        const created_at_2: string;
+        export { created_at_2 as created_at };
+        const role_2: string;
+        export { role_2 as role };
+        const shadow_banned_2: boolean;
+        export { shadow_banned_2 as shadow_banned };
+        const updated_at_2: string;
+        export { updated_at_2 as updated_at };
+        export namespace user_2 {
+            const id_2: string;
+            export { id_2 as id };
+            const name_2: string;
+            export { name_2 as name };
+        }
+        export { user_2 as user };
+        const user_id_2: string;
+        export { user_id_2 as user_id };
+    }
+    export namespace okey_1 {
+        const banned_3: boolean;
+        export { banned_3 as banned };
+        const channel_role_3: string;
+        export { channel_role_3 as channel_role };
+        const created_at_3: string;
+        export { created_at_3 as created_at };
+        const role_3: string;
+        export { role_3 as role };
+        const shadow_banned_3: boolean;
+        export { shadow_banned_3 as shadow_banned };
+        const updated_at_3: string;
+        export { updated_at_3 as updated_at };
+        export namespace user_3 {
+            const id_3: string;
+            export { id_3 as id };
+            const name_3: string;
+            export { name_3 as name };
+        }
+        export { user_3 as user };
+        const user_id_3: string;
+        export { user_id_3 as user_id };
+    }
+    export { okey_1 as okey };
+    export namespace qatest1 {
+        const banned_4: boolean;
+        export { banned_4 as banned };
+        const channel_role_4: string;
+        export { channel_role_4 as channel_role };
+        const created_at_4: string;
+        export { created_at_4 as created_at };
+        const role_4: string;
+        export { role_4 as role };
+        const shadow_banned_4: boolean;
+        export { shadow_banned_4 as shadow_banned };
+        const updated_at_4: string;
+        export { updated_at_4 as updated_at };
+        export namespace user_4 {
+            const id_4: string;
+            export { id_4 as id };
+            const name_4: string;
+            export { name_4 as name };
+        }
+        export { user_4 as user };
+        const user_id_4: string;
+        export { user_id_4 as user_id };
+    }
+    export namespace thierry {
+        const banned_5: boolean;
+        export { banned_5 as banned };
+        const channel_role_5: string;
+        export { channel_role_5 as channel_role };
+        const created_at_5: string;
+        export { created_at_5 as created_at };
+        const role_5: string;
+        export { role_5 as role };
+        const shadow_banned_5: boolean;
+        export { shadow_banned_5 as shadow_banned };
+        const updated_at_5: string;
+        export { updated_at_5 as updated_at };
+        export namespace user_5 {
+            const id_5: string;
+            export { id_5 as id };
+            const name_5: string;
+            export { name_5 as name };
+        }
+        export { user_5 as user };
+        const user_id_5: string;
+        export { user_id_5 as user_id };
+    }
+}
+export namespace ONE_MEMBER_WITH_EMPTY_USER_MOCK {
+    export namespace okey_2 {
+        const banned_6: boolean;
+        export { banned_6 as banned };
+        const channel_role_6: string;
+        export { channel_role_6 as channel_role };
+        const created_at_6: string;
+        export { created_at_6 as created_at };
+        const role_6: string;
+        export { role_6 as role };
+        const shadow_banned_6: boolean;
+        export { shadow_banned_6 as shadow_banned };
+        const updated_at_6: string;
+        export { updated_at_6 as updated_at };
+        const user_6: {};
+        export { user_6 as user };
+        const user_id_6: string;
+        export { user_id_6 as user_id };
+    }
+    export { okey_2 as okey };
+}

package/lib/typescript/mock-builders/api/utils.d.ts

@@ -0,0 +1,7 @@
+export function mockedApiResponse(response: any, type?: string, status?: number): {
+    response: {
+        data: any;
+        status: number;
+    };
+    type: string;
+};

package/lib/typescript/mock-builders/generator/user.d.ts

@@ -0,0 +1,30 @@
+export function getUserDefaults(): {
+    banned: boolean;
+    created_at: string;
+    id: any;
+    image: any;
+    name: any;
+    online: boolean;
+    role: string;
+    updated_at: string;
+};
+export function generateUser(options?: {}): {
+    banned: boolean;
+    created_at: string;
+    id: any;
+    image: any;
+    name: any;
+    online: boolean;
+    role: string;
+    updated_at: string;
+};
+export function generateStaticUser(userNumber: any): {
+    banned: boolean;
+    created_at: string;
+    id: any;
+    image: any;
+    name: any;
+    online: boolean;
+    role: string;
+    updated_at: string;
+};

package/lib/typescript/mock-builders/mock.d.ts

@@ -0,0 +1,3 @@
+export function getTestClient(): any;
+export function getTestClientWithUser(user: any): Promise<any>;
+export function getRandomInt(min: any, max: any): any;

package/lib/typescript/native.d.ts

@@ -1,4 +1,5 @@
-import { FlatList as DefaultFlatList } from 'react-native';
+import type React from 'react';
+import { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
 import type { Asset, File } from './types/types';
 declare type CompressImage = ({ compressImageQuality, height, uri, width, }: {
@@ -64,6 +65,69 @@ declare type HapticFeedbackMethod = 'impactHeavy' | 'impactLight' | 'impactMediu
 declare type TriggerHaptic = (method: HapticFeedbackMethod) => void | never;
 export declare let triggerHaptic: TriggerHaptic;
 export declare let SDK: string;
+export declare type PlaybackStatus = {
+    didJustFinish: boolean;
+    durationMillis: number;
+    error: string;
+    isBuffering: boolean;
+    isLoaded: boolean;
+    isLooping: boolean;
+    isPlaying: boolean;
+    positionMillis: number;
+};
+export declare type VideoProgressData = {
+    currentTime?: number;
+    playableDuration?: number;
+    seekableDuration?: number;
+};
+export declare type VideoPayloadData = {
+    audioTracks?: {
+        index: number;
+        language: string;
+        title: string;
+        type: string;
+    }[];
+    currentPosition?: number;
+    duration?: number;
+    naturalSize?: {
+        height: number;
+        orientation: 'portrait' | 'landscape';
+        width: number;
+    };
+    textTracks?: {
+        index: number;
+        language: string;
+        title: string;
+        type: string;
+    }[];
+    videoTracks?: {
+        bitrate: number;
+        codecs: string;
+        height: number;
+        trackId: number;
+        width: number;
+    }[];
+};
+export declare type VideoType = {
+    paused: boolean;
+    uri: string;
+    videoRef: React.RefObject<VideoType>;
+    onBuffer?: (props: {
+        isBuffering: boolean;
+    }) => void;
+    onEnd?: () => void;
+    onLoad?: (payload: VideoPayloadData) => void;
+    onLoadStart?: () => void;
+    onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void;
+    onProgress?: (data: VideoProgressData) => void;
+    onReadyForDisplay?: () => void;
+    replayAsync?: () => void;
+    resizeMode?: string;
+    seek?: (progress: number) => void;
+    setPositionAsync?: (position: number) => void;
+    style?: StyleProp<ViewStyle>;
+};
+export declare let Video: React.ComponentType<VideoType>;
 declare type Handlers = {
     compressImage?: CompressImage;
     deleteFile?: DeleteFile;
@@ -77,6 +141,7 @@ declare type Handlers = {
     shareImage?: ShareImage;
     takePhoto?: TakePhoto;
     triggerHaptic?: TriggerHaptic;
+    Video?: React.ComponentType<VideoType>;
 };
 export declare const registerNativeHandlers: (handlers: Handlers) => void;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.6.1",
+  "version": "4.7.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Attachment.tsx

@@ -75,17 +75,21 @@ const AttachmentWithContext = <
     );
   }
 
-  if (attachment.type === 'file' || attachment.type === 'audio') {
-    return <FileAttachment attachment={attachment} />;
-  }
-
-  if (attachment.type === 'video' && attachment.asset_url) {
+  if (attachment.type === 'video' && !attachment.og_scrape_url) {
     return (
-      // TODO: Put in video component
-      <FileAttachment attachment={attachment} />
+      <>
+        <Gallery videos={[attachment]} />
+        {hasAttachmentActions && (
+          <AttachmentActions key={`key-actions-${attachment.id}`} {...attachment} />
+        )}
+      </>
     );
   }
 
+  if (attachment.type === 'file' || attachment.type === 'audio') {
+    return <FileAttachment attachment={attachment} />;
+  }
+
   if (hasAttachmentActions) {
     return (
       <>

package/src/components/Attachment/Card.tsx

@@ -149,6 +149,7 @@ const CardWithContext = <
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
+            additionalInfo: { url: og_scrape_url },
             emitter: 'card',
             event,
           });
@@ -157,6 +158,7 @@ const CardWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            additionalInfo: { url: og_scrape_url },
             defaultHandler: defaultOnPress,
             emitter: 'card',
             event,
@@ -166,6 +168,7 @@ const CardWithContext = <
       onPressIn={(event) => {
         if (onPressIn) {
           onPressIn({
+            additionalInfo: { url: og_scrape_url },
             defaultHandler: defaultOnPress,
             emitter: 'card',
             event,

package/src/components/Attachment/Gallery.tsx

@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { padding: 1 },
+  imageContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'center', padding: 1 },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -76,6 +76,7 @@ export type GalleryPropsWithContext<
     | 'alignment'
     | 'groupStyles'
     | 'images'
+    | 'videos'
     | 'onLongPress'
     | 'onPress'
     | 'onPressIn'
@@ -84,7 +85,7 @@ export type GalleryPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
+    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour' | 'VideoThumbnail'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
@@ -125,6 +126,8 @@ const GalleryWithContext = <
     setImages,
     setOverlay,
     threadList,
+    videos,
+    VideoThumbnail,
   } = props;
 
   const {
@@ -158,16 +161,17 @@ const GalleryWithContext = <
     minWidth,
   };
 
+  const imagesAndVideos = [...(images || []), ...(videos || [])];
   const { height, invertedDirections, thumbnailGrid, width } = useMemo(
     () =>
       buildGallery({
-        images,
+        images: imagesAndVideos,
         sizeConfig,
       }),
-    [images.length],
+    [imagesAndVideos.length],
   );
 
-  if (!images?.length) return null;
+  if (!imagesAndVideos?.length) return null;
   const messageText = message?.text;
   const messageId = message?.id;
   const numOfColumns = thumbnailGrid.length;
@@ -200,7 +204,7 @@ const GalleryWithContext = <
             ]}
             testID={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
           >
-            {rows.map(({ height, resizeMode, url, width }, rowIndex) => {
+            {rows.map(({ height, resizeMode, type, url, width }, rowIndex) => {
               const defaultOnPress = () => {
                 // Added if-else to keep the logic readable, instead of DRY.
                 // if - legacyImageViewerSwipeBehaviour is disabled
@@ -214,11 +218,28 @@ const GalleryWithContext = <
                   setOverlay('gallery');
                 }
               };
+
+              const borderRadius = getGalleryImageBorderRadius({
+                alignment,
+                colIndex,
+                groupStyles,
+                hasThreadReplies,
+                height,
+                invertedDirections,
+                messageText,
+                numOfColumns,
+                numOfRows,
+                rowIndex,
+                sizeConfig,
+                threadList,
+                width,
+              });
+
               return (
                 <TouchableOpacity
                   activeOpacity={0.8}
                   disabled={preventPress}
-                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${images.length}`}
+                  key={`gallery-item-${messageId}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
                   onLongPress={(event) => {
                     if (onLongPress) {
                       onLongPress({
@@ -258,35 +279,34 @@ const GalleryWithContext = <
                   }-${colIndex}-item-${rowIndex}`}
                   {...additionalTouchableProps}
                 >
-                  <MemoizedGalleryImage
-                    resizeMode={resizeMode}
-                    style={[
-                      getGalleryImageBorderRadius({
-                        alignment,
-                        colIndex,
-                        groupStyles,
-                        hasThreadReplies,
-                        height,
-                        invertedDirections,
-                        messageText,
-                        numOfColumns,
-                        numOfRows,
-                        rowIndex,
-                        sizeConfig,
-                        threadList,
-                        width,
-                      }),
-                      image,
-                      {
-                        height: height - 1,
-                        width: width - 1,
-                      },
-                    ]}
-                    uri={url}
-                  />
+                  {type === 'video' ? (
+                    <VideoThumbnail
+                      style={[
+                        borderRadius,
+                        image,
+                        {
+                          height: height - 1,
+                          width: width - 1,
+                        },
+                      ]}
+                    />
+                  ) : (
+                    <MemoizedGalleryImage
+                      resizeMode={resizeMode}
+                      style={[
+                        borderRadius,
+                        image,
+                        {
+                          height: height - 1,
+                          width: width - 1,
+                        },
+                      ]}
+                      uri={url}
+                    />
+                  )}
                   {colIndex === numOfColumns - 1 &&
                   rowIndex === numOfRows - 1 &&
-                  images.length > 4 ? (
+                  imagesAndVideos.length > 4 ? (
                     <View
                       style={[
                         StyleSheet.absoluteFillObject,
@@ -296,7 +316,7 @@ const GalleryWithContext = <
                       ]}
                     >
                       <Text style={[styles.moreImagesText, moreImagesText]}>
-                        {`+${images.length - 4}`}
+                        {`+${imagesAndVideos.length - 4}`}
                       </Text>
                     </View>
                   ) : null}
@@ -319,12 +339,14 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     hasThreadReplies: prevHasThreadReplies,
     images: prevImages,
     message: prevMessage,
+    videos: prevVideos,
   } = prevProps;
   const {
     groupStyles: nextGroupStyles,
     hasThreadReplies: nextHasThreadReplies,
     images: nextImages,
     message: nextMessage,
+    videos: nextVideos,
   } = nextProps;
 
   const messageEqual = prevMessage?.id === nextMessage?.id;
@@ -346,6 +368,15 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     );
   if (!imagesEqual) return false;
 
+  const videosEqual =
+    prevVideos.length === nextVideos.length &&
+    prevVideos.every(
+      (image, index) =>
+        getUrlWithoutParams(image.image_url) === getUrlWithoutParams(nextVideos[index].image_url) &&
+        getUrlWithoutParams(image.thumb_url) === getUrlWithoutParams(nextVideos[index].thumb_url),
+    );
+  if (!videosEqual) return false;
+
   return true;
 };
 
@@ -376,6 +407,8 @@ export const Gallery = <
     setImage: propSetImage,
     setOverlay: propSetOverlay,
     threadList: propThreadList,
+    videos: propVideos,
+    VideoThumbnail: PropVideoThumbnail,
   } = props;
 
   const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
@@ -389,16 +422,19 @@ export const Gallery = <
     onPressIn: contextOnPressIn,
     preventPress: contextPreventPress,
     threadList: contextThreadList,
+    videos: contextVideos,
   } = useMessageContext<StreamChatGenerics>();
   const {
     additionalTouchableProps: contextAdditionalTouchableProps,
     legacyImageViewerSwipeBehaviour,
+    VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext<StreamChatGenerics>();
   const { setOverlay: contextSetOverlay } = useOverlayContext();
 
   const images = propImages || contextImages;
+  const videos = propVideos || contextVideos;
 
-  if (!images.length) return null;
+  if (!images.length && !videos.length) return null;
 
   const additionalTouchableProps = propAdditionalTouchableProps || contextAdditionalTouchableProps;
   const alignment = propAlignment || contextAlignment;
@@ -411,6 +447,7 @@ export const Gallery = <
   const setImage = propSetImage || contextSetImage;
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
+  const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
 
   return (
     <MemoizedGallery
@@ -431,6 +468,8 @@ export const Gallery = <
         setImages,
         setOverlay,
         threadList,
+        videos,
+        VideoThumbnail,
       }}
     />
   );

package/src/components/Attachment/VideoThumbnail.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet, View, ViewProps } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Play } from '../../icons';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'black',
+    display: 'flex',
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  roundedView: {
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 50,
+    display: 'flex',
+    height: 36,
+    justifyContent: 'center',
+    width: 36,
+  },
+});
+
+export type VideoThumbnailProps = ViewProps;
+
+export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
+  const {
+    theme: {
+      messageSimple: {
+        videoThumbnail: { container, roundedView },
+      },
+    },
+  } = useTheme();
+  const { style, ...rest } = props;
+  return (
+    <View {...rest} style={[styles.container, container, style]}>
+      <View style={[styles.roundedView, roundedView]}>
+        <Play height={24} pathFill={'#000'} width={24} />
+      </View>
+    </View>
+  );
+};

package/src/components/Attachment/hooks/useGoToURL.ts

@@ -19,7 +19,7 @@ export const useGoToURL: UseGoToURLType = (url?: string) => {
         Linking.openURL(finalUrl);
       } else {
         setError(true);
-        console.log(`Don't know how to open URI: ${finalUrl}`);
+        console.warn(`Don't know how to open URI: ${finalUrl}`);
       }
     });
 

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -36,6 +36,7 @@ export function buildThumbnail<
     resizeMode: resizeMode
       ? resizeMode
       : ((image.original_height && image.original_width ? 'contain' : 'cover') as ImageResizeMode),
+    type: image.type,
     url: shouldResize
       ? getResizedImageUrl({
           height,

package/src/components/Attachment/utils/buildGallery/types.ts

@@ -6,6 +6,7 @@ export type Thumbnail = {
   url: string;
   width: number;
   id?: string;
+  type?: string;
 };
 
 export type GallerySizeConfig = {

package/src/components/Attachment/utils/getAspectRatio.ts

@@ -10,12 +10,14 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
  */
 export function getAspectRatio<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(image: Attachment<StreamChatGenerics>) {
-  if (image.type !== 'image') {
-    throw new Error('getAspectRatio() can only be called on an image attachment');
+>(attachment: Attachment<StreamChatGenerics>) {
+  if (!(attachment.type === 'image' || attachment.type === 'video')) {
+    throw new Error(
+      'getAspectRatio() can only be called on an image attachment or video thumbnail',
+    );
   }
 
-  if (!image.original_width || !image.original_height) return 1;
+  if (!attachment.original_width || !attachment.original_height) return 1;
 
-  return image.original_width / image.original_height;
+  return attachment.original_width / attachment.original_height;
 }