@sendbird/uikit-react-native-foundation 3.0.4 → 3.1.0

package/src/ui/GroupChannelMessage/MessageOpenGraph.tsx

@@ -15,7 +15,7 @@ const MessageOpenGraph = ({
   ogMetaData,
   variant,
 }: {
-  ogMetaData: Required<SendbirdUserMessage>['ogMetaData'];
+  ogMetaData: NonNullable<SendbirdUserMessage['ogMetaData']>;
   variant: 'outgoing' | 'incoming';
   onPressURL?: (url: string) => void;
   onLongPress?: () => void;
@@ -31,7 +31,7 @@ const MessageOpenGraph = ({
     >
       {({ pressed }) => (
         <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background}>
-          {Boolean(ogMetaData.defaultImage) && (
+          {!!ogMetaData.defaultImage && (
             <ImageWithPlaceholder style={styles.ogImage} source={{ uri: ogMetaData.defaultImage.url }} />
           )}
 
@@ -42,7 +42,7 @@ const MessageOpenGraph = ({
             <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>
               {ogMetaData.title}
             </Text>
-            {Boolean(ogMetaData.description) && (
+            {!!ogMetaData.description && (
               <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>
                 {ogMetaData.description}
               </Text>

package/src/ui/GroupChannelMessage/index.ts

@@ -25,6 +25,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
 
   children?: React.ReactNode;
   sendingStatus?: React.ReactNode;
+  parentMessage?: React.ReactNode;
 
   groupedWithPrev: boolean;
   groupedWithNext: boolean;

package/src/ui/OpenChannelMessage/Message.file.tsx

@@ -11,8 +11,6 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
 import type { OpenChannelMessageProps } from './index';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
-
 type Props = {};
 const FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
   const { colors } = useUIKitTheme();
@@ -40,7 +38,7 @@ const FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>)
                 alignItems={'flex-start'}
                 backgroundColor={colors.background}
               >
-                <Icon icon={iconMapper[type]} size={32} />
+                <Icon.File fileType={type} size={32} />
               </Box>
               <Text
                 body3

package/src/ui/OpenChannelMessage/Message.file.video.tsx

@@ -1,84 +1,41 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 
-import Box from '../../components/Box';
-import Icon from '../../components/Icon';
-import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
 import PressBox from '../../components/PressBox';
+import { VideoThumbnail } from '../../components/VideoThumbnail';
 import createStyleSheet from '../../styles/createStyleSheet';
-import useUIKitTheme from '../../theme/useUIKitTheme';
 import MessageContainer from './MessageContainer';
 import type { OpenChannelMessageProps } from './index';
 
 type Props = {
   fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;
 };
+
 const VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {
-  const { colors, palette } = useUIKitTheme();
   const { onPress, onLongPress, ...rest } = props;
   const uri = getAvailableUriFromFileMessage(props.message);
-  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
 
   return (
     <MessageContainer {...rest}>
       <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>
-        <Box borderRadius={8} overflow={'hidden'} style={styles.container}>
-          {loading ? (
-            <Box backgroundColor={colors.onBackground04} style={{ width: '100%', height: '100%' }} />
-          ) : (
-            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} width={'100%'} height={'100%'} />
-          )}
-
-          {(loading || thumbnail !== null) && (
-            <Box style={styles.iconContainer} alignItems={'center'} justifyContent={'center'}>
-              <Icon
-                icon={'play'}
-                size={28}
-                color={palette.onBackgroundLight02}
-                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}
-              />
-            </Box>
-          )}
-        </Box>
+        <VideoThumbnail
+          style={styles.container}
+          videoSource={uri}
+          fetchThumbnailFromVideoSource={props.fetchThumbnailFromVideoSource}
+        />
       </PressBox>
     </MessageContainer>
   );
 };
-const useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {
-  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
-  const retryCountRef = useRef(0);
-  const retryTimeoutRef = useRef<NodeJS.Timeout>();
-  const fetchThumbnail = useRef(fetch);
-  fetchThumbnail.current = fetch;
-
-  useEffect(() => {
-    if (!state.thumbnail) {
-      const reloadReservation = () => {
-        if (retryCountRef.current < retryCount) {
-          retryTimeoutRef.current = setTimeout(() => {
-            retryCountRef.current++;
-            reloadReservation();
-            fetchThumbnail.current().then((result) => {
-              setState({ loading: false, thumbnail: result?.path ?? null });
-            });
-          }, retryCountRef.current * 5000);
-        }
-      };
 
-      return reloadReservation();
-    } else {
-      return clearTimeout(retryTimeoutRef.current);
-    }
-  }, [state.thumbnail]);
-
-  return state;
-};
 const styles = createStyleSheet({
   container: {
     maxWidth: 296,
     height: 196,
+    borderRadius: 8,
+    overflow: 'hidden',
   },
   iconContainer: {
     position: 'absolute',

package/src/ui/OpenChannelMessage/Message.user.og.tsx

@@ -88,7 +88,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
                     </Text>
                   )}
 
-                  {Boolean(props.message.ogMetaData.defaultImage) && (
+                  {!!props.message.ogMetaData.defaultImage && (
                     <ImageWithPlaceholder
                       style={styles.ogImage}
                       source={{ uri: props.message.ogMetaData.defaultImage.url }}