refactor: remove return in effect of voice

src/common/component/Voice.tsx

@@ -1,5 +1,5 @@
 import AgoraRTC, { IMicrophoneAudioTrack } from 'agora-rtc-sdk-ng';
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useGetAgoraConfigQuery, useGetAgoraVoicingListQuery, useLazyGetAgoraTokenQuery } from '../../app/services/server';
 import { updateChannelVisibleAside } from '../../app/slices/channels';
@@ -111,11 +111,12 @@ const Voice = () => {
         }
 
         return () => {
-            if (window.VOICE_CLIENT && localTrack) {
-                localTrack.close();
-                localTrack = null;
-                window.VOICE_CLIENT.leave();
-            }
+            // if (window.VOICE_CLIENT && localTrack) {
+            //     localTrack.close();
+            //     localTrack = null;
+            //     window.VOICE_CLIENT.leave();
+            //     dispatch(updateVoicingInfo(null));
+            // }
             // window.VOICE_CLIENT=null
         };
     }, []);
@@ -233,4 +234,4 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
     };
 };
 export { useVoice };
-export default Voice;
+export default memo(Voice);

src/routes/chat/VoiceChat/index.tsx

@@ -55,9 +55,14 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
         <Tooltip disabled={visible} tip={t("voice")} placement="left">
             <li className={`relative group`} >
                 <IconHeadphone className={visible ? "fill-gray-600" : "fill-gray-500"} role="button" onClick={joinedAtThisContext ? toggleDashboard : handleJoin} />
-                {visible ? null : memberCount > 0 ? <span className={`${badgeClass} flex-center font-bold text-[10px]`}>{memberCount}</span> : <span className={`${badgeClass} hidden text-xs group-hover:flex-center`}>
-                    <em className='not-italic'>+</em>
-                </span>}
+                {visible ?
+                    null
+                    : <>
+                        {memberCount > 0 && <span className={`${badgeClass} flex-center font-bold text-[10px] group-hover:invisible`}>{memberCount}</span>}
+                        <span className={`${badgeClass} text-xs flex-center invisible group-hover:visible`}>
+                            <em className='not-italic'>+</em>
+                        </span>
+                    </>}
             </li>
         </Tooltip>
     );