stream-chat-react-native-core 4.6.1 → 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/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/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',
+  },
+};

package/src/native.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';
 
@@ -94,6 +95,58 @@ export let triggerHaptic: TriggerHaptic = fail;
 
 export let SDK: string;
 
+export type PlaybackStatus = {
+  didJustFinish: boolean;
+  durationMillis: number;
+  error: string;
+  isBuffering: boolean;
+  isLoaded: boolean;
+  isLooping: boolean;
+  isPlaying: boolean;
+  positionMillis: number;
+};
+
+export type VideoProgressData = {
+  currentTime?: number;
+  playableDuration?: number;
+  seekableDuration?: number;
+};
+
+export 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 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 let Video: React.ComponentType<VideoType> = fail;
+
 type Handlers = {
   compressImage?: CompressImage;
   deleteFile?: DeleteFile;
@@ -107,6 +160,7 @@ type Handlers = {
   shareImage?: ShareImage;
   takePhoto?: TakePhoto;
   triggerHaptic?: TriggerHaptic;
+  Video?: React.ComponentType<VideoType>;
 };
 
 export const registerNativeHandlers = (handlers: Handlers) => {
@@ -160,4 +214,8 @@ export const registerNativeHandlers = (handlers: Handlers) => {
   if (handlers.triggerHaptic) {
     triggerHaptic = handlers.triggerHaptic;
   }
+
+  if (handlers.Video) {
+    Video = handlers.Video;
+  }
 };

package/src/utils/getUrlOfImageAttachment.ts

@@ -6,5 +6,5 @@ import type { Attachment } from 'stream-chat';
  * @returns {string}
  */
 export function getUrlOfImageAttachment(image: Attachment) {
-  return image.image_url || image.thumb_url;
+  return image.image_url || image.thumb_url || image.asset_url;
 }

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.6.1"
+  "version": "4.7.0-beta.1"
 }