fix: video bugs

src/common/component/Voice.tsx

@@ -7,19 +7,11 @@ import { addVoiceMember, removeVoiceMember, updateConnectionState, updateDeafenS
 import { useAppSelector } from '../../app/store';
 import AudioJoin from '../../assets/join.wav';
 import { playAgoraVideo } from '../utils';
-// import { compareVersion } from '../utils';
-// type Props = {}
 AgoraRTC.setLogLevel(process.env.NODE_ENV === 'development' ? 0 : 4);
 window.VOICE_TRACK_MAP = window.VOICE_TRACK_MAP ?? {};
 window.VIDEO_TRACK_MAP = window.VIDEO_TRACK_MAP ?? {};
 // let tmpUids: number[] = [];
 const Voice = () => {
-    // const { serverVersion } = useAppSelector(store => {
-    //     return {
-    //         serverVersion: store.server.version ?? 0,
-    //     };
-    // });
-    // const skipAgoraStatusCheck = compareVersion(serverVersion, '0.3.5') >= 0;
     const { data: enabled } = useGetAgoraStatusQuery();
     useGetAgoraChannelsQuery({ page_no: 0, page_size: 100 }, {
         skip: !enabled || !navigator.onLine,
@@ -66,6 +58,9 @@ const Voice = () => {
                         case "Quit":
                         case "ServerTimeOut": {
                             dispatch(removeVoiceMember(+user.uid as number));
+                            // clear tracks
+                            window.VOICE_TRACK_MAP[+user.uid] = null;
+                            window.VIDEO_TRACK_MAP[+user.uid] = null;
                         }
                             break;
                         default:
@@ -131,12 +126,8 @@ const Voice = () => {
 
         };
     }, []);
-
-
     return null;
 };
-// let localAudioTrack: IMicrophoneAudioTrack | null = null;
-// let localVideoTrack: ICameraVideoTrack | null = null;
 type VoiceProps = {
     id: number,
     context?: "channel" | "dm"
@@ -253,14 +244,20 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
     };
     const setMute = (mute: boolean) => {
         const localAudioTrack = window.VOICE_TRACK_MAP[loginUid] as IMicrophoneAudioTrack;
-        if (localAudioTrack) {
+        if (!localAudioTrack) return;
         localAudioTrack.setMuted(mute);
-            dispatch(updateMuteStatus(mute));
+        if (mute == false && voicingInfo?.deafen) {
+            // 远端音频，恢复原音
+            Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
+                audioTrack?.setVolume(100);
+            });
+            dispatch(updateDeafenStatus(false));
         }
+        dispatch(updateMuteStatus(mute));
     };
     const setDeafen = (deafen: boolean) => {
         const localAudioTrack = window.VOICE_TRACK_MAP[loginUid] as IMicrophoneAudioTrack;
-        if (localAudioTrack) {
+        if (!localAudioTrack) return;
         if (deafen) {
             localAudioTrack.setMuted(true);
             // 远端音频，全部静音
@@ -275,7 +272,6 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
             });
         }
         dispatch(updateDeafenStatus(deafen));
-        }
     };
     const joinedAtThisContext = voicingInfo ? (voicingInfo.id == id && voicingInfo.context == context) : false;
     return {

src/routes/chat/RTCWidget.tsx

@@ -49,14 +49,14 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
                         <IconCallOff onClick={leave} role="button" className="fill-red-600" />
                     </Tooltip>
                 </div>
-                <div className="flex items-center gap-2 mt-3">
+                <div className={clsx("flex items-center gap-2 mt-3 text-sm font-semibold text-gray-800 dark:text-gray-200")}>
-                    <button onClick={voicingInfo.video ? closeCamera : openCamera} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.video ? "bg-green-700" : "bg-white/50 dark:bg-black/50")}>
+                    <button onClick={voicingInfo.video ? closeCamera : openCamera} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.video ? "bg-green-700 text-gray-200" : "bg-white/50 dark:bg-black/50 ")}>
-                        <IconCamera className="fill-gray-800 dark:fill-gray-200 w-6 h-6" />
+                        <IconCamera className={clsx("dark:fill-gray-200 w-6 h-6", voicingInfo.video ? "fill-gray-200" : "fill-gray-800")} />
-                        <span className='text-sm text-gray-800 dark:text-gray-200 font-semibold'>Video</span>
+                        <span>Video</span>
                     </button>
                     <button className='rounded-lg py-2 px-5 bg-white/50 dark:bg-black/50 flex items-center gap-1'>
                         <IconScreen className="fill-gray-800 dark:fill-gray-200 w-6 h-6" />
-                        <span className='text-sm text-gray-800 dark:text-gray-200 font-semibold'>Screen</span>
+                        <span>Screen</span>
                     </button>
                 </div>
             </div>