chore: organize code

Author: OnestarLee

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

@@ -26,7 +26,8 @@ type Props = GroupChannelMessageProps<
     durationMetaArrayKey?: string;
     onUnmount: () => void;
     initialCurrentTime?: number;
-    onSubscribe?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+    onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+    onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
   }
 >;
 const VoiceFileMessage = (props: Props) => {
@@ -38,7 +39,8 @@ const VoiceFileMessage = (props: Props) => {
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
     onUnmount,
     initialCurrentTime,
-    onSubscribe,
+    onSubscribeStatus,
+    onUnsubscribeStatus,
   } = props;
 
   const { colors } = useUIKitTheme();
@@ -61,9 +63,13 @@ const VoiceFileMessage = (props: Props) => {
   }, []);
 
   useEffect(() => {
-    onSubscribe?.(props.channel.url, props.message.messageId, (currentTime) => {
+    const updateCurrentTime = (currentTime: number) => {
       setState((prev) => ({ ...prev, currentTime }));
-    });
+    };
+    onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    return () => {
+      onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    };
   }, []);
 
   const uiColors = colors.ui.groupChannelMessage[variant];

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

@@ -27,6 +27,7 @@ import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleCon
 import type { GroupChannelProps } from '../../domain/groupChannel/types';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
+import VoiceMessageStatusManager from '../../libs/VoiceMessageStatusManager';
 import { TypingIndicatorType } from '../../types';
 import { ReactionAddons } from '../ReactionAddons';
 import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
@@ -233,11 +234,13 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
       durationMetaArrayKey?: string;
       onUnmount: () => void;
       initialCurrentTime?: number;
-      onSubscribe?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+      onSubscribeStatus?: VoiceMessageStatusManager['subscribe'];
+      onUnsubscribeStatus?: VoiceMessageStatusManager['unsubscribe'];
     } = {
       durationMetaArrayKey: VOICE_MESSAGE_META_ARRAY_DURATION_KEY,
       initialCurrentTime: voiceMessageStatusManager.getCurrentTime(message.channelUrl, message.messageId),
-      onSubscribe: voiceMessageStatusManager.subscribe,
+      onSubscribeStatus: voiceMessageStatusManager.subscribe,
+      onUnsubscribeStatus: voiceMessageStatusManager.unsubscribe,
       onUnmount: () => {
         if (isVoiceMessage(message) && playerService.uri === message.url) {
           resetPlayer();

packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx

@@ -119,8 +119,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       return Promise.allSettled([playerService.reset(), recorderService.reset()]);
     };
     const _onPressHeaderLeft = useFreshCallback(async () => {
-      await onBlurFragment();
       voiceMessageStatusManager.clear();
+      await onBlurFragment();
       onPressHeaderLeft();
     });
     const _onPressHeaderRight = useFreshCallback(async () => {

packages/uikit-react-native/src/libs/VoiceMessageStatusManager.ts

@@ -15,10 +15,14 @@ class VoiceMessageStatusManager {
     if (!this.statusMap.has(key)) {
       this.statusMap.set(key, { currentTime: 0, subscribers: new Set() });
     }
-
     this.statusMap.get(key)!.subscribers?.add(subscriber);
   };
 
+  unsubscribe = (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => {
+    const key = this.generateKey(channelUrl, messageId);
+    this.statusMap.get(key)?.subscribers?.delete(subscriber);
+  };
+
   publishAll = (): void => {
     this.statusMap.forEach((status) => {
       status.subscribers?.forEach((subscriber) => {
@@ -42,6 +46,9 @@ class VoiceMessageStatusManager {
   };
 
   clear = (): void => {
+    this.statusMap.forEach((status) => {
+      status.subscribers?.clear();
+    });
     this.statusMap.clear();
   };
 }