@sendbird/uikit-react-native 1.0.0 → 1.1.0

package/src/components/FileViewer.tsx

@@ -0,0 +1,284 @@
+import React, { useEffect, useState } from 'react';
+import { StatusBar, StyleSheet, 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';
+import SBUPressable from './SBUPressable';
+
+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 },
+      ]}
+    >
+      <SBUPressable as={'TouchableOpacity'} onPress={onClose} style={styles.barButton}>
+        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
+      </SBUPressable>
+      <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,
+        },
+      ]}
+    >
+      <SBUPressable as={'TouchableOpacity'} onPress={onPressDownload} style={styles.barButton}>
+        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
+      </SBUPressable>
+      <View style={styles.barTitleContainer} />
+      <SBUPressable as={'TouchableOpacity'} onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
+        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
+      </SBUPressable>
+    </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/GroupChannelPreviewContainer.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import {
+  GroupChannelPreview,
+  LoadingSpinner,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';
+import {
+  SendbirdGroupChannel,
+  SendbirdUser,
+  getFileExtension,
+  getFileType,
+  isDifferentChannel,
+  isMyMessage,
+  useForceUpdate,
+  useIIFE,
+  useUniqId,
+} from '@sendbird/uikit-utils';
+
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+import ChannelCover from './ChannelCover';
+import SBUPressable from './SBUPressable';
+
+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[]>([]);
+  const forceUpdate = useForceUpdate();
+
+  if (features.channelListTypingIndicatorEnabled) {
+    const typingId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+      onTypingStatusUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        setTypingUsers(eventChannel.getTypingUsers());
+      },
+    });
+  }
+
+  if (features.channelListMessageReceiptStatusEnabled) {
+    const receiptId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {
+      onDeliveryReceiptUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
+        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;
+
+        forceUpdate();
+      },
+      onReadReceiptUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
+        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;
+
+        forceUpdate();
+      },
+    });
+  }
+
+  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;
+    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 (channel.lastMessage.sendingStatus === 'pending') {
+      return <LoadingSpinner size={16} style={styles.titleCaptionIcon} />;
+    }
+
+    if (channel.lastMessage.sendingStatus === 'failed') {
+      return <Icon icon={'error'} size={16} color={colors.error} style={styles.titleCaptionIcon} />;
+    }
+
+    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {
+      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;
+    }
+
+    if (features.deliveryReceiptEnabled) {
+      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {
+        return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;
+      }
+      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;
+    }
+
+    return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;
+  });
+
+  return (
+    <SBUPressable 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'}
+      />
+    </SBUPressable>
+  );
+};
+
+const styles = createStyleSheet({
+  titleCaptionIcon: {
+    marginRight: 4,
+  },
+});
+
+export default GroupChannelPreviewContainer;

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

@@ -7,7 +7,7 @@ import type { SendbirdAdminMessage } from '@sendbird/uikit-utils';
 import type { MessageRendererInterface } from '../index';
 
 export type AdminMessageProps = MessageRendererInterface<SendbirdAdminMessage>;
-const AdminMessage: React.FC<AdminMessageProps> = ({ message, nextMessage }) => {
+const AdminMessage = ({ message, nextMessage }: AdminMessageProps) => {
   const { colors } = useUIKitTheme();
 
   const isNextAdmin = nextMessage?.isAdminMessage();

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

@@ -8,12 +8,10 @@ import type { FileMessageProps } from './index';
 
 const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
 
-const BaseFileMessage: React.FC<FileMessageProps & { type: 'image' | 'audio' | 'video' | 'file' }> = ({
-  message,
-  variant,
-  pressed,
-  type,
-}) => {
+type Props = FileMessageProps & {
+  type: 'image' | 'audio' | 'video' | 'file';
+};
+const BaseFileMessage = ({ message, variant, pressed, type }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];

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

@@ -5,7 +5,7 @@ import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 
 import type { FileMessageProps } from './index';
 
-const ImageFileMessage: React.FC<FileMessageProps> = ({ message }) => {
+const ImageFileMessage = ({ message }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
 

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: React.FC<FileMessageProps> = (props) => {
+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/MessageContainer.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import { createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 
-const MessageContainer: React.FC = ({ children }) => {
+const MessageContainer = ({ children }: React.PropsWithChildren) => {
   return <View style={styles.container}>{children}</View>;
 };
 

package/src/components/MessageRenderer/MessageDateSeparator.tsx

@@ -12,7 +12,7 @@ type Props = {
   prevMessage?: SendbirdMessage;
 };
 
-const MessageDateSeparator: React.FC<Props> = ({ message, prevMessage }) => {
+const MessageDateSeparator = ({ message, prevMessage }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

@@ -4,8 +4,11 @@ import { View } from 'react-native';
 import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
-type Props = { message: SendbirdMessage; grouping: boolean };
-const MessageIncomingAvatar: React.FC<Props> = ({ message, grouping }) => {
+type Props = {
+  message: SendbirdMessage;
+  grouping: boolean;
+};
+const MessageIncomingAvatar = ({ message, grouping }: Props) => {
   if (grouping) return <View style={styles.avatar} />;
   return (
     <View style={styles.avatar}>

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -6,8 +6,11 @@ import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../hooks/useContext';
 
-type Props = { message: SendbirdMessage; grouping: boolean };
-const MessageIncomingSenderName: React.FC<Props> = ({ message, grouping }) => {
+type Props = {
+  message: SendbirdMessage;
+  grouping: boolean;
+};
+const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
   if (grouping) return null;