Merge pull request #125 from sendbird/feat/use-thumbnails

feat(CLNP-733): use thumbnails if available

Author: bang9

packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/Message.file.image.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
@@ -20,7 +20,7 @@ const ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>)
     <MessageContainer {...props}>
       <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>
         <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
-          <ImageWithPlaceholder source={{ uri: getAvailableUriFromFileMessage(props.message) }} style={styles.image} />
+          <ImageWithPlaceholder source={{ uri: getThumbnailUriFromFileMessage(props.message) }} style={styles.image} />
         </PressBox>
         {props.children}
       </Box>

packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/Message.file.video.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import PressBox from '../../components/PressBox';
@@ -20,7 +20,7 @@ const VideoFileMessage = (props: Props) => {
   const { onPress, onLongPress, variant = 'incoming' } = props;
 
   const { colors } = useUIKitTheme();
-  const uri = getAvailableUriFromFileMessage(props.message);
+  const uri = getThumbnailUriFromFileMessage(props.message);
 
   return (
     <MessageContainer {...props}>

packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.file.image.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import Box from '../../components/Box';
 import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
@@ -12,7 +12,7 @@ import type { OpenChannelMessageProps } from './index';
 
 const ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {
   const { onPress, onLongPress, ...rest } = props;
-  const uri = getAvailableUriFromFileMessage(props.message);
+  const uri = getThumbnailUriFromFileMessage(props.message);
   return (
     <MessageContainer {...rest}>
       <Box borderRadius={8} overflow={'hidden'} style={styles.container}>

packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.file.video.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import PressBox from '../../components/PressBox';
 import { VideoThumbnail } from '../../components/VideoThumbnail';
@@ -15,7 +15,7 @@ type Props = {
 
 const VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
   const { onPress, onLongPress, ...rest } = props;
-  const uri = getAvailableUriFromFileMessage(props.message);
+  const uri = getThumbnailUriFromFileMessage(props.message);
 
   return (
     <MessageContainer {...rest}>

packages/uikit-react-native/src/components/ChannelInput/SendInput.tsx

@@ -27,9 +27,9 @@ import {
   Logger,
   SendbirdBaseMessage,
   SendbirdChannel,
-  getAvailableUriFromFileMessage,
   getFileIconFromMessageType,
   getMessageType,
+  getThumbnailUriFromFileMessage,
   isImage,
   shouldCompressImage,
   useIIFE,
@@ -175,9 +175,9 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
       const messageType = getMessageType(messageToReply);
       switch (messageType) {
         case 'file.image':
-          return getFileIconAsImage(getAvailableUriFromFileMessage(messageToReply));
+          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));
         case 'file.video':
-          return getFileIconAsVideoThumbnail(getAvailableUriFromFileMessage(messageToReply));
+          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));
         default:
           return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
       }

packages/uikit-react-native/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.tsx

@@ -14,9 +14,9 @@ import {
   SendbirdFileMessage,
   SendbirdMessage,
   SendbirdUserMessage,
-  getAvailableUriFromFileMessage,
   getFileIconFromMessageType,
   getMessageType,
+  getThumbnailUriFromFileMessage,
   truncate,
   useIIFE,
 } from '@sendbird/uikit-utils';
@@ -104,10 +104,10 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
         return renderFileMessageAsDownloadable((parentMessage as SendbirdFileMessage).name);
       }
       case 'file.video': {
-        return renderFileMessageAsVideoThumbnail(getAvailableUriFromFileMessage(parentMessage as SendbirdFileMessage));
+        return renderFileMessageAsVideoThumbnail(getThumbnailUriFromFileMessage(parentMessage as SendbirdFileMessage));
       }
       case 'file.image': {
-        return renderFileMessageAsPreview(getAvailableUriFromFileMessage(parentMessage as SendbirdFileMessage));
+        return renderFileMessageAsPreview(getThumbnailUriFromFileMessage(parentMessage as SendbirdFileMessage));
       }
       default: {
         return null;

packages/uikit-utils/src/sendbird/message.ts

@@ -97,10 +97,19 @@ export function getMessageUniqId(msg: SendbirdBaseMessage) {
   return String(msg.messageId);
 }
 
+export function getThumbnailUriFromFileMessage(message: SendbirdFileMessage) {
+  if (message.thumbnails && message.thumbnails.length > 0) {
+    return message.thumbnails[0].url;
+  }
+
+  return getAvailableUriFromFileMessage(message);
+}
+
 export function getAvailableUriFromFileMessage(message: SendbirdFileMessage) {
   if (!message.url && message.messageParams?.file && 'uri' in message.messageParams.file) {
     return message.messageParams.file.uri;
   }
+
   return message.url;
 }