Merge pull request #1201 from GetStream/santhosh/giphy-size-customisation-crns-514

feat: add giphy size customisation [CRNS-514]

Author: santhoshvai

docusaurus/docs/reactnative/common-content/core-components/channel/props/giphy_version.mdx

@@ -0,0 +1,5 @@
+The Giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.
+
+| Type   | Default        |
+| ------ | -------------- |
+| string | 'fixed_height' |

docusaurus/docs/reactnative/contexts/messages_context.mdx

@@ -23,6 +23,7 @@ import ForceAlignMessages from '../common-content/core-components/channel/props/
 import FormatDate from '../common-content/core-components/channel/props/format_date.mdx';
 import Gallery from '../common-content/core-components/channel/props/gallery.mdx';
 import Giphy from '../common-content/core-components/channel/props/giphy.mdx';
+import GiphyVersion from '../common-content/core-components/channel/props/giphy_version.mdx';
 import HandleBlock from '../common-content/core-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/core-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/core-components/channel/props/handle_delete.mdx';
@@ -291,6 +292,10 @@ Upserts a given message in local channel state. Please note that this function d
 
 <Giphy />
 
+### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#giphyversion)_ props</div> giphyVersion {#giphyversion}
+
+<GiphyVersion />
+
 ### <div class="label description">_forwarded from [Channel](../core-components/channel.mdx#inlinedateseparator)_ props</div> InlineDateSeparator {#inlinedateseparator}
 
 <InlineDateSeparator />

docusaurus/docs/reactnative/core-components/channel.mdx

@@ -49,6 +49,7 @@ import FormatDate from '../common-content/core-components/channel/props/format_d
 import Gallery from '../common-content/core-components/channel/props/gallery.mdx';
 import Giphy from '../common-content/core-components/channel/props/giphy.mdx';
 import GiphyEnabled from '../common-content/core-components/channel/props/giphy_enabled.mdx';
+import GiphyVersion from '../common-content/core-components/channel/props/giphy_version.mdx';
 import HandleBlock from '../common-content/core-components/channel/props/handle_block.mdx';
 import HandleCopy from '../common-content/core-components/channel/props/handle_copy.mdx';
 import HandleDelete from '../common-content/core-components/channel/props/handle_delete.mdx';
@@ -436,6 +437,10 @@ The max allowable is 255, which when reached displays as `255+`.
 | ------ | ------- |
 | number | 255     |
 
+### giphyVersion
+
+<GiphyVersion />
+
 ### handleBlock
 
 <HandleBlock />

package/package.json

@@ -79,7 +79,7 @@
     "react-art": "^17.0.2",
     "react-native-markdown-package": "1.8.1",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "6.0.0"
+    "stream-chat": "6.2.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"

package/src/components/Attachment/Attachment.tsx

@@ -20,7 +20,13 @@ export type AttachmentPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessagesContextValue<StreamChatGenerics>,
-  'AttachmentActions' | 'Card' | 'FileAttachment' | 'Gallery' | 'Giphy' | 'UrlPreview'
+  | 'AttachmentActions'
+  | 'Card'
+  | 'FileAttachment'
+  | 'Gallery'
+  | 'giphyVersion'
+  | 'Giphy'
+  | 'UrlPreview'
 > & {
   /**
    * The attachment to render
@@ -33,12 +39,21 @@ const AttachmentWithContext = <
 >(
   props: AttachmentPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { attachment, AttachmentActions, Card, FileAttachment, Gallery, Giphy, UrlPreview } = props;
+  const {
+    attachment,
+    AttachmentActions,
+    Card,
+    FileAttachment,
+    Gallery,
+    Giphy,
+    giphyVersion,
+    UrlPreview,
+  } = props;
 
   const hasAttachmentActions = !!attachment.actions?.length;
 
   if (attachment.type === 'giphy' || attachment.type === 'imgur') {
-    return <Giphy attachment={attachment} />;
+    return <Giphy attachment={attachment} giphyVersion={giphyVersion} />;
   }
 
   if (
@@ -107,7 +122,13 @@ export type AttachmentProps<
 > = Partial<
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'AttachmentActions' | 'Card' | 'FileAttachment' | 'Gallery' | 'Giphy' | 'UrlPreview'
+    | 'AttachmentActions'
+    | 'Card'
+    | 'FileAttachment'
+    | 'Gallery'
+    | 'Giphy'
+    | 'giphyVersion'
+    | 'UrlPreview'
   >
 > &
   Pick<AttachmentPropsWithContext<StreamChatGenerics>, 'attachment'>;
@@ -127,6 +148,7 @@ export const Attachment = <
     FileAttachment: PropFileAttachment,
     Gallery: PropGallery,
     Giphy: PropGiphy,
+    giphyVersion: PropGiphyVersion,
     UrlPreview: PropUrlPreview,
   } = props;
 
@@ -136,6 +158,7 @@ export const Attachment = <
     FileAttachment: ContextFileAttachment,
     Gallery: ContextGallery,
     Giphy: ContextGiphy,
+    giphyVersion: ContextGiphyVersion,
     UrlPreview: ContextUrlPreview,
   } = useMessagesContext<StreamChatGenerics>();
 
@@ -150,6 +173,7 @@ export const Attachment = <
   const Gallery = PropGallery || ContextGallery || GalleryDefault;
   const Giphy = PropGiphy || ContextGiphy || GiphyDefault;
   const UrlPreview = PropUrlPreview || ContextUrlPreview || CardDefault;
+  const giphyVersion = PropGiphyVersion || ContextGiphyVersion;
 
   return (
     <MemoizedAttachment
@@ -160,6 +184,7 @@ export const Attachment = <
         FileAttachment,
         Gallery,
         Giphy,
+        giphyVersion,
         UrlPreview,
       }}
     />

package/src/components/Attachment/Giphy.tsx

@@ -18,7 +18,15 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
-  buttonContainer: { alignItems: 'center', borderTopWidth: 1, flex: 1, justifyContent: 'center' },
+  actionsRow: {
+    flexDirection: 'row',
+  },
+  buttonContainer: {
+    alignItems: 'center',
+    borderTopWidth: 1,
+    flex: 1,
+    justifyContent: 'center',
+  },
   cancel: {
     fontSize: 14,
     fontWeight: '600',
@@ -29,8 +37,10 @@ const styles = StyleSheet.create({
     width: 270,
   },
   giphy: {
+    alignSelf: 'center',
     borderRadius: 2,
     height: 170,
+    maxWidth: 270,
     width: 270,
   },
   giphyContainer: {
@@ -53,7 +63,10 @@ const styles = StyleSheet.create({
     left: 8,
     position: 'absolute',
   },
-  giphyMaskText: { fontSize: 13, fontWeight: '600' },
+  giphyMaskText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
   header: {
     alignItems: 'center',
     display: 'flex',
@@ -62,16 +75,16 @@ const styles = StyleSheet.create({
     padding: 8,
     width: '60%',
   },
-  margin: {
-    margin: 1,
-  },
-  row: { flexDirection: 'row' },
   selectionContainer: {
     borderBottomLeftRadius: 8,
     borderWidth: 1,
     overflow: 'hidden',
     width: 272,
   },
+  selectionImageContainer: {
+    alignSelf: 'center',
+    margin: 1,
+  },
   send: {
     fontSize: 14,
     fontWeight: '600',
@@ -98,7 +111,7 @@ export type GiphyPropsWithContext<
   MessageContextValue<StreamChatGenerics>,
   'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps'> & {
+  Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'> & {
     attachment: Attachment<StreamChatGenerics>;
   };
 
@@ -117,11 +130,11 @@ const GiphyWithContext = <
     preventPress,
   } = props;
 
-  const { actions, image_url, thumb_url, title, type } = attachment;
+  const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
 
   const {
     theme: {
-      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, white },
+      colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, label_bg_transparent, white },
       messageSimple: {
         giphy: {
           buttonContainer,
@@ -142,7 +155,15 @@ const GiphyWithContext = <
     },
   } = useTheme();
 
-  const uri = image_url || thumb_url;
+  let uri = image_url || thumb_url;
+  const giphyDimensions: { height?: number; width?: number } = {};
+
+  if (type === 'giphy' && giphyData) {
+    const giphyVersionInfo = giphyData[props.giphyVersion];
+    uri = giphyVersionInfo.url;
+    giphyDimensions.height = parseFloat(giphyVersionInfo.height);
+    giphyDimensions.width = parseFloat(giphyVersionInfo.width);
+  }
 
   if (!uri) return null;
 
@@ -161,15 +182,15 @@ const GiphyWithContext = <
           style={[styles.giphyHeaderTitle, giphyHeaderTitle, { color: grey_dark }]}
         >{`/giphy ${title}`}</Text>
       </View>
-      <View style={styles.margin}>
+      <View style={styles.selectionImageContainer}>
         <Image
-          resizeMode='cover'
+          resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
-          style={[styles.giphy, giphy]}
+          style={[styles.giphy, giphyDimensions, giphy]}
         />
       </View>
       <View>
-        <View style={styles.row}>
+        <View style={styles.actionsRow}>
           <TouchableOpacity
             onPress={() => {
               if (actions?.[2].name && actions?.[2].value && handleAction) {
@@ -238,18 +259,24 @@ const GiphyWithContext = <
           });
         }
       }}
-      style={[styles.container, container]}
       testID='giphy-attachment'
       {...additionalTouchableProps}
     >
-      <View>
+      <View style={[styles.container, container]}>
         <Image
-          resizeMode='cover'
+          resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
-          style={[styles.giphy, giphy]}
+          style={[styles.giphy, giphyDimensions, giphy]}
+          testID='giphy-attachment-image'
         />
         <View style={[styles.giphyMask, giphyMask]}>
-          <View style={[styles.giphyContainer, { backgroundColor: grey_dark }, giphyContainer]}>
+          <View
+            style={[
+              styles.giphyContainer,
+              { backgroundColor: label_bg_transparent },
+              giphyContainer,
+            ]}
+          >
             <Lightning height={16} pathFill={white} width={16} />
             <Text style={[styles.giphyMaskText, { color: white }, giphyMaskText]}>
               {type?.toUpperCase()}
@@ -267,9 +294,11 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
+    giphyVersion: prevGiphyVersion,
   } = prevProps;
   const {
     attachment: { actions: nextActions, image_url: nextImageUrl, thumb_url: nextThumbUrl },
+    giphyVersion: nextGiphyVersion,
   } = nextProps;
 
   const imageUrlEqual = prevImageUrl === nextImageUrl;
@@ -278,6 +307,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const thumbUrlEqual = prevThumbUrl === nextThumbUrl;
   if (!thumbUrlEqual) return false;
 
+  const giphyVersionEqual = prevGiphyVersion === nextGiphyVersion;
+  if (!giphyVersionEqual) return false;
+
   const actionsEqual =
     Array.isArray(prevActions) === Array.isArray(nextActions) &&
     ((Array.isArray(prevActions) &&
@@ -294,8 +326,8 @@ const MemoizedGiphy = React.memo(GiphyWithContext, areEqual) as typeof GiphyWith
 export type GiphyProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<
-  Pick<MessageContextValue<StreamChatGenerics>, 'onLongPress' | 'onPressIn'> &
-    Pick<MessagesContextValue<StreamChatGenerics>, 'additionalTouchableProps'>
+  Pick<MessageContextValue<StreamChatGenerics>, 'isMyMessage' | 'onLongPress' | 'onPressIn'> &
+    Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'>
 > & {
   attachment: Attachment<StreamChatGenerics>;
 };
@@ -310,12 +342,13 @@ export const Giphy = <
 ) => {
   const { handleAction, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
-  const { additionalTouchableProps } = useMessagesContext<StreamChatGenerics>();
+  const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedGiphy
       {...{
         additionalTouchableProps,
+        giphyVersion,
         handleAction,
         onLongPress,
         onPress,

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -71,6 +71,47 @@ describe('Attachment', () => {
     });
   });
 
+  it('"giphy" attachment size should be customisable', async () => {
+    const attachment = generateGiphyAttachment();
+    attachment.giphy = {
+      fixed_height: {
+        height: '200',
+        url: 'https://media1.giphy.com/media/test/fixed_height.gif',
+        width: '375',
+      },
+      original: {
+        height: '256',
+        url: 'https://media1.giphy.com/media/test/original.gif',
+        width: '480',
+      },
+    };
+    const { getByTestId: getByTestIdFixedHeight } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
+    );
+    const { getByTestId: getByTestIdOriginal } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'original' }),
+    );
+    await waitFor(() => {
+      const checkImageProps = (imageProps, specificSizedGiphyData) => {
+        let imageStyle = imageProps.style;
+        if (Array.isArray(imageStyle)) {
+          imageStyle = Object.assign({}, ...imageStyle);
+        }
+        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
+        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
+        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
+      };
+      checkImageProps(
+        getByTestIdFixedHeight('giphy-attachment-image').props,
+        attachment.giphy.fixed_height,
+      );
+      checkImageProps(
+        getByTestIdOriginal('giphy-attachment-image').props,
+        attachment.giphy.original,
+      );
+    });
+  });
+
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
     const attachment = generateImageAttachment({
       og_scrape_url: uuidv4(),