视频显示优化

src/page/Meeting/index.tsx

@@ -177,10 +177,15 @@ const Meeting: React.FC = () => {
           }, 1000);
         }
       },
-      onUserOffline: async (_info: any, remoteUid: any, _reason: any) => {
+      onUserOffline: async (info: any, remoteUid: any, _reason: any) => {
         if (String(remoteUid).length === 9) {
           setIsShare(null)
         }
+        await agora.setupRemoteVideo({
+          uid: Number(remoteUid),
+          view: null,
+          channelId: info.channelId,
+        });
         setCurrentVideoId((res: any) => {
           if (Number(res) === remoteUid) {
             getShowUser();
@@ -439,8 +444,27 @@ const Meeting: React.FC = () => {
       return res
     })
   }
+  // 刷新视图
+  const RefreshVideoView = async (list: any): Promise<void> => {
+    list.forEach(async (item: any) => {
+      if (item.uid === userInfo.uid) {
+        await agora.setupLocalVideo({
+          uid: Number(item.uid),
+          view: document.getElementById(`video-${item.uid}`),
+          channelId: state.channelId,
+          sourceType: VideoSourceType.VideoSourceCameraPrimary,
+        })
+      } else {
+        await agora.setupRemoteVideo({
+          uid: Number(item.uid),
+          view: document.getElementById(`video-${item.uid}`),
+          channelId: state.channelId,
+        })
+      }
+    });
+  }
   // 替换数据
-  const setAllUserListData = (key: string, item: any, callBack?: Function): void => {
+  const setAllUserListData = async (key: string, item: any, callBack?: Function): Promise<void> => {
     switch (key) {
       case 'OperMicr':
       case 'OperCamera':
@@ -465,6 +489,9 @@ const Meeting: React.FC = () => {
         setRoomUserList((res: any) => {
           let userItemIndex = res.findIndex((row: any) => row.uid === item.uid)
           res.splice(userItemIndex, 1)
+          setTimeout(() => {
+            RefreshVideoView(res)
+          }, 1000);
           return res
         })
         break;
@@ -1059,9 +1086,10 @@ const Meeting: React.FC = () => {
         <div className={styles.meetingContent}>
           <div className={styles.meetingContentBody}>
             <div className={`${styles.meetingContentBodyLeft} drag`}>
-              <div className={getMeetingContentBodyLeftModeClass()} >
+              <div className={getMeetingContentBodyLeftModeClass()} id='videoView'>
                 {roomUserList.map((item: any, index: number) => {
                   return (index <= 19 ? <div
+                    id={item.uid}
                     className={`${styles.meetingContentSwiperCard}`}
                     key={index}
                     onClick={() => {