stream-chat-react-native-core 5.0.0-offline-support.6 → 5.0.0-offline-support.9

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -525,6 +525,10 @@ export declare type Theme = {
         markdownStyles: MarkdownStyle;
         messageContainer: ViewStyle;
         textContainer: ViewStyle;
+        videoThumbnail: {
+            container: ViewStyle;
+            image: ImageStyle;
+        };
     };
     screenPadding: number;
     spinner: ViewStyle;

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": "5.0.0-offline-support.6",
+  "version": "5.0.0-offline-support.9",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Gallery.tsx

@@ -58,16 +58,16 @@ const styles = StyleSheet.create({
     padding: 1,
   },
   imageContainerStyle: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  imageLoadingErrorIndicatorStyle: {
+    bottom: 4,
+    left: 4,
+    position: 'absolute',
+  },
   imageLoadingIndicatorStyle: {
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
   },
-  imageLoadingErrorIndicatorStyle: {
-    position: 'absolute',
-    bottom: 4,
-    left: 4,
-  },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageBackground, StyleSheet, View, ViewProps } from 'react-native';
+import { ImageBackground, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons';
@@ -18,13 +18,23 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderRadius: 50,
     display: 'flex',
+    elevation: 6,
     height: 36,
     justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      height: 3,
+      width: 0,
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 4.65,
     width: 36,
   },
 });
 
-export type VideoThumbnailProps = ViewProps & {
+export type VideoThumbnailProps = {
+  imageStyle?: StyleProp<ImageStyle>;
+  style?: StyleProp<ViewStyle>;
   thumb_url?: string;
 };
 
@@ -36,12 +46,12 @@ export const VideoThumbnail: React.FC<VideoThumbnailProps> = (props) => {
       },
     },
   } = useTheme();
-  const { style, thumb_url, ...rest } = props;
+  const { imageStyle, style, thumb_url } = props;
   return (
     <ImageBackground
       accessibilityLabel='video-thumbnail'
+      imageStyle={imageStyle}
       source={{ uri: thumb_url }}
-      {...rest}
       style={[styles.container, container, style]}
     >
       <View style={[styles.roundedView, roundedView]}>

package/src/components/ChannelList/hooks/listeners/handleEventToSyncDB.ts

@@ -30,7 +30,7 @@ export const handleEventToSyncDB = (event: Event, flush?: boolean) => {
   }
 
   if (type === 'message.new') {
-    if (event.message && !event.message.parent_id) {
+    if (event.message && (!event.message.parent_id || event.message.show_in_channel)) {
       return upsertMessages({
         flush,
         messages: [event.message],
@@ -53,7 +53,7 @@ export const handleEventToSyncDB = (event: Event, flush?: boolean) => {
     if (event.message && event.reaction) {
       // We update the entire message to make sure we also update
       // reaction_counts.
-      updateMessage({
+      return updateMessage({
         flush,
         message: event.message,
       });

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -69,25 +69,27 @@ const ChannelPreviewWithContext = <
   }, [channelLastMessageString]);
 
   useEffect(() => {
-    const handleEvent = (event: Event<StreamChatGenerics>) => {
-      if (event.message) {
+    const handleNewMessageEvent = (event: Event<StreamChatGenerics>) => {
+      const message = event.message;
+      if (message && (!message.parent_id || message.show_in_channel)) {
         setLastMessage(event.message);
+        setUnread(channel.countUnread());
       }
+    };
 
-      if (event.type === 'message.new') {
-        setUnread(channel.countUnread());
+    const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
+      if (event.message?.id === lastMessage?.id) {
+        setLastMessage(event.message);
       }
     };
 
     const listeners = [
-      channel.on('message.new', handleEvent),
-      channel.on('message.updated', handleEvent),
-      channel.on('message.deleted', handleEvent),
+      channel.on('message.new', handleNewMessageEvent),
+      channel.on('message.updated', handleUpdatedOrDeletedMessage),
+      channel.on('message.deleted', handleUpdatedOrDeletedMessage),
     ];
 
-    return () => {
-      listeners.forEach((l) => l.unsubscribe());
-    };
+    return () => listeners.forEach((l) => l.unsubscribe());
   }, []);
 
   useEffect(() => {

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -172,7 +172,7 @@ export const ImageGalleryFooterWithContext = <
         fromUrl: photo.uri,
       });
       // `image/jpeg` is added for the case where the mime_type isn't available for a file/image
-      await shareImage({ type: photo.mime_type ?? 'image/jpeg', url: localFile });
+      await shareImage({ type: photo.mime_type || 'image/jpeg', url: localFile });
       await deleteFile({ uri: localFile });
     } catch (error) {
       console.log(error);
@@ -206,7 +206,7 @@ export const ImageGalleryFooterWithContext = <
           ) : (
             <TouchableOpacity disabled={shareMenuOpen} onPress={share}>
               <View style={[styles.leftContainer, leftContainer]}>
-                {ShareIcon ? ShareIcon : <ShareIconDefault />}
+                {ShareIcon ? ShareIcon : <ShareIconDefault pathFill={black} />}
               </View>
             </TouchableOpacity>
           )}

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -132,7 +132,7 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey_whisper, overlay },
+      colors: { black, grey_dark, grey_gainsboro, grey_whisper },
       messageInput: {
         fileUploadPreview: {
           dismiss,
@@ -209,10 +209,10 @@ const FileUploadPreviewWithContext = <
           onPress={() => {
             removeFile(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+          style={[styles.dismiss, { backgroundColor: grey_gainsboro }, dismiss]}
           testID='remove-file-upload-preview'
         >
-          <Close />
+          <Close pathFill={grey_dark} />
         </TouchableOpacity>
       </>
     );

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -87,7 +87,7 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay },
+      colors: { overlay, white },
       messageInput: {
         imageUploadPreview: { dismiss, flatList, itemContainer, upload },
       },
@@ -147,7 +147,7 @@ const ImageUploadPreviewWithContext = <
           style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
           testID='remove-image-upload-preview'
         >
-          <Close />
+          <Close pathFill={white} />
         </TouchableOpacity>
         <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
       </View>

package/src/components/Reply/Reply.tsx

@@ -53,13 +53,16 @@ const styles = StyleSheet.create({
   },
   text: { fontSize: 12 },
   textContainer: { maxWidth: undefined, paddingHorizontal: 8 },
-  videoAttachment: {
+  videoThumbnailContainerStyle: {
     borderRadius: 8,
     height: 50,
     marginLeft: 8,
     marginVertical: 8,
     width: 50,
   },
+  videoThumbnailImageStyle: {
+    borderRadius: 10,
+  },
 });
 
 type ReplyPropsWithContext<
@@ -140,6 +143,10 @@ const ReplyWithContext = <
         markdownStyles,
         messageContainer,
         textContainer,
+        videoThumbnail: {
+          container: videoThumbnailContainerStyle,
+          image: videoThumbnailImageStyle,
+        },
       },
     },
   } = useTheme();
@@ -153,6 +160,7 @@ const ReplyWithContext = <
     !error &&
     lastAttachment &&
     messageType !== 'file' &&
+    messageType !== 'video' &&
     (lastAttachment.image_url || lastAttachment.thumb_url || lastAttachment.og_scrape_url);
 
   const onlyEmojis = !lastAttachment && !!quotedMessage.text && emojiRegex.test(quotedMessage.text);
@@ -207,7 +215,11 @@ const ReplyWithContext = <
           ) : null
         ) : null}
         {messageType === 'video' && !lastAttachment.og_scrape_url ? (
-          <VideoThumbnail style={[styles.videoAttachment]} />
+          <VideoThumbnail
+            imageStyle={[styles.videoThumbnailImageStyle, videoThumbnailImageStyle]}
+            style={[styles.videoThumbnailContainerStyle, videoThumbnailContainerStyle]}
+            thumb_url={lastAttachment.thumb_url}
+          />
         ) : null}
         <MessageTextContainer<StreamChatGenerics>
           markdownStyles={

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -676,11 +676,11 @@ export const MessageInputProvider = <
         attachments.push({
           fallback: image.file.name,
           image_url: image.url,
-          mime_type,
+          mime_type: mime_type ? mime_type : undefined,
           original_height: image.height,
           original_width: image.width,
           type: 'image',
-        } as Attachment<StreamChatGenerics>);
+        });
       }
     }
 
@@ -700,9 +700,9 @@ export const MessageInputProvider = <
           attachments.push({
             fallback: file.file.name,
             image_url: file.url,
-            mime_type,
+            mime_type: mime_type ? mime_type : undefined,
             type: 'image',
-          } as Attachment<StreamChatGenerics>);
+          });
         } else if (file.file.type?.startsWith('audio/')) {
           attachments.push({
             asset_url: file.url,
@@ -711,7 +711,7 @@ export const MessageInputProvider = <
             mime_type: file.file.type,
             title: file.file.name,
             type: 'audio',
-          } as Attachment<StreamChatGenerics>);
+          });
         } else if (file.file.type?.startsWith('video/')) {
           attachments.push({
             asset_url: file.url,
@@ -721,7 +721,7 @@ export const MessageInputProvider = <
             thumb_url: file.thumb_url,
             title: file.file.name,
             type: 'video',
-          } as Attachment<StreamChatGenerics>);
+          });
         } else {
           attachments.push({
             asset_url: file.url,
@@ -729,7 +729,7 @@ export const MessageInputProvider = <
             mime_type: file.file.type,
             title: file.file.name,
             type: 'file',
-          } as Attachment<StreamChatGenerics>);
+          });
         }
       }
     }

package/src/contexts/messageInputContext/__tests__/__snapshots__/sendMessage.test.tsx.snap

@@ -6,7 +6,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
-      "mime_type": false,
+      "mime_type": undefined,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -87,7 +87,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
-      "mime_type": false,
+      "mime_type": undefined,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",
@@ -95,7 +95,7 @@ Object {
     Object {
       "fallback": undefined,
       "image_url": undefined,
-      "mime_type": false,
+      "mime_type": undefined,
       "original_height": undefined,
       "original_width": undefined,
       "type": "image",

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

@@ -529,6 +529,10 @@ export type Theme = {
     markdownStyles: MarkdownStyle;
     messageContainer: ViewStyle;
     textContainer: ViewStyle;
+    videoThumbnail: {
+      container: ViewStyle;
+      image: ImageStyle;
+    };
   };
   screenPadding: number;
   spinner: ViewStyle;
@@ -1058,6 +1062,10 @@ export const defaultTheme: Theme = {
     markdownStyles: {},
     messageContainer: {},
     textContainer: {},
+    videoThumbnail: {
+      container: {},
+      image: {},
+    },
   },
   screenPadding: 8,
   spinner: {},

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.0.0-offline-support.6"
+  "version": "5.0.0-offline-support.9"
 }