From fbf6a45c172a64162249ce61ae7b17087ddf7b12 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 25 Apr 2023 20:11:55 +0800
Subject: [PATCH] fix: video bugs

---
 src/common/component/Voice.tsx | 56 ++++++++++++++++------------------
 src/routes/chat/RTCWidget.tsx  | 10 +++---
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/common/component/Voice.tsx b/src/common/component/Voice.tsx
index b55ef91f..1039b016 100644
--- a/src/common/component/Voice.tsx
+++ b/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,29 +244,34 @@ const useVoice = ({ id, context = "channel" }: VoiceProps) => {
     };
     const setMute = (mute: boolean) => {
         const localAudioTrack = window.VOICE_TRACK_MAP[loginUid] as IMicrophoneAudioTrack;
-        if (localAudioTrack) {
-            localAudioTrack.setMuted(mute);
-            dispatch(updateMuteStatus(mute));
+        if (!localAudioTrack) return;
+        localAudioTrack.setMuted(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 (deafen) {
-                localAudioTrack.setMuted(true);
-                // 远端音频，全部静音
-                Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
-                    audioTrack?.setVolume(0);
-                });
-            } else {
-                localAudioTrack.setMuted(false);
-                // 远端音频，恢复原音
-                Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
-                    audioTrack?.setVolume(100);
-                });
-            }
-            dispatch(updateDeafenStatus(deafen));
+        if (!localAudioTrack) return;
+        if (deafen) {
+            localAudioTrack.setMuted(true);
+            // 远端音频，全部静音
+            Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
+                audioTrack?.setVolume(0);
+            });
+        } else {
+            localAudioTrack.setMuted(false);
+            // 远端音频，恢复原音
+            Object.entries(window.VOICE_TRACK_MAP).forEach(([, audioTrack]) => {
+                audioTrack?.setVolume(100);
+            });
         }
+        dispatch(updateDeafenStatus(deafen));
     };
     const joinedAtThisContext = voicingInfo ? (voicingInfo.id == id && voicingInfo.context == context) : false;
     return {
diff --git a/src/routes/chat/RTCWidget.tsx b/src/routes/chat/RTCWidget.tsx
index 01083c37..d847ae26 100644
--- a/src/routes/chat/RTCWidget.tsx
+++ b/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">
-                    <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")}>
-                        <IconCamera 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'>Video</span>
+                <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 text-gray-200" : "bg-white/50 dark:bg-black/50 ")}>
+                        <IconCamera className={clsx("dark:fill-gray-200 w-6 h-6", voicingInfo.video ? "fill-gray-200" : "fill-gray-800")} />
+                        <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>