feat: reconnecting detect

src/routes/chat/RTCWidget.tsx

@@ -1,4 +1,6 @@
 // import React from 'react';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
 import { useAppSelector } from '../../app/store';
 import User from '../../common/component/User';
 import IconMic from '../../assets/icons/mic.on.svg';
@@ -9,7 +11,6 @@ import IconSoundOff from '../../assets/icons/sound.off.svg';
 import { useVoice } from '../../common/component/Voice';
 import Signal from '../../common/component/Signal';
 import Tooltip from '../../common/component/Tooltip';
-import { useTranslation } from 'react-i18next';
 
 type Props = {
     id: number,
@@ -29,6 +30,7 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
     if (!loginUser || !voicingInfo || joining) return null;
     const name = voicingInfo.context == "channel" ? channelData[voicingInfo.id]?.name : userData[voicingInfo.id]?.name;
     if (!name) return null;
+    const isReConnecting = voicingInfo.connectionState == "RECONNECTING";
     return (
         <div className='bg-gray-100 dark:bg-gray-900 flex flex-col p-2 rounded-3xl m-3 text-sm'>
             {/* {voicingInfo && */}
@@ -36,7 +38,7 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
                 <div className="flex flex-1 items-center gap-1">
                     <Signal strength={voicingInfo.downlinkNetworkQuality} />
                     <div className="flex flex-col">
-                        <span className='text-green-800 font-bold'>Voice Connected</span>
+                        <span className={clsx('text-green-800 font-bold', isReConnecting && `text-red-500`)}>{isReConnecting ? `Voice Reconnecting...` : `Voice Connected`}</span>
                         <span className='text-gray-600 dark:text-gray-400 text-xs truncate max-w-[170px]' >{voicingInfo.context == "channel" ? "Channel" : "DM"} / {voicingInfo.context == "channel" ? channelData[voicingInfo.id].name : userData[voicingInfo.id].name}</span>
                     </div>
                 </div>

src/routes/chat/VoiceChat/VoiceManagement.tsx

@@ -12,7 +12,6 @@ import IconMicOff from '../../../assets/icons/mic.off.svg';
 import StyledButton from '../../../common/component/styled/Button';
 import IconCallOff from '../../../assets/icons/call.off.svg';
 import Tooltip from '../../../common/component/Tooltip';
-import SpeakingAnimate from './SpeakingAnimate';
 // import User from '../../../common/component/User';
 
 type Props = {
@@ -40,6 +39,14 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
             Connecting to voice channel...
         </div>;
     }
+    if (info.connectionState == "RECONNECTING") {
+        return <div className='w-full h-full flex-center flex-col gap-1 p-1 '>
+            <span className='text-red-300'>
+                Reconnecting...
+            </span>
+            <span className='text-xs text-red-500'>Please check network connection!</span>
+        </div>;
+    }
     return (
         <div className='w-full h-full py-2 flex flex-col'>
             <ul className='flex grow flex-col'>
@@ -95,6 +102,7 @@ const VoiceManagement = ({ info, setMute, setDeafen, leave }: Props) => {
                     </Tooltip>
                 </StyledButton>
             </div>
+
         </div>
     );
 };