@sendbird/uikit-react-native 1.0.2 → 1.1.1

package/src/components/FileViewer.tsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from 'react';
+import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Icon,
+  Image,
+  LoadingSpinner,
+  Text,
+  createStyleSheet,
+  useAlert,
+  useHeaderStyle,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte, useIIFE } from '@sendbird/uikit-utils';
+
+import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
+
+type Props = {
+  fileMessage: SendbirdFileMessage;
+  deleteMessage: () => Promise<void>;
+
+  onClose: () => void;
+  onPressDownload?: (message: SendbirdFileMessage) => void;
+  onPressDelete?: (message: SendbirdFileMessage) => void;
+
+  headerShown?: boolean;
+  headerTopInset?: number;
+};
+const FileViewer = ({
+  headerShown = true,
+  deleteMessage,
+  headerTopInset,
+  fileMessage,
+  onPressDownload,
+  onPressDelete,
+  onClose,
+}: Props) => {
+  const [loading, setLoading] = useState(true);
+
+  const { bottom } = useSafeAreaInsets();
+
+  const { currentUser } = useSendbirdChat();
+  const { palette } = useUIKitTheme();
+  const { topInset, statusBarTranslucent, defaultHeight } = useHeaderStyle();
+  const { STRINGS } = useLocalization();
+  const { fileService, mediaService } = usePlatformService();
+  const toast = useToast();
+  const { alert } = useAlert();
+
+  const basicTopInset = statusBarTranslucent ? topInset : 0;
+  const canDelete = isMyMessage(fileMessage, currentUser?.userId);
+  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
+
+  useEffect(() => {
+    if (!mediaService?.VideoComponent || fileType === 'file') {
+      onClose();
+    }
+  }, [mediaService]);
+
+  const fileViewer = useIIFE(() => {
+    switch (fileType) {
+      case 'image': {
+        return (
+          <Image
+            source={{ uri: fileMessage.url }}
+            style={StyleSheet.absoluteFill}
+            resizeMode={'contain'}
+            onLoadEnd={() => setLoading(false)}
+          />
+        );
+      }
+
+      case 'video':
+      case 'audio': {
+        if (!mediaService?.VideoComponent) return null;
+        return (
+          <mediaService.VideoComponent
+            source={{ uri: fileMessage.url }}
+            style={[StyleSheet.absoluteFill, { top: basicTopInset + defaultHeight, bottom: defaultHeight + bottom }]}
+            resizeMode={'contain'}
+            onLoad={() => setLoading(false)}
+          />
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  });
+
+  const _onPressDelete = () => {
+    if (!canDelete) return;
+
+    if (onPressDelete) {
+      onPressDelete(fileMessage);
+    } else {
+      alert({
+        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+        buttons: [
+          {
+            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
+          },
+          {
+            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+            style: 'destructive',
+            onPress: () => {
+              deleteMessage()
+                .then(() => {
+                  onClose();
+                })
+                .catch(() => {
+                  toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+                });
+            },
+          },
+        ],
+      });
+    }
+  };
+
+  const _onPressDownload = () => {
+    if (onPressDownload) {
+      onPressDownload(fileMessage);
+    } else {
+      if (toMegabyte(fileMessage.size) > 4) {
+        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+
+      fileService
+        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.type })
+        .then((response) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+          Logger.log('File saved to', response);
+        })
+        .catch((err) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+          Logger.log('File save failure', err);
+        });
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, backgroundColor: palette.background700 }}>
+      <StatusBar barStyle={'light-content'} animated />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        {fileViewer}
+        {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}
+      </View>
+      {headerShown && (
+        <FileViewerHeader
+          title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}
+          subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}
+          topInset={headerTopInset ?? basicTopInset}
+          onClose={onClose}
+        />
+      )}
+      <FileViewerFooter
+        bottomInset={bottom}
+        deleteShown={canDelete}
+        onPressDelete={_onPressDelete}
+        onPressDownload={_onPressDownload}
+      />
+    </View>
+  );
+};
+
+type HeaderProps = {
+  topInset: number;
+  onClose: () => void;
+  title: string;
+  subtitle: string;
+};
+const FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) => {
+  const { palette } = useUIKitTheme();
+  const { defaultHeight } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.headerContainer,
+        {
+          paddingLeft: styles.headerContainer.paddingHorizontal + left,
+          paddingRight: styles.headerContainer.paddingHorizontal + right,
+        },
+        { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },
+      ]}
+    >
+      <TouchableOpacity onPress={onClose} style={styles.barButton}>
+        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
+      </TouchableOpacity>
+      <View style={styles.barTitleContainer}>
+        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle}>
+          {title}
+        </Text>
+        <Text caption2 color={palette.onBackgroundDark01}>
+          {subtitle}
+        </Text>
+      </View>
+      <View style={styles.barButton} />
+    </View>
+  );
+};
+
+type FooterProps = {
+  bottomInset: number;
+  deleteShown: boolean;
+  onPressDelete: () => void;
+  onPressDownload: () => void;
+};
+const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: FooterProps) => {
+  const { palette } = useUIKitTheme();
+  const { defaultHeight } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.footerContainer,
+        {
+          paddingLeft: styles.headerContainer.paddingHorizontal + left,
+          paddingRight: styles.headerContainer.paddingHorizontal + right,
+        },
+        {
+          paddingBottom: bottomInset,
+          height: defaultHeight + bottomInset,
+          backgroundColor: palette.overlay01,
+        },
+      ]}
+    >
+      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>
+        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
+      </TouchableOpacity>
+      <View style={styles.barTitleContainer} />
+      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
+        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  headerContainer: {
+    top: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  barButton: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  barTitleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    marginBottom: 2,
+  },
+  footerContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+});
+
+export default FileViewer;

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+
+import { usePlatformService } from '../../../hooks/useContext';
+import type { FileMessageProps } from './index';
+
+const VideoFileMessage = ({ message }: FileMessageProps) => {
+  const { colors } = useUIKitTheme();
+
+  const { mediaService } = usePlatformService();
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+
+  const [state, setState] = useState({
+    thumbnail: null as null | string,
+    loading: true,
+    imageNotFound: false,
+  });
+
+  useEffect(() => {
+    mediaService
+      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })
+      .then((result) => {
+        if (result?.path) {
+          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));
+        } else {
+          throw new Error('Cannot generate thumbnail');
+        }
+      })
+      .catch(() => {
+        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));
+      });
+  }, []);
+
+  if (state.loading || state.imageNotFound) {
+    return (
+      <View style={[style, styles.container]}>
+        <PlayIcon />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: state.thumbnail || fileUrl }}
+        style={style}
+        resizeMode={'cover'}
+        resizeMethod={'resize'}
+        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}
+      />
+      <PlayIcon />
+    </View>
+  );
+};
+
+const PlayIcon = () => {
+  const { colors } = useUIKitTheme();
+
+  return (
+    <Icon
+      icon={'play'}
+      size={28}
+      color={colors.onBackground02}
+      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}
+    />
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    width: 240,
+    maxWidth: 240,
+    height: 160,
+    borderRadius: 16,
+  },
+  playIcon: {
+    position: 'absolute',
+    padding: 10,
+    borderRadius: 50,
+  },
+});
+
+export default VideoFileMessage;

package/src/components/MessageRenderer/FileMessage/index.tsx

@@ -2,15 +2,21 @@ import React from 'react';
 
 import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
+import { usePlatformService } from '../../../hooks/useContext';
 import type { MessageRendererInterface } from '../index';
 import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
+import VideoFileMessage from './VideoFileMessage';
 
 export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
 const FileMessage = (props: FileMessageProps) => {
+  const { mediaService } = usePlatformService();
+
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
 
   if (fileType === 'image') return <ImageFileMessage {...props} />;
+  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;
+
   return <BaseFileMessage {...props} type={fileType} />;
 };
 

package/src/components/MessageRenderer/MessageOutgoingStatus.tsx

@@ -1,13 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
+import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import type {
-  SendbirdFileMessage,
-  SendbirdGroupChannel,
-  SendbirdMessage,
-  SendbirdUserMessage,
-} from '@sendbird/uikit-utils';
-import { useUniqId } from '@sendbird/uikit-utils';
+import type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../../hooks/useContext';
 
@@ -17,66 +12,31 @@ type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
 const MessageOutgoingStatus = ({ channel, message }: Props) => {
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
 
-  const handlerId = useUniqId('MessageOutgoingStatus');
-
-  const { sdk, features } = useSendbirdChat();
+  const { sdk } = useSendbirdChat();
   const { colors } = useUIKitTheme();
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);
 
-  const [state, setState] = useState(() => ({
-    unreadCount: channel.getUnreadMemberCount(message),
-    undeliveredCount: channel.getUndeliveredMemberCount(message),
-  }));
-
-  const getCounts = (channel: SendbirdGroupChannel, message: SendbirdUserMessage | SendbirdFileMessage) => {
-    return {
-      unreadCount: channel.getUnreadMemberCount(message),
-      undeliveredCount: channel.getUndeliveredMemberCount(message),
-    };
-  };
-
-  useEffect(() => {
-    const id = String(handlerId);
-    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {
-      sdk.removeChannelHandler(id);
-    } else {
-      const handler = new sdk.ChannelHandler();
-      handler.onReadReceiptUpdated = (channel) => {
-        if (channel.url === message.channelUrl) setState(getCounts(channel, message));
-      };
-
-      if (features.deliveryReceiptEnabled) {
-        handler.onDeliveryReceiptUpdated = (channel) => {
-          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));
-        };
-      }
-      sdk.addChannelHandler(id, handler);
-    }
-
-    return () => {
-      sdk.removeChannelHandler(id);
-    };
-  }, [message.sendingStatus]);
-
-  if (message.sendingStatus === 'pending') {
+  if (outgoingStatus === 'PENDING') {
     return <LoadingSpinner size={SIZE} style={styles.container} />;
   }
 
-  if (message.sendingStatus === 'failed') {
+  if (outgoingStatus === 'FAILED') {
     return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
   }
 
-  if (state.unreadCount === 0) {
+  if (outgoingStatus === 'READ') {
     return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
   }
 
-  if (features.deliveryReceiptEnabled) {
-    if (state.undeliveredCount === 0) {
-      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
-    }
+  if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {
+    return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  }
+
+  if (outgoingStatus === 'UNDELIVERED') {
     return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
   }
 
-  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  return null;
 };
 
 const styles = createStyleSheet({

package/src/components/UserActionBar.tsx

@@ -70,4 +70,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(UserActionBar);
+export default UserActionBar;

package/src/components/UserSelectableBar.tsx

@@ -55,4 +55,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(UserSelectableBar);
+export default UserSelectableBar;

package/src/constants.ts

@@ -1 +1,6 @@
 export const DEFAULT_LONG_PRESS_DELAY = 350;
+export const DEPRECATION_WARNING = {
+  GROUP_CHANNEL: {
+    ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',
+  },
+} as const;

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { Pressable } from 'react-native';
+
+import { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
+import {
+  GroupChannelPreview,
+  Icon,
+  LoadingSpinner,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdGroupChannel,
+  SendbirdUser,
+  getFileExtension,
+  getFileType,
+  isDifferentChannel,
+  isMyMessage,
+  useIIFE,
+  useUniqId,
+} from '@sendbird/uikit-utils';
+
+import ChannelCover from '../components/ChannelCover';
+import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+
+type Props = {
+  channel: SendbirdGroupChannel;
+  onPress: () => void;
+  onLongPress: () => void;
+};
+const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {
+  const { currentUser, sdk, features } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
+
+  if (features.channelListTypingIndicatorEnabled) {
+    const typingId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+      onTypingStatusUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        setTypingUsers(eventChannel.getTypingUsers());
+      },
+    });
+  }
+
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, channel.lastMessage);
+
+  const bodyText = useIIFE(() => {
+    if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';
+    else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
+  });
+
+  const bodyIcon = useIIFE(() => {
+    if (!channel.lastMessage?.isFileMessage()) return undefined;
+    if (typingUsers.length > 0) return undefined;
+    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
+  });
+
+  const titleCaptionIcon = useIIFE(() => {
+    if (!channel.lastMessage) return undefined;
+    if (!features.channelListMessageReceiptStatusEnabled) return undefined;
+    if (!isMyMessage(channel.lastMessage, currentUser?.userId)) return undefined;
+
+    if (outgoingStatus === 'PENDING') {
+      return <LoadingSpinner size={16} style={styles.titleCaptionIcon} />;
+    }
+
+    if (outgoingStatus === 'FAILED') {
+      return <Icon icon={'error'} size={16} color={colors.error} style={styles.titleCaptionIcon} />;
+    }
+
+    if (outgoingStatus === 'UNDELIVERED') {
+      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;
+    }
+
+    if (outgoingStatus === 'DELIVERED' || outgoingStatus === 'UNREAD') {
+      return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;
+    }
+
+    if (outgoingStatus === 'READ') {
+      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;
+    }
+
+    return undefined;
+  });
+
+  return (
+    <Pressable delayLongPress={DEFAULT_LONG_PRESS_DELAY} onPress={onPress} onLongPress={onLongPress}>
+      <GroupChannelPreview
+        customCover={<ChannelCover channel={channel} size={56} />}
+        coverUrl={channel.coverUrl}
+        title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}
+        titleCaptionLeft={titleCaptionIcon}
+        titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
+        body={bodyText}
+        bodyIcon={bodyIcon}
+        badgeCount={channel.unreadMessageCount}
+        memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
+        frozen={channel.isFrozen}
+        notificationOff={channel.myPushTriggerOption === 'off'}
+      />
+    </Pressable>
+  );
+};
+
+const styles = createStyleSheet({
+  titleCaptionIcon: {
+    marginRight: 4,
+  },
+});
+
+export default GroupChannelPreviewContainer;

package/src/{InternalErrorBoundary.tsx → containers/InternalErrorBoundaryContainer.tsx}

@@ -1,8 +1,8 @@
 import React, { ErrorInfo } from 'react';
 import { View } from 'react-native';
 
-import TypedPlaceholder from './components/TypedPlaceholder';
-import type { ErrorBoundaryProps } from './types';
+import TypedPlaceholder from '../components/TypedPlaceholder';
+import type { ErrorBoundaryProps } from '../types';
 
 const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
   return (
@@ -12,7 +12,7 @@ const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
   );
 };
 
-class InternalErrorBoundary extends React.PureComponent<{
+class InternalErrorBoundaryContainer extends React.PureComponent<{
   onError?: (props: ErrorBoundaryProps) => void;
   ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
   children?: React.ReactNode;
@@ -50,4 +50,4 @@ class InternalErrorBoundary extends React.PureComponent<{
   };
 }
 
-export default InternalErrorBoundary;
+export default InternalErrorBoundaryContainer;