优化

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,62 +343,62 @@ const Meeting: React.FC = () => {
       message.error('网络已断开!')
     }
   }
+  // 渲染视频
+  const renderVideo = async (uid: string | number): Promise<void> => {
+    if (uid === userInfo.uid || uid === userInfo.screenShareId) {
+      if (String(uid).length === 9) {
+        // 共享屏幕
+        setCurrentLookUserStatus(2)
+        setTimeout(() => {
+          agora.setupLocalVideo({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-screen`) as HTMLElement,
+            channelId: state.channelId,
+            sourceType: VideoSourceType.VideoSourceScreen,
+          })
+        }, 1000);
+      } else {
+        setCurrentLookUserStatus(1)
+        // 摄像头
+        setTimeout(() => {
+          agora.setupLocalVideo({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
+            channelId: state.channelId,
+            sourceType: VideoSourceType.VideoSourceCameraPrimary,
+          })
+        }, 1000);
+      }
+    } else {
+      if (String(uid).length === 9) {
+        // 摄像头
+        setCurrentLookUserStatus(3)
+        setTimeout(() => {
+          agora.setupRemoteVideoJoin({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
+            channelId: state.channelId,
+          })
+        }, 1000);
+      } else {
+        // 共享屏幕
+        setCurrentLookUserStatus(4)
+        setTimeout(() => {
+          agora.setupRemoteVideoJoin({
+            uid: Number(uid),
+            view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
+            channelId: state.channelId,
+          })
+        }, 1000);
+      }
+    }
+  }
   // 全员观看
   const getShowUser = async (): Promise<void> => {
     await GetShowUser(state.channelId).then(async (res) => {
       if (res.code === 200 && res.data) {
-        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),
-                view: document.getElementById(`video-source-screen`) as HTMLElement,
-                channelId: state.channelId,
-                sourceType: VideoSourceType.VideoSourceScreen,
-              })
-            }, 1000);
-          } else {
-            setCurrentLookUserStatus(1)
-            // 摄像头
-            setTimeout(() => {
-              agora.setupLocalVideo({
-                uid: Number(res.data),
-                view: document.getElementById(`video-source-camera-primary`) as HTMLElement,
-                channelId: state.channelId,
-                sourceType: VideoSourceType.VideoSourceCameraPrimary,
-              })
-            }, 1000);
-          }
-        } else {
-          if (String(res.data).length === 9) {
-            // 摄像头
-            setCurrentLookUserStatus(3)
-            setTimeout(() => {
-              agora.setupRemoteVideoJoin({
-                uid: Number(res.data),
-                view: document.getElementById(`video-source-remote-camera`) as HTMLElement,
-                channelId: state.channelId,
-              })
-            }, 1000);
-          } else {
-            // 共享屏幕
-            setCurrentLookUserStatus(4)
-            setTimeout(() => {
-              agora.setupRemoteVideoJoin({
-                uid: Number(res.data),
-                view: document.getElementById(`video-source-remote-screen`) as HTMLElement,
-                channelId: state.channelId,
-              })
-            }, 1000);
-          }
-        }
+        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}`}>