fix: image gallery extra customizations (#3071)

* chore: add override for ImageReloadIndicator

* fix: export missing entities

* fix: add translation for more images in gallery

* fix: add missing translation

* fix: add other missing translation

Author: isekovanic

package/src/components/Attachment/Gallery.tsx

@@ -4,7 +4,6 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
 import { GalleryImage } from './GalleryImage';
-import { ImageReloadIndicator } from './ImageReloadIndicator';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
@@ -13,6 +12,7 @@ import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius
 import { openUrlSafely } from './utils/openUrlSafely';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { useTranslationContext } from '../../contexts';
 import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import {
   ImageGalleryContextValue,
@@ -58,6 +58,7 @@ export type GalleryPropsWithContext<
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
+    | 'ImageReloadIndicator'
     | 'myMessageTheme'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
@@ -90,6 +91,7 @@ const GalleryWithContext = <
     hasThreadReplies,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     images,
     legacyImageViewerSwipeBehaviour,
     message,
@@ -207,6 +209,7 @@ const GalleryWithContext = <
                   colIndex={colIndex}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
                   ImageLoadingIndicator={ImageLoadingIndicator}
+                  ImageReloadIndicator={ImageReloadIndicator}
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
@@ -258,6 +261,7 @@ type GalleryThumbnailProps<
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
+  | 'ImageReloadIndicator'
 > &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
@@ -274,6 +278,7 @@ const GalleryThumbnail = <
   colIndex,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   imagesAndVideos,
   invertedDirections,
   legacyImageViewerSwipeBehaviour,
@@ -306,6 +311,7 @@ const GalleryThumbnail = <
       },
     },
   } = useTheme();
+  const { t } = useTranslationContext();
 
   const openImageViewer = () => {
     if (!legacyImageViewerSwipeBehaviour && message) {
@@ -397,6 +403,7 @@ const GalleryThumbnail = <
             borderRadius={imageBorderRadius ?? borderRadius}
             ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
             ImageLoadingIndicator={ImageLoadingIndicator}
+            ImageReloadIndicator={ImageReloadIndicator}
             thumbnail={thumbnail}
           />
         </View>
@@ -411,7 +418,7 @@ const GalleryThumbnail = <
           ]}
         >
           <Text style={[styles.moreImagesText, moreImagesText]}>
-            {`+${imagesAndVideos.length - 4}`}
+            {String(t('+{{count}}', { count: imagesAndVideos.length - 4 }))}
           </Text>
         </View>
       ) : null}
@@ -425,10 +432,15 @@ const GalleryImageThumbnail = <
   borderRadius,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   thumbnail,
 }: Pick<
   GalleryThumbnailProps<StreamChatGenerics>,
-  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
+  | 'ImageLoadingFailedIndicator'
+  | 'ImageLoadingIndicator'
+  | 'ImageReloadIndicator'
+  | 'thumbnail'
+  | 'borderRadius'
 >) => {
   const {
     isLoadingImage,
@@ -585,6 +597,7 @@ export const Gallery = <
     hasThreadReplies,
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
+    ImageReloadIndicator: PropImageReloadIndicator,
     images: propImages,
     message: propMessage,
     myMessageTheme: propMyMessageTheme,
@@ -617,6 +630,7 @@ export const Gallery = <
     additionalPressableProps: contextAdditionalPressableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
+    ImageReloadIndicator: ContextImageReloadIndicator,
     legacyImageViewerSwipeBehaviour,
     myMessageTheme: contextMyMessageTheme,
     VideoThumbnail: ContextVideoThumnbnail,
@@ -646,6 +660,7 @@ export const Gallery = <
   const ImageLoadingFailedIndicator =
     PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
   const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
+  const ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
 
   return (
@@ -658,6 +673,7 @@ export const Gallery = <
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
+        ImageReloadIndicator,
         images,
         legacyImageViewerSwipeBehaviour,
         message,

package/src/components/Attachment/ImageReloadIndicator.tsx

@@ -6,13 +6,12 @@ import { Refresh } from '../../icons';
 
 const REFRESH_ICON_SIZE = 24;
 
-export const ImageReloadIndicator = ({
-  onReloadImage,
-  style,
-}: {
+export type ImageReloadIndicatorProps = {
   onReloadImage: () => void;
   style: React.ComponentProps<typeof Pressable>['style'];
-}) => {
+};
+
+export const ImageReloadIndicator = ({ onReloadImage, style }: ImageReloadIndicatorProps) => {
   const {
     theme: {
       colors: { grey_dark },

package/src/components/Channel/Channel.tsx

@@ -118,6 +118,7 @@ import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
 import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicator as ImageReloadIndicatorDefault } from '../Attachment/ImageReloadIndicator';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
@@ -325,6 +326,7 @@ export type ChannelPropsWithContext<
       | 'legacyImageViewerSwipeBehaviour'
       | 'ImageLoadingFailedIndicator'
       | 'ImageLoadingIndicator'
+      | 'ImageReloadIndicator'
       | 'markdownRules'
       | 'Message'
       | 'MessageActionList'
@@ -568,6 +570,7 @@ const ChannelWithContext = <
     hideStickyDateHeader = false,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
     ImageLoadingIndicator = ImageLoadingIndicatorDefault,
+    ImageReloadIndicator = ImageReloadIndicatorDefault,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialScrollToFirstUnreadMessage = false,
     initialValue,
@@ -1916,6 +1919,7 @@ const ChannelWithContext = <
       hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage, // when messageId is set, we scroll to the messageId instead of first unread
     InlineDateSeparator,
     InlineUnreadIndicator,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -48,6 +48,7 @@ export const useCreateMessagesContext = <
   hasCreatePoll,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -165,6 +166,7 @@ export const useCreateMessagesContext = <
       hasCreatePoll,
       ImageLoadingFailedIndicator,
       ImageLoadingIndicator,
+      ImageReloadIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
 export * from './Attachment/VideoThumbnail';
+export * from './Attachment/ImageReloadIndicator';
 export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -16,6 +16,7 @@ import type { GalleryProps } from '../../components/Attachment/Gallery';
 import type { GiphyProps } from '../../components/Attachment/Giphy';
 import type { ImageLoadingFailedIndicatorProps } from '../../components/Attachment/ImageLoadingFailedIndicator';
 import type { ImageLoadingIndicatorProps } from '../../components/Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicatorProps } from '../../components/Attachment/ImageReloadIndicator';
 import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
   MessagePressableHandlerPayload,
@@ -153,6 +154,11 @@ export type MessagesContextValue<
    */
   ImageLoadingFailedIndicator: React.ComponentType<ImageLoadingFailedIndicatorProps>;
 
+  /**
+   * The indicator rendered at the center of an image whenever its loading fails, used to trigger retries.
+   */
+  ImageReloadIndicator: React.ComponentType<ImageReloadIndicatorProps>;
+
   /**
    * The indicator rendered when image is loading. By default renders <ActivityIndicator/>
    */

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useStateStore';
 export * from './useStableCallback';
+export * from './useLoadingImage';

package/src/i18n/en.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Reply",
   "1 Thread Reply": "1 Thread Reply",
   "Add a comment": "Add a comment",

package/src/i18n/es.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 respuesta",
   "1 Thread Reply": "1 respuesta de hilo",
   "Add a comment": "Agregar un comentario",

package/src/i18n/fr.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Réponse",
   "1 Thread Reply": "Réponse à 1 fil",
   "Add a comment": "Ajouter un commentaire",