@sendbird/uikit-react-native 3.5.4 → 3.7.0

package/src/components/ChannelThreadMessageList/index.tsx

@@ -0,0 +1,406 @@
+import React, { Ref } from 'react';
+import { FlatList, FlatListProps, ListRenderItem, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  BottomSheetItem,
+  ChannelFrozenBanner,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  Logger,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdOpenChannel,
+  SendbirdUserMessage,
+  getAvailableUriFromFileMessage,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  isVoiceMessage,
+  messageKeyExtractor,
+  shouldRenderReaction,
+  toMegabyte,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
+
+import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
+import { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import { ReactionAddons } from '../ReactionAddons';
+import ThreadChatFlatList from '../ThreadChatFlatList';
+
+type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
+type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+type CreateMessagePressActions = (params: { message: SendbirdMessage }) => PressActions;
+export type ChannelThreadMessageListProps<T extends SendbirdGroupChannel | SendbirdOpenChannel> = {
+  enableMessageGrouping: boolean;
+  currentUserId?: string;
+  channel: T;
+  messages: SendbirdMessage[];
+  newMessages: SendbirdMessage[];
+  searchItem?: { startingPoint: number };
+
+  scrolledAwayFromBottom: boolean;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+  onTopReached: () => void;
+  onBottomReached: () => void;
+  hasNext: () => boolean;
+
+  onPressNewMessagesButton: (animated?: boolean) => void;
+  onPressScrollToBottomButton: (animated?: boolean) => void;
+
+  onEditMessage: (message: HandleableMessage) => void;
+  onDeleteMessage: (message: HandleableMessage) => Promise<void>;
+  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
+  onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+
+  renderMessage: (props: {
+    focused: boolean;
+    message: SendbirdMessage;
+    prevMessage?: SendbirdMessage;
+    nextMessage?: SendbirdMessage;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onShowUserProfile?: UserProfileContextType['show'];
+    channel: T;
+    currentUserId?: ChannelThreadMessageListProps<T>['currentUserId'];
+    enableMessageGrouping: ChannelThreadMessageListProps<T>['enableMessageGrouping'];
+    bottomSheetItem?: BottomSheetItem;
+    isFirstItem: boolean;
+  }) => React.ReactElement | null;
+  renderNewMessagesButton:
+    | null
+    | ((props: { visible: boolean; onPress: () => void; newMessages: SendbirdMessage[] }) => React.ReactElement | null);
+  renderScrollToBottomButton: null | ((props: { visible: boolean; onPress: () => void }) => React.ReactElement | null);
+  flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+} & {
+  ref?: Ref<FlatList<SendbirdMessage>> | undefined;
+};
+
+const ChannelThreadMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel>(
+  {
+    searchItem,
+    hasNext,
+    channel,
+    onEditMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressMediaMessage,
+    currentUserId,
+    renderNewMessagesButton,
+    renderScrollToBottomButton,
+    renderMessage,
+    messages,
+    newMessages,
+    enableMessageGrouping,
+    onScrolledAwayFromBottom,
+    scrolledAwayFromBottom,
+    onBottomReached,
+    onTopReached,
+    flatListProps,
+    onPressNewMessagesButton,
+    onPressScrollToBottomButton,
+  }: ChannelThreadMessageListProps<T>,
+  ref: React.ForwardedRef<FlatList<SendbirdMessage>>,
+) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { show } = useUserProfile();
+  const { left, right } = useSafeAreaInsets();
+  const createMessagePressActions = useCreateMessagePressActions({
+    channel,
+    currentUserId,
+    onEditMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressMediaMessage,
+  });
+
+  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
+
+  const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
+    const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: item });
+    return renderMessage({
+      message: item,
+      prevMessage: messages[index - 1],
+      nextMessage: messages[index + 1],
+      onPress,
+      onLongPress,
+      onShowUserProfile: show,
+      enableMessageGrouping,
+      channel,
+      currentUserId,
+      focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
+      bottomSheetItem,
+      isFirstItem: index === 0,
+    });
+  });
+
+  return (
+    <View style={[{ flex: 1, backgroundColor: colors.background }, safeAreaLayout]}>
+      {channel.isFrozen && (
+        <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
+      )}
+      <ThreadChatFlatList
+        {...flatListProps}
+        onTopReached={onTopReached}
+        onBottomReached={onBottomReached}
+        onScrolledAwayFromBottom={onScrolledAwayFromBottom}
+        ref={ref}
+        data={messages}
+        renderItem={renderItem}
+        keyExtractor={messageKeyExtractor}
+        contentContainerStyle={[
+          // { minHeight: '100%', justifyContent: 'flex-end' },
+          channel.isFrozen && styles.frozenListPadding,
+          flatListProps?.contentContainerStyle,
+        ]}
+      />
+      {renderNewMessagesButton && (
+        <View style={[styles.newMsgButton, safeAreaLayout]}>
+          {renderNewMessagesButton({
+            visible: newMessages.length > 0 && (hasNext() || scrolledAwayFromBottom),
+            onPress: () => onPressNewMessagesButton(),
+            newMessages,
+          })}
+        </View>
+      )}
+      {renderScrollToBottomButton && (
+        <View style={[styles.scrollButton, safeAreaLayout]}>
+          {renderScrollToBottomButton({
+            visible: hasNext() || scrolledAwayFromBottom,
+            onPress: () => onPressScrollToBottomButton(),
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
+  channel,
+  currentUserId,
+  onResendFailedMessage,
+  onEditMessage,
+  onDeleteMessage,
+  onPressMediaMessage,
+}: Pick<
+  ChannelThreadMessageListProps<T>,
+  'channel' | 'currentUserId' | 'onEditMessage' | 'onDeleteMessage' | 'onResendFailedMessage' | 'onPressMediaMessage'
+>): CreateMessagePressActions => {
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const { clipboardService, fileService } = usePlatformService();
+  const { sbOptions } = useSendbirdChat();
+
+  const onResendFailure = (error: Error) => {
+    toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.RESEND_MSG_ERROR, error);
+  };
+
+  const onDeleteFailure = (error: Error) => {
+    toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.DELETE_MSG_ERROR, error);
+  };
+
+  const onCopyText = (message: HandleableMessage) => {
+    if (message.isUserMessage()) {
+      clipboardService.setString(message.message || '');
+      toast.show(STRINGS.TOAST.COPY_OK, 'success');
+    }
+  };
+
+  const onDownloadFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      if (toMegabyte(message.size) > 4) {
+        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+
+      fileService
+        .save({ fileUrl: message.url, fileName: message.name, fileType: message.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);
+        });
+    }
+  };
+
+  const onOpenFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      const fileType = getFileType(message.type || getFileExtension(message.name));
+      if (['image', 'video', 'audio'].includes(fileType)) {
+        onPressMediaMessage?.(message, () => onDeleteMessage(message), getAvailableUriFromFileMessage(message));
+      } else {
+        SBUUtils.openURL(message.url);
+      }
+    }
+  };
+
+  const openSheetForFailedMessage = (message: HandleableMessage) => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
+        },
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
+          titleColor: colors.ui.dialog.default.none.destructive,
+          onPress: () => alertForMessageDelete(message),
+        },
+      ],
+    });
+  };
+
+  const alertForMessageDelete = (message: HandleableMessage) => {
+    alert({
+      title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [
+        { text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL },
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => {
+            onDeleteMessage(message).catch(onDeleteFailure);
+          },
+        },
+      ],
+    });
+  };
+
+  return ({ message }) => {
+    if (!message.isUserMessage() && !message.isFileMessage()) return {};
+
+    const sheetItems: BottomSheetItem['sheetItems'] = [];
+    const menu = {
+      copy: (message: HandleableMessage) => ({
+        icon: 'copy' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
+        onPress: () => onCopyText(message),
+      }),
+      edit: (message: HandleableMessage) => ({
+        icon: 'edit' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+        onPress: () => onEditMessage(message),
+      }),
+      delete: (message: HandleableMessage) => ({
+        disabled: message.threadInfo ? message.threadInfo.replyCount > 0 : undefined,
+        icon: 'delete' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+        onPress: () => alertForMessageDelete(message),
+      }),
+      download: (message: HandleableMessage) => ({
+        icon: 'download' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
+        onPress: () => onDownloadFile(message),
+      }),
+    };
+
+    if (message.isUserMessage()) {
+      sheetItems.push(menu.copy(message));
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.edit(message));
+          sheetItems.push(menu.delete(message));
+        }
+      }
+    }
+
+    if (message.isFileMessage()) {
+      if (!isVoiceMessage(message)) {
+        sheetItems.push(menu.download(message));
+      }
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.delete(message));
+        }
+      }
+    }
+
+    const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
+    const bottomSheetItem: BottomSheetItem = {
+      sheetItems,
+      HeaderComponent: shouldRenderReaction(
+        channel,
+        channel.isGroupChannel() && (channel.isSuper ? configs.enableReactionsSupergroup : configs.enableReactions),
+      )
+        ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
+        : undefined,
+    };
+
+    switch (true) {
+      case message.sendingStatus === 'pending': {
+        return {
+          onPress: undefined,
+          onLongPress: undefined,
+          bottomSheetItem: undefined,
+        };
+      }
+
+      case message.sendingStatus === 'failed': {
+        return {
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
+          onLongPress: () => openSheetForFailedMessage(message),
+          bottomSheetItem,
+        };
+      }
+
+      case message.isFileMessage(): {
+        return {
+          onPress: () => onOpenFile(message),
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
+
+      default: {
+        return {
+          onPress: undefined,
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
+    }
+  };
+};
+
+const styles = createStyleSheet({
+  frozenBanner: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 8,
+    left: 8,
+    right: 8,
+  },
+  frozenListPadding: {
+    paddingBottom: 32,
+  },
+  newMsgButton: {
+    position: 'absolute',
+    zIndex: 999,
+    bottom: 10,
+    alignSelf: 'center',
+  },
+  scrollButton: {
+    position: 'absolute',
+    zIndex: 998,
+    bottom: 10,
+    right: 16,
+  },
+});
+
+// NOTE: Due to Generic inference is not working on forwardRef, we need to cast it as typeof ChannelMessageList and implicit `ref` prop
+export default React.forwardRef(ChannelThreadMessageList) as typeof ChannelThreadMessageList;

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.tsx

@@ -30,7 +30,7 @@ type Props = {
   channel: SendbirdGroupChannel;
   message: SendbirdUserMessage | SendbirdFileMessage;
   childMessage: SendbirdUserMessage | SendbirdFileMessage;
-  onPress?: (message: SendbirdMessage) => void;
+  onPress?: (parentMessage: SendbirdMessage, childMessage: SendbirdUserMessage | SendbirdFileMessage) => void;
 };
 
 const GroupChannelMessageParentMessage = ({ variant, channel, message, childMessage, onPress }: Props) => {
@@ -135,7 +135,7 @@ const GroupChannelMessageParentMessage = ({ variant, channel, message, childMess
         paddingLeft={variant === 'outgoing' ? 0 : 12}
         paddingRight={variant === 'outgoing' ? 12 : 0}
       >
-        <PressBox onPress={() => onPress?.(parentMessage)} style={styles.senderLabel}>
+        <PressBox onPress={() => onPress?.(parentMessage, childMessage)} style={styles.senderLabel}>
           <Icon icon={'reply-filled'} size={13} color={colors.onBackground03} containerStyle={{ marginRight: 4 }} />
           <Text caption1 color={colors.onBackground03}>
             {STRINGS.LABELS.REPLY_FROM_SENDER_TO_RECEIVER(childMessage, parentMessage, currentUser?.userId)}
@@ -147,7 +147,7 @@ const GroupChannelMessageParentMessage = ({ variant, channel, message, childMess
         justifyContent={variant === 'outgoing' ? 'flex-end' : 'flex-start'}
         style={styles.messageContainer}
       >
-        <PressBox onPress={() => onPress?.(parentMessage)}>{parentMessageComponent}</PressBox>
+        <PressBox onPress={() => onPress?.(parentMessage, childMessage)}>{parentMessageComponent}</PressBox>
       </Box>
     </Box>
   );

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { User } from '@sendbird/chat';
+import {
+  Avatar,
+  Box,
+  Icon,
+  PressBox,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { SendbirdFileMessage, SendbirdGroupChannel, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+
+const AVATAR_LIMIT = 5;
+
+type Props = {
+  channel: SendbirdGroupChannel;
+  message: SendbirdMessage;
+  onPress?: (message: SendbirdUserMessage | SendbirdFileMessage) => void;
+};
+
+const createRepliedUserAvatars = (mostRepliedUsers: User[]) => {
+  if (!mostRepliedUsers || mostRepliedUsers.length === 0) return null;
+
+  const { palette } = useUIKitTheme();
+
+  return mostRepliedUsers.slice(0, AVATAR_LIMIT).map((user, index) => {
+    if (index < AVATAR_LIMIT - 1) {
+      return (
+        <Box style={styles.avatarContainer} key={index}>
+          <Avatar size={20} uri={user?.profileUrl}></Avatar>
+        </Box>
+      );
+    } else {
+      return (
+        <Box style={styles.avatarContainer} key={index}>
+          <Avatar size={20} uri={user?.profileUrl}></Avatar>
+          <Box style={styles.avatarOverlay} backgroundColor={palette.overlay01}>
+            <Icon icon={'plus'} size={14} style={styles.plusIcon} color={'white'} />
+          </Box>
+        </Box>
+      );
+    }
+  });
+};
+
+const GroupChannelMessageReplyInfo = ({ channel, message, onPress }: Props) => {
+  const { STRINGS } = useLocalization();
+  const { select, palette } = useUIKitTheme();
+
+  if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
+
+  const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLY_COUNT(message.threadInfo.replyCount || 0, 99);
+  const onPressReply = () => {
+    onPress?.(message as SendbirdUserMessage | SendbirdFileMessage);
+  };
+
+  return (
+    <PressBox onPress={onPressReply} style={styles.replyContainer}>
+      {createRepliedUserAvatars(message.threadInfo.mostRepliedUsers)}
+      <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })}>
+        {replyCountText}
+      </Text>
+    </PressBox>
+  );
+};
+
+const styles = createStyleSheet({
+  replyContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  avatarContainer: {
+    marginRight: 4,
+  },
+  avatarOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 10,
+  },
+  plusIcon: {
+    position: 'absolute',
+    top: 3,
+    left: 3,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+export default React.memo(GroupChannelMessageReplyInfo);

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -33,6 +33,7 @@ import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator
 import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
 import GroupChannelMessageOutgoingStatus from './GroupChannelMessageOutgoingStatus';
 import GroupChannelMessageParentMessage from './GroupChannelMessageParentMessage';
+import GroupChannelMessageReplyInfo from './GroupChannelMessageReplyInfo';
 
 const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
   channel,
@@ -41,14 +42,16 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   onLongPress,
   onPressParentMessage,
   onShowUserProfile,
+  onReplyInThreadMessage,
   enableMessageGrouping,
   focused,
   prevMessage,
   nextMessage,
+  hideParentMessage,
 }) => {
   const playerUnsubscribes = useRef<(() => void)[]>([]);
   const { palette } = useUIKitTheme();
-  const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
+  const { sbOptions, currentUser, mentionManager, voiceMessageStatusManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { mediaService, playerService } = usePlatformService();
   const { groupWithPrev, groupWithNext } = calcMessageGrouping(
@@ -56,8 +59,12 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     message,
     prevMessage,
     nextMessage,
+    sbOptions.uikit.groupChannel.channel.replyType === 'thread',
+    shouldRenderParentMessage(message, hideParentMessage),
   );
 
+  const variant = isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming';
+
   const reactionChildren = useIIFE(() => {
     const configs = sbOptions.uikitWithAppInfo.groupChannel.channel;
     if (
@@ -70,6 +77,12 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     return null;
   });
 
+  const replyInfo = useIIFE(() => {
+    if (sbOptions.uikit.groupChannel.channel.replyType !== 'thread') return null;
+    if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
+    return <GroupChannelMessageReplyInfo channel={channel} message={message} onPress={onReplyInThreadMessage} />;
+  });
+
   const resetPlayer = async () => {
     playerUnsubscribes.current.forEach((unsubscribe) => {
       try {
@@ -80,8 +93,6 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     await playerService.reset();
   };
 
-  const variant = isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming';
-
   const messageProps: Omit<GroupChannelMessageProps<SendbirdMessage>, 'message'> = {
     channel,
     variant,
@@ -111,6 +122,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           let seekFinished = !shouldSeekToTime;
 
           const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
+            voiceMessageStatusManager.setCurrentTime(message.channelUrl, message.messageId, currentTime);
             if (seekFinished) {
               setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
             }
@@ -146,10 +158,11 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     groupedWithPrev: groupWithPrev,
     groupedWithNext: groupWithNext,
     children: reactionChildren,
+    replyInfo: replyInfo,
     sendingStatus: isMyMessage(message, currentUser?.userId) ? (
       <GroupChannelMessageOutgoingStatus channel={channel} message={message} />
     ) : null,
-    parentMessage: shouldRenderParentMessage(message) ? (
+    parentMessage: shouldRenderParentMessage(message, hideParentMessage) ? (
       <GroupChannelMessageParentMessage
         channel={channel}
         message={message.parentMessage}
@@ -261,6 +274,9 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           <GroupChannelMessage.VoiceFile
             message={message as SendbirdFileMessage}
             durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
+            initialCurrentTime={voiceMessageStatusManager.getCurrentTime(message.channelUrl, message.messageId)}
+            onSubscribeStatus={voiceMessageStatusManager.subscribe}
+            onUnsubscribeStatus={voiceMessageStatusManager.unsubscribe}
             onUnmount={() => {
               if (isVoiceMessage(message) && playerService.uri === message.url) {
                 resetPlayer();
@@ -284,7 +300,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
       } else {
         return 16;
       }
-    } else if (nextMessage && shouldRenderParentMessage(nextMessage)) {
+    } else if (nextMessage && shouldRenderParentMessage(nextMessage, hideParentMessage)) {
       return 16;
     } else if (groupWithNext) {
       return 2;