stream-chat-react-native-core 4.11.0 → 4.11.1-beta.3

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": "4.11.0",
+  "version": "4.11.1-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Gallery.tsx

@@ -57,6 +57,11 @@ 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',
@@ -317,9 +322,6 @@ const GalleryThumbnail = <
   thumbnail,
   VideoThumbnail,
 }: GalleryThumbnailProps<StreamChatGenerics>) => {
-  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
-    useLoadingImage();
-
   const {
     theme: {
       colors: { overlay },
@@ -409,6 +411,65 @@ const GalleryThumbnail = <
         />
       ) : (
         <View style={styles.imageContainerStyle}>
+          <GalleryImageThumbnail
+            borderRadius={borderRadius}
+            ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
+            ImageLoadingIndicator={ImageLoadingIndicator}
+            thumbnail={thumbnail}
+          />
+        </View>
+      )}
+      {colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            styles.moreImagesContainer,
+            { backgroundColor: overlay },
+            moreImagesContainer,
+          ]}
+        >
+          <Text style={[styles.moreImagesText, moreImagesText]}>
+            {`+${imagesAndVideos.length - 4}`}
+          </Text>
+        </View>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+const GalleryImageThumbnail = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  borderRadius,
+  ImageLoadingFailedIndicator,
+  ImageLoadingIndicator,
+  thumbnail,
+}: Pick<
+  GalleryThumbnailProps<StreamChatGenerics>,
+  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
+>) => {
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
+  const {
+    theme: {
+      messageSimple: {
+        gallery: { image },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View
+      style={{
+        height: thumbnail.height - 1,
+        width: thumbnail.width - 1,
+      }}
+    >
+      {isLoadingImageError ? (
+        <ImageLoadingFailedIndicator style={[styles.imageLoadingErrorIndicatorStyle]} />
+      ) : (
+        <>
           <MemoizedGalleryImage
             onError={(error) => {
               console.warn(error);
@@ -433,28 +494,9 @@ const GalleryThumbnail = <
               <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
             </View>
           )}
-          {isLoadingImageError && (
-            <View style={{ position: 'absolute' }}>
-              <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
-            </View>
-          )}
-        </View>
+        </>
       )}
-      {colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (
-        <View
-          style={[
-            StyleSheet.absoluteFillObject,
-            styles.moreImagesContainer,
-            { backgroundColor: overlay },
-            moreImagesContainer,
-          ]}
-        >
-          <Text style={[styles.moreImagesText, moreImagesText]}>
-            {`+${imagesAndVideos.length - 4}`}
-          </Text>
-        </View>
-      ) : null}
-    </TouchableOpacity>
+    </View>
   );
 };
 

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/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": "4.11.0"
+  "version": "4.11.1-beta.3"
 }