stream-chat-react-native-core 9.1.2 → 9.1.3-beta.1

package/src/components/Attachment/GalleryImage.tsx

@@ -1,7 +1,18 @@
 import React from 'react';
-import { Image, ImageProps, StyleSheet } from 'react-native';
+import {
+  Image,
+  ImageErrorEvent,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useLoadingImage } from '../../hooks/useLoadingImage';
+import { useStableCallback } from '../../hooks/useStableCallback';
 
 import { getUrlWithoutParams, isLocalUrl, makeImageCompatibleUrl } from '../../utils/utils';
 
@@ -10,7 +21,13 @@ export type GalleryImageWithContextProps = GalleryImageProps & {
 };
 
 export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
-  const { ImageComponent = Image, uri, style, ...rest } = props;
+  const {
+    accessibilityLabel = 'Gallery Image',
+    ImageComponent = Image,
+    uri,
+    style,
+    ...rest
+  } = props;
 
   // Caching image components such as FastImage will not work with local images.
   // This for the case of local uris, we use the default Image component.
@@ -18,7 +35,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
     return (
       <ImageComponent
         {...rest}
-        accessibilityLabel='Gallery Image'
+        accessibilityLabel={accessibilityLabel}
         style={[styles.image, style]}
         source={{
           uri: makeImageCompatibleUrl(uri),
@@ -30,7 +47,7 @@ export const GalleryImageWithContext = (props: GalleryImageWithContextProps) =>
   return (
     <Image
       {...rest}
-      accessibilityLabel='Gallery Image'
+      accessibilityLabel={accessibilityLabel}
       style={[styles.image, style]}
       source={{
         uri: makeImageCompatibleUrl(uri),
@@ -54,6 +71,75 @@ export const GalleryImage = (props: GalleryImageProps) => {
   return <MemoizedGalleryImage ImageComponent={ImageComponent} {...props} />;
 };
 
+export type LoadableGalleryImageProps = Pick<
+  GalleryImageProps,
+  'accessibilityLabel' | 'resizeMode' | 'uri'
+> & {
+  children?: React.ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
+  localId?: string;
+};
+
+export const LoadableGalleryImage = ({
+  accessibilityLabel = 'Gallery Image',
+  children,
+  containerStyle,
+  imageStyle,
+  localId,
+  resizeMode,
+  uri,
+}: LoadableGalleryImageProps) => {
+  const { AttachmentUploadIndicator, ImageLoadingFailedIndicator, ImageLoadingIndicator } =
+    useComponentsContext();
+  const {
+    isLoadingImage,
+    isLoadingImageError,
+    onReloadImage,
+    setLoadingImage,
+    setLoadingImageError,
+  } = useLoadingImage();
+
+  const onLoadStart = useStableCallback(() => {
+    setLoadingImageError(false);
+    setLoadingImage(true);
+  });
+  const onLoad = useStableCallback(() => {
+    setTimeout(() => {
+      setLoadingImage(false);
+      setLoadingImageError(false);
+    }, 0);
+  });
+  const onError = useStableCallback(({ nativeEvent: { error } }: ImageErrorEvent) => {
+    console.warn(error);
+    setLoadingImage(false);
+    setLoadingImageError(true);
+  });
+
+  return (
+    <View style={[styles.image, containerStyle]}>
+      {isLoadingImageError ? (
+        <ImageLoadingFailedIndicator onReloadImage={onReloadImage} />
+      ) : (
+        <>
+          <GalleryImage
+            accessibilityLabel={accessibilityLabel}
+            onError={onError}
+            onLoad={onLoad}
+            onLoadStart={onLoadStart}
+            resizeMode={resizeMode}
+            style={imageStyle}
+            uri={uri}
+          />
+          {children}
+          {isLoadingImage ? <ImageLoadingIndicator /> : null}
+          <AttachmentUploadIndicator localId={localId} sourceUrl={uri} variant='overlay' />
+        </>
+      )}
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   image: {
     flex: 1,

package/src/components/Attachment/ImageLoadingIndicator.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { useTheme } from '../../contexts';
 import { NativeShimmerView } from '../UIComponents/NativeShimmerView';
 
-export const ImageLoadingIndicator = () => {
+export const ImageLoadingIndicator = React.memo(() => {
   const {
     theme: { semantics },
   } = useTheme();
@@ -15,18 +15,6 @@ export const ImageLoadingIndicator = () => {
       enabled
       gradientColor={semantics.skeletonLoadingHighlight}
       style={StyleSheet.absoluteFill}
-    >
-      <View pointerEvents='none' style={styles.centered}>
-        <ActivityIndicator />
-      </View>
-    </NativeShimmerView>
+    />
   );
-};
-
-const styles = StyleSheet.create({
-  centered: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
 });

package/src/components/Attachment/VideoThumbnail.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { LoadableGalleryImage } from './GalleryImage';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
@@ -12,6 +13,10 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden',
   },
+  playIndicatorContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export type VideoThumbnailProps = {
@@ -32,18 +37,26 @@ export const VideoThumbnail = (props: VideoThumbnailProps) => {
       },
     },
   } = useTheme();
-  const { AttachmentUploadIndicator, ImageComponent } = useComponentsContext();
   const { imageStyle, localId, style, thumb_url } = props;
 
   return (
     <View style={[styles.container, container, style]}>
-      <ImageComponent
-        accessibilityLabel='Video Thumbnail'
-        source={{ uri: thumb_url }}
-        style={[StyleSheet.absoluteFill, imageStyle]}
-      />
-      <VideoPlayIndicator size='md' />
-      <AttachmentUploadIndicator localId={localId} sourceUrl={thumb_url} variant='overlay' />
+      {thumb_url ? (
+        <LoadableGalleryImage
+          accessibilityLabel='Video Thumbnail'
+          containerStyle={StyleSheet.absoluteFill}
+          imageStyle={imageStyle}
+          localId={localId}
+          uri={thumb_url}
+        >
+          <View
+            pointerEvents='none'
+            style={[StyleSheet.absoluteFill, styles.playIndicatorContainer]}
+          >
+            <VideoPlayIndicator size='md' />
+          </View>
+        </LoadableGalleryImage>
+      ) : null}
     </View>
   );
 };

package/src/components/Attachment/__tests__/VideoThumbnail.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ImageProps, View } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { VideoThumbnail } from '../VideoThumbnail';
+
+const CustomImageComponent = (props: ImageProps) => (
+  <View accessibilityLabel={props.accessibilityLabel} testID='custom-image-component' />
+);
+
+const renderVideoThumbnail = (thumb_url: string) =>
+  render(
+    <ThemeProvider>
+      <WithComponents overrides={{ ImageComponent: CustomImageComponent }}>
+        <VideoThumbnail thumb_url={thumb_url} />
+      </WithComponents>
+    </ThemeProvider>,
+  );
+
+describe('VideoThumbnail', () => {
+  it('uses the configured ImageComponent for remote thumbnail URLs', () => {
+    renderVideoThumbnail('https://example.com/video-thumbnail.jpg');
+
+    expect(screen.getByTestId('custom-image-component')).toBeTruthy();
+  });
+
+  it('uses the default Image fallback for local thumbnail paths', () => {
+    renderVideoThumbnail('file:///tmp/video-thumbnail.jpg');
+
+    expect(screen.queryByTestId('custom-image-component')).toBeNull();
+    expect(screen.getByLabelText('Video Thumbnail')).toBeTruthy();
+  });
+
+  it('renders the image loading indicator while the thumbnail is loading', () => {
+    renderVideoThumbnail('file:///tmp/video-thumbnail.jpg');
+
+    fireEvent(screen.getByLabelText('Video Thumbnail'), 'loadStart');
+
+    expect(screen.getByLabelText('Image Loading Indicator')).toBeTruthy();
+  });
+});

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.1.2"
+  "version": "9.1.3-beta.1"
 }