Merge pull request #126 from sendbird/fix/video-thumbnail

fix: use source as a thumbnail if it is an image

Author: bang9

packages/uikit-react-native-foundation/src/components/VideoThumbnail/index.tsx

@@ -1,23 +1,30 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
+import { isImage } from '@sendbird/uikit-utils';
+
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Box from '../Box';
 import Icon from '../Icon';
 import ImageWithPlaceholder from '../ImageWithPlaceholder';
 
 type Props = {
-  videoSource: string;
+  source: string;
   fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
 
   style?: StyleProp<ViewStyle>;
   iconSize?: number;
+  /** @deprecated please use `source` prop **/
+  videoSource?: string;
 };
 
-export const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, videoSource, iconSize = 28 }: Props) => {
+export const VideoThumbnail = ({ fetchThumbnailFromVideoSource, style, source, videoSource, iconSize = 28 }: Props) => {
   const { palette, select } = useUIKitTheme();
-  const { thumbnail, loading } = useRetry(() => fetchThumbnailFromVideoSource(videoSource));
+  const { thumbnail, loading } = useRetry(async () => {
+    if (isImage(source ?? videoSource)) return { path: source ?? videoSource };
+    return fetchThumbnailFromVideoSource(source ?? videoSource);
+  });
 
   return (
     <Box style={style}>

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

@@ -28,7 +28,7 @@ const VideoFileMessage = (props: Props) => {
         <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
           <VideoThumbnail
             style={styles.image}
-            videoSource={uri}
+            source={uri}
             fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
           />
         </PressBox>

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

@@ -22,7 +22,7 @@ const VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Pr
       <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
         <VideoThumbnail
           style={styles.container}
-          videoSource={uri}
+          source={uri}
           fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
         />
       </PressBox>

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

@@ -143,7 +143,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
       <VideoThumbnail
         style={styles.previewImage}
         iconSize={0}
-        videoSource={url}
+        source={url}
         fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
       />
     );

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

@@ -57,7 +57,7 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
       <VideoThumbnail
         style={styles.image}
         iconSize={18}
-        videoSource={url}
+        source={url}
         fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
       />
     );