stream-chat-react-native-core 4.6.0 → 4.7.0-beta.1

package/src/components/Message/Message.tsx

@@ -325,9 +325,12 @@ const MessageWithContext = <
     !isMessageTypeDeleted && Array.isArray(message.attachments)
       ? message.attachments.reduce(
           (acc, cur) => {
-            if (cur.type === 'file' || cur.type === 'video') {
+            if (cur.type === 'file') {
               acc.files.push(cur);
               acc.other = []; // remove other attachments if a file exists
+            } else if (cur.type === 'video' && !cur.og_scrape_url) {
+              acc.videos.push({ image_url: cur.asset_url, type: 'video' });
+              acc.other = [];
             } else if (cur.type === 'image' && !cur.title_link && !cur.og_scrape_url) {
               /**
                * this next if is not combined with the above one for cases where we have
@@ -338,7 +341,7 @@ const MessageWithContext = <
                 acc.other = []; // remove other attachments if an image exists
               }
               // only add other attachments if there are no files/images
-            } else if (!acc.files.length && !acc.images.length) {
+            } else if (!acc.files.length && !acc.images.length && !acc.videos.length) {
               acc.other.push(cur);
             }
 
@@ -348,12 +351,14 @@ const MessageWithContext = <
             files: [] as Attachment<StreamChatGenerics>[],
             images: [] as Attachment<StreamChatGenerics>[],
             other: [] as Attachment<StreamChatGenerics>[],
+            videos: [] as Attachment<StreamChatGenerics>[],
           },
         )
       : {
           files: [] as Attachment<StreamChatGenerics>[],
           images: [] as Attachment<StreamChatGenerics>[],
           other: [] as Attachment<StreamChatGenerics>[],
+          videos: [] as Attachment<StreamChatGenerics>[],
         };
 
   /**
@@ -375,7 +380,7 @@ const MessageWithContext = <
       case 'files':
         return !!attachments.files.length;
       case 'gallery':
-        return !!attachments.images.length;
+        return !!attachments.images.length || !!attachments.videos.length;
       case 'text':
       default:
         return !!message.text;
@@ -536,6 +541,7 @@ const MessageWithContext = <
       ownCapabilities,
       supportedReactions,
       threadList,
+      videos: attachments.videos,
     });
 
     setOverlay('message');
@@ -651,6 +657,7 @@ const MessageWithContext = <
     showMessageOverlay,
     showMessageStatus: typeof showMessageStatus === 'boolean' ? showMessageStatus : isMyMessage,
     threadList,
+    videos: attachments.videos,
   });
 
   if (!(isMessageTypeDeleted || messageContentOrder.length)) return null;

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -143,7 +143,16 @@ const MessageContentWithContext = <
       colors: { accent_red, blue_alice, grey_gainsboro, grey_whisper, transparent, white },
       messageSimple: {
         content: {
-          container: { borderRadius, borderRadiusL, borderRadiusS, ...container },
+          container: {
+            borderBottomLeftRadius,
+            borderBottomRightRadius,
+            borderRadius,
+            borderRadiusL,
+            borderRadiusS,
+            borderTopLeftRadius,
+            borderTopRightRadius,
+            ...container
+          },
           containerInner,
           errorContainer,
           errorIcon,
@@ -225,18 +234,46 @@ const MessageContentWithContext = <
 
   const isBorderColor = isMyMessage && !error;
 
-  const shouldApplyBorderRadius = (firstGroupStyle: string, secondGroupStyle: string): boolean =>
-    (groupStyle === firstGroupStyle || groupStyle === secondGroupStyle) &&
-    (!hasThreadReplies || threadList);
+  const getBorderRadius = () => {
+    // enum('top', 'middle', 'bottom', 'single')
+    const groupPosition = groupStyles?.[0];
+
+    const isBottomOrSingle = groupPosition === 'single' || groupPosition === 'bottom';
+    let borderBottomLeftRadius = borderRadiusL;
+    let borderBottomRightRadius = borderRadiusL;
+
+    if (isBottomOrSingle && (!hasThreadReplies || threadList)) {
+      // add relevant sharp corner
+      if (alignment === 'left') {
+        borderBottomLeftRadius = borderRadiusS;
+      } else {
+        borderBottomRightRadius = borderRadiusS;
+      }
+    }
+
+    return {
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+    };
+  };
 
-  const applyBorderRadius = (
-    firstGroupStyle: string,
-    secondGroupStyle: string,
-  ): number | undefined => {
-    if (shouldApplyBorderRadius(firstGroupStyle, secondGroupStyle)) {
-      return borderRadiusS;
+  const getBorderRadiusFromTheme = () => {
+    const bordersFromTheme: Record<string, number | undefined> = {
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+    };
+
+    // filter out undefined values
+    for (const key in bordersFromTheme) {
+      if (bordersFromTheme[key] === undefined) {
+        delete bordersFromTheme[key];
+      }
     }
-    return borderRadiusL;
+
+    return bordersFromTheme;
   };
 
   return (
@@ -313,12 +350,9 @@ const MessageContentWithContext = <
             styles.containerInner,
             {
               backgroundColor,
-              borderBottomLeftRadius: applyBorderRadius('left_bottom', 'left_single'),
-              borderBottomRightRadius: applyBorderRadius('right_bottom', 'right_single'),
               borderColor: isBorderColor ? backgroundColor : grey_whisper,
-              borderRadius,
-              borderTopLeftRadius: applyBorderRadius('left_top', 'right_single'),
-              borderTopRightRadius: applyBorderRadius('right_top', 'right_single'),
+              ...getBorderRadius(),
+              ...getBorderRadiusFromTheme(),
             },
             noBorder ? { borderWidth: 0 } : {},
             containerInner,

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -42,6 +42,7 @@ export const useCreateMessageContext = <
   showMessageOverlay,
   showMessageStatus,
   threadList,
+  videos,
 }: MessageContextValue<StreamChatGenerics>) => {
   const groupStylesLength = groupStyles.length;
   const reactionsValue = reactions.map(({ own, type }) => `${own}${type}`).join();
@@ -93,6 +94,7 @@ export const useCreateMessageContext = <
       showMessageOverlay,
       showMessageStatus,
       threadList,
+      videos,
     }),
     [
       actionsEnabled,

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -135,6 +135,7 @@ const MessageOverlayWithContext = <
     OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
     setOverlay,
     threadList,
+    videos,
     isMyMessage,
     messageReactions,
     error,
@@ -451,6 +452,7 @@ const MessageOverlayWithContext = <
                                             key={`gallery_${messageContentOrderIndex}`}
                                             message={message}
                                             threadList={threadList}
+                                            videos={videos}
                                           />
                                         )
                                       );

package/src/components/Reply/Reply.tsx

@@ -24,6 +24,7 @@ import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { emojiRegex } from '../../utils/utils';
 
 import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
+import { VideoThumbnail } from '../Attachment/VideoThumbnail';
 import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 
@@ -52,6 +53,13 @@ const styles = StyleSheet.create({
   },
   text: { fontSize: 12 },
   textContainer: { maxWidth: undefined, paddingHorizontal: 8 },
+  videoAttachment: {
+    borderRadius: 8,
+    height: 50,
+    marginLeft: 8,
+    marginVertical: 8,
+    width: 50,
+  },
 });
 
 type ReplyPropsWithContext<
@@ -76,10 +84,9 @@ const getMessageType = <
 ) => {
   let messageType;
 
-  const isLastAttachmentFile =
-    lastAttachment.type === 'file' ||
-    lastAttachment.type === 'audio' ||
-    lastAttachment.type === 'video';
+  const isLastAttachmentFile = lastAttachment.type === 'file' || lastAttachment.type === 'audio';
+
+  const isLastAttachmentVideo = lastAttachment.type === 'video';
 
   const isLastAttachmentGiphy = lastAttachment.type === 'giphy' || lastAttachment.type === 'imgur';
 
@@ -90,6 +97,8 @@ const getMessageType = <
 
   if (isLastAttachmentFile) {
     messageType = 'file';
+  } else if (isLastAttachmentVideo) {
+    messageType = 'video';
   } else if (isLastAttachmentImageOrGiphy) {
     if (isLastAttachmentImage) messageType = 'image';
     else messageType = undefined;
@@ -194,6 +203,7 @@ const ReplyWithContext = <
             />
           ) : null
         ) : null}
+        {messageType === 'video' ? <VideoThumbnail style={[styles.videoAttachment]} /> : null}
         <MessageTextContainer<StreamChatGenerics>
           markdownStyles={
             quotedMessage.deleted_at
@@ -210,6 +220,8 @@ const ReplyWithContext = <
                 : quotedMessage.text
               : messageType === 'image'
               ? t('Photo')
+              : messageType === 'video'
+              ? 'Video'
               : messageType === 'file'
               ? lastAttachment?.title || ''
               : '',
@@ -218,25 +230,26 @@ const ReplyWithContext = <
           styles={{
             textContainer: [
               {
-                marginRight: hasImage
-                  ? Number(
-                      stylesProp.imageAttachment?.height ||
-                        imageAttachment.height ||
-                        styles.imageAttachment.height,
-                    ) +
-                    Number(
-                      stylesProp.imageAttachment?.marginLeft ||
-                        imageAttachment.marginLeft ||
-                        styles.imageAttachment.marginLeft,
-                    )
-                  : messageType === 'file'
-                  ? attachmentSize +
-                    Number(
-                      stylesProp.fileAttachmentContainer?.paddingLeft ||
-                        fileAttachmentContainer.paddingLeft ||
-                        styles.fileAttachmentContainer.paddingLeft,
-                    )
-                  : undefined,
+                marginRight:
+                  hasImage || messageType === 'video'
+                    ? Number(
+                        stylesProp.imageAttachment?.height ||
+                          imageAttachment.height ||
+                          styles.imageAttachment.height,
+                      ) +
+                      Number(
+                        stylesProp.imageAttachment?.marginLeft ||
+                          imageAttachment.marginLeft ||
+                          styles.imageAttachment.marginLeft,
+                      )
+                    : messageType === 'file'
+                    ? attachmentSize +
+                      Number(
+                        stylesProp.fileAttachmentContainer?.paddingLeft ||
+                          fileAttachmentContainer.paddingLeft ||
+                          styles.fileAttachmentContainer.paddingLeft,
+                      )
+                    : undefined,
               },
               styles.textContainer,
               textContainer,

package/src/components/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, ViewStyle } from 'react-native';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -20,8 +20,15 @@ const styles = StyleSheet.create({
   },
 });
 
-export const Spinner: React.FC = () => {
+export type SpinnerProps = {
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+  width?: number;
+};
+
+export const Spinner: React.FC<SpinnerProps> = (props) => {
   const rotation = useSharedValue(0);
+  const { height, style, width } = props;
 
   const {
     theme: {
@@ -49,8 +56,8 @@ export const Spinner: React.FC = () => {
   }, []);
 
   return (
-    <Animated.View style={[styles.spinner, animatedStyle, spinner]}>
-      <Loading stopColor={accent_blue} />
+    <Animated.View style={[style, styles.spinner, animatedStyle, spinner, { height, width }]}>
+      <Loading height={height} stopColor={accent_blue} width={width} />
     </Animated.View>
   );
 };

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -369,9 +369,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
-                                  "borderRadius": undefined,
-                                  "borderTopLeftRadius": 16,
-                                  "borderTopRightRadius": 16,
                                 },
                                 Object {},
                                 Object {},
@@ -620,9 +617,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
-                                  "borderRadius": undefined,
-                                  "borderTopLeftRadius": 16,
-                                  "borderTopRightRadius": 16,
                                 },
                                 Object {},
                                 Object {},
@@ -871,9 +865,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                   "borderBottomLeftRadius": 0,
                                   "borderBottomRightRadius": 16,
                                   "borderColor": "#ECEBEB",
-                                  "borderRadius": undefined,
-                                  "borderTopLeftRadius": 16,
-                                  "borderTopRightRadius": 16,
                                 },
                                 Object {},
                                 Object {},
@@ -1170,9 +1161,6 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "borderBottomLeftRadius": 0,
                                     "borderBottomRightRadius": 16,
                                     "borderColor": "#ECEBEB",
-                                    "borderRadius": undefined,
-                                    "borderTopLeftRadius": 16,
-                                    "borderTopRightRadius": 16,
                                   },
                                   Object {},
                                   Object {},

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Attachment/FileAttachmentGroup';
 export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
+export * from './Attachment/VideoThumbnail';
 export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
@@ -74,6 +75,7 @@ export * from './Chat/hooks/useMutedUsers';
 
 export * from './ImageGallery/ImageGallery';
 export * from './ImageGallery/components/AnimatedGalleryImage';
+export * from './ImageGallery/components/AnimatedGalleryVideo';
 export * from './ImageGallery/components/ImageGalleryFooter';
 export * from './ImageGallery/components/ImageGalleryHeader';
 export * from './ImageGallery/components/ImageGalleryOverlay';

package/src/contexts/messageContext/MessageContext.tsx

@@ -91,6 +91,8 @@ export type MessageContextValue<
   showMessageStatus: boolean;
   /** Whether or not the Message is part of a Thread */
   threadList: boolean;
+  /** The videos attached to a message */
+  videos: Attachment<StreamChatGenerics>[];
   goToMessage?: (messageId: string) => void;
   /** Latest message id on current channel */
   lastReceivedId?: string;

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -40,6 +40,7 @@ export type MessageOverlayData<
   ownCapabilities?: OwnCapabilitiesContextValue;
   supportedReactions?: ReactionData[];
   threadList?: boolean;
+  videos?: Attachment<StreamChatGenerics>[];
 };
 
 export type MessageOverlayContextValue<

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -14,6 +14,7 @@ import type { FileAttachmentGroupProps } from '../../components/Attachment/FileA
 import type { FileIconProps } from '../../components/Attachment/FileIcon';
 import type { GalleryProps } from '../../components/Attachment/Gallery';
 import type { GiphyProps } from '../../components/Attachment/Giphy';
+import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
   MessageProps,
   MessageTouchableHandlerPayload,
@@ -228,6 +229,7 @@ export type MessagesContextValue<
    * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Card.tsx
    */
   UrlPreview: React.ComponentType<CardProps<StreamChatGenerics>>;
+  VideoThumbnail: React.ComponentType<VideoThumbnailProps>;
   /**
    * Provide any additional props for `TouchableOpacity` which wraps inner MessageContent component here.
    * Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props

package/src/contexts/themeContext/utils/theme.ts

@@ -196,6 +196,11 @@ export type Theme = {
       rightContainer: ViewStyle;
       usernameText: TextStyle;
     };
+    videoControl: {
+      durationTextStyle: TextStyle;
+      roundedView: ViewStyle;
+      videoContainer: ViewStyle;
+    };
     backgroundColor?: string;
     pager?: ViewStyle;
     slide?: ImageStyle;
@@ -476,6 +481,10 @@ export type Theme = {
       timeIcon: IconProps;
     };
     targetedMessageUnderlay: ViewStyle;
+    videoThumbnail: {
+      container: ViewStyle;
+      roundedView: ViewStyle;
+    };
   };
   overlay: {
     container: ViewStyle;
@@ -669,6 +678,11 @@ export const defaultTheme: Theme = {
       rightContainer: {},
       usernameText: {},
     },
+    videoControl: {
+      durationTextStyle: {},
+      roundedView: {},
+      videoContainer: {},
+    },
   },
   inlineDateSeparator: {
     container: {},
@@ -983,6 +997,10 @@ export const defaultTheme: Theme = {
       },
     },
     targetedMessageUnderlay: {},
+    videoThumbnail: {
+      container: {},
+      roundedView: {},
+    },
   },
   overlay: {
     container: {},

package/src/icons/Pause.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Rect } from 'react-native-svg';
+
+import { IconProps, RootSvg } from './utils/base';
+
+export const Pause: React.FC<IconProps> = (props) => {
+  const { height, width } = props;
+  return (
+    <RootSvg height={height} viewBox={`0 0 ${height} ${width}`} width={width} {...props}>
+      <Rect fill={'black'} height={14} width={4} x={6} y={5} />
+      <Rect fill={'black'} height={14} width={4} x={14} y={5} />
+    </RootSvg>
+  );
+};

package/src/icons/Play.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { IconProps, RootPath, RootSvg } from './utils/base';
+
+export const Play: React.FC<IconProps> = (props) => (
+  <RootSvg
+    height={props.height}
+    viewBox={`0 0 ${props.height} ${props.width}`}
+    width={props.width}
+    {...props}
+  >
+    <RootPath
+      d='M 9.5547 5.03647 C 8.89014 4.59343 8 5.06982 8 5.86852 V 18.1315 C 8 18.9302 8.89015 19.4066 9.5547 18.9635 L 18.7519 12.8321 C 19.3457 12.4362 19.3457 11.5638 18.7519 11.1679 L 9.5547 5.03647 Z'
+      {...props}
+    />
+  </RootSvg>
+);

package/src/icons/index.ts

@@ -45,10 +45,12 @@ export * from './MessageIcon';
 export * from './Mute';
 export * from './Notification';
 export * from './ODT';
+export * from './Pause';
 export * from './PDF';
 export * from './Picture';
 export * from './Pin';
 export * from './PinHeader';
+export * from './Play';
 export * from './PPT';
 export * from './PPTX';
 export * from './RAR';

package/src/mock-builders/api/queryMembers.js

@@ -14,3 +14,101 @@ export const queryMembersApi = (members = []) => {
 
   return mockedApiResponse(result, 'get');
 };
+
+export const ONE_CHANNEL_MEMBER_MOCK = {
+  okey: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-27T11:54:34.173125Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {
+      id: 'okechukwu nwagba martin',
+      name: 'okechukwu nwagba martin',
+    },
+    user_id: 'okechukwu nwagba martin',
+  },
+};
+
+export const GROUP_CHANNEL_MEMBERS_MOCK = {
+  ben: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-27T11:54:34.173125Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {
+      id: 'ben',
+      name: 'ben',
+    },
+    user_id: 'ben',
+  },
+  nick: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-27T11:54:34.173125Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {
+      id: 'nick',
+      name: 'nick',
+    },
+    user_id: 'nick',
+  },
+  okey: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-27T11:54:34.173125Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {
+      id: 'okechukwu nwagba',
+      name: 'okechukwu nwagba',
+    },
+    user_id: 'okechukwu nwagba',
+  },
+  qatest1: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-28T09:08:43.274508Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {
+      id: 'qatest1',
+      name: 'qatest1',
+    },
+    user_id: 'qatest1',
+  },
+
+  thierry: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-27T11:54:34.173125Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {
+      id: 'thierry',
+      name: 'thierry',
+    },
+    user_id: 'thierry',
+  },
+};
+
+export const ONE_MEMBER_WITH_EMPTY_USER_MOCK = {
+  okey: {
+    banned: false,
+    channel_role: 'channel_member',
+    created_at: '2021-01-27T11:54:34.173125Z',
+    role: 'member',
+    shadow_banned: false,
+    updated_at: '2021-02-12T12:12:35.862282Z',
+    user: {},
+    user_id: 'okechukwu nwagba martin',
+  },
+};