优化

src/page/Meeting/index.tsx

@@ -121,8 +121,6 @@ const Meeting: React.FC = () => {
   const [mediaStream, setMediaStream] = useState<any>('')
   const [currentLookUserStatus, setCurrentLookUserStatus] = useState<1 | 2 | 3 | 4>(1)
   let userInfo = JSON.parse(storage.getItem('user') as string)
-  let allUserListArr = [] as any;
-  let currentLookUserAccountId = '' as string;
   useEffect(() => {
     let time = null as any;
     setUser(userInfo)
@@ -181,6 +179,7 @@ const Meeting: React.FC = () => {
           view: null,
           channelId: info.channelId,
         })
+        getRoomUser()
         setTimeout(() => {
           getRoomUser()
         }, 1000);
@@ -234,7 +233,14 @@ const Meeting: React.FC = () => {
   }, [(navigator as any).connection.effectiveType]);
 
   useEffect(() => {
-    onSignalr((item: any) => {
+    let currentVideoUserItem = allUserList.find((item: any) => item.uid === currentVideoId || item.screenShareId === currentVideoId)
+    if (currentVideoUserItem) {
+      setCurrentLookUserAccount(currentVideoUserItem)
+    }
+  }, [currentVideoId]);
+
+  useEffect(() => {
+    onSignalr(async (item: any) => {
       switch (item.key) {
         case 'ReceiveMessage':
           let meetingUserChatDom = document.getElementById('meetingUserChat') as HTMLElement;
@@ -246,7 +252,15 @@ const Meeting: React.FC = () => {
           setChatList((newChatList: any) => [...newChatList, item])
           break;
         case 'RefreshUserList':
-          getRoomUser()
+          getRoomUser((list: any) => {
+            setCurrentVideoId(res => {
+              let currentVideoUserItem = list.find((item: any) => item.uid === res || item.screenShareId === res)
+              if (currentVideoUserItem) {
+                setCurrentLookUserAccount(currentVideoUserItem)
+              }
+              return res
+            })
+          })
           break;
         case 'Operation':
           // 1:全员退出会议
@@ -329,22 +343,15 @@ const Meeting: React.FC = () => {
       message.error('网络已断开!')
     }
   }
-  // 全员观看
+  // 渲染视频
-  const getShowUser = async (): Promise<void> => {
+  const renderVideo = async (uid: string | number): Promise<void> => {
-    await GetShowUser(state.channelId).then(async (res) => {
+    if (uid === userInfo.uid || uid === userInfo.screenShareId) {
-      if (res.code === 200 && res.data) {
+      if (String(uid).length === 9) {
-        currentLookUserAccountId = res.data
-        let userItem = allUserListArr.find((item: any) => item.uid === res.data || item.screenShareId === res.data)
-        if (userItem) {
-          setCurrentLookUserAccount(userItem)
-        }
-        if (res.data === userInfo.uid || res.data === userInfo.screenShareId) {
-          if (String(res.data).length === 9) {
         // 共享屏幕
         setCurrentLookUserStatus(2)
         setTimeout(() => {
           agora.setupLocalVideo({
-                uid: Number(res.data),
+            uid: Number(uid),
             view: document.getElementById(`video-source-screen`) as HTMLElement,
             channelId: state.channelId,
             sourceType: VideoSourceType.VideoSourceScreen,
@@ -355,7 +362,7 @@ const Meeting: React.FC = () => {
         // 摄像头
         setTimeout(() => {
           agora.setupLocalVideo({
-                uid: Number(res.data),
+            uid: Number(uid),
             view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
             channelId: state.channelId,
             sourceType: VideoSourceType.VideoSourceCameraPrimary,
@@ -363,12 +370,12 @@ const Meeting: React.FC = () => {
         }, 1000);
       }
     } else {
-          if (String(res.data).length === 9) {
+      if (String(uid).length === 9) {
         // 摄像头
         setCurrentLookUserStatus(3)
         setTimeout(() => {
           agora.setupRemoteVideoJoin({
-                uid: Number(res.data),
+            uid: Number(uid),
             view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
             channelId: state.channelId,
           })
@@ -378,7 +385,7 @@ const Meeting: React.FC = () => {
         setCurrentLookUserStatus(4)
         setTimeout(() => {
           agora.setupRemoteVideoJoin({
-                uid: Number(res.data),
+            uid: Number(uid),
             view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
             channelId: state.channelId,
           })
@@ -386,6 +393,13 @@ const Meeting: React.FC = () => {
       }
     }
   }
+  // 全员观看
+  const getShowUser = async (): Promise<void> => {
+    await GetShowUser(state.channelId).then(async (res) => {
+      if (res.code === 200 && res.data) {
+        setCurrentVideoId(res.data)
+        renderVideo(res.data)
+      }
     })
   }
   // 加入房间时间
@@ -576,7 +590,7 @@ const Meeting: React.FC = () => {
   }
 
   // 获取房间用户
-  const getRoomUser = async (): Promise<void> => {
+  const getRoomUser = async (callback?: Function): Promise<void> => {
     Promise.all([
       GetRoomUser(state.channelId),
       GetUserList({
@@ -608,12 +622,10 @@ const Meeting: React.FC = () => {
             item.isRoom = false;
           }
         });
-        allUserListArr = res[0].data
-        let userItem = allUserListArr.find((item: any) => item.uid === currentLookUserAccountId || item.screenShareId === currentLookUserAccountId)
-        if (userItem) {
-          setCurrentLookUserAccount(userItem)
-        }
         setAllUserList(res[1].data.items);
+        if (callback) {
+          callback(res[1].data.items)
+        }
       }
     })
   }
@@ -782,6 +794,7 @@ const Meeting: React.FC = () => {
                         key={index}
                         onClick={() => {
                           setCurrentVideoId(item.uid)
+                          renderVideo(item.uid)
                         }}
                       >
                         <div className={`${styles.meetingContentSwiperCardVdeio} ${currentVideoId === item.uid ? styles.active : ''}`} id={`video-${item.uid}`}>