仅管理员和发言人展示

src/page/Meeting/index.module.scss

@@ -572,6 +572,15 @@
           }
         }
       }
+
+      .meetingContentBodyLeftBlock {
+        position: absolute;
+        background-color: #1F2022;
+        z-index: 2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
 
     .meetingContentFooter {

src/page/Meeting/index.tsx

@@ -130,6 +130,7 @@ const Meeting: React.FC = () => {
     '我要发言',
   ])
   const [roomUserItem, setRoomUserItem] = useState<any>(null)
+  const [isAdmin, setIsAdmin] = useState<number>(0)
   const [api, contextHolder] = notification.useNotification({
     stack: {
       threshold: 3
@@ -139,6 +140,7 @@ const Meeting: React.FC = () => {
   const msgTips = '您不是管理员或发言人，无法开启此功能！'
   useEffect(() => {
     let time = null as any;
+    setSizeAndPosition()
     setUser(userInfo)
     setTimeout(() => {
       window.electron.getIsMaximized().then((res: boolean) => {
@@ -215,6 +217,7 @@ const Meeting: React.FC = () => {
     window.addEventListener('offline', handleNetworkChange);
     time = setInterval(() => {
       setCurrentSeconds(currentSeconds++)
+      setSizeAndPosition()
     }, 1000)
     return () => {
       window.removeEventListener('customStorageChange', handleCustomStorageChange);
@@ -442,9 +445,50 @@ const Meeting: React.FC = () => {
           item.isShow = true;
         }
       });
+      setIsAdmin(res.filter((item: any) => (item.roleId === '1' || item.isRoomManager) && item.isRoom).length)
       return res
     })
   }
+  // 获取dom信息
+  const getElementSizeAndPosition = (element: HTMLElement): { width: number; height: number; top: number; left: number } => {
+    const width = element.offsetWidth;
+    const height = element.offsetHeight;
+    const rect = element.getBoundingClientRect();
+    const top = rect.top;
+    const left = rect.left;
+    return { width, height, top, left };
+  }
+  // 设置dom
+  const setSizeAndPosition = (): void => {
+    const meetingContentBodyLeftDom = document.getElementById('meetingContentBodyLeft') as HTMLElement;
+    const meetingContentBodyLeftBlock = document.getElementById('meetingContentBodyLeftBlock') as HTMLElement;
+    if (meetingContentBodyLeftDom) {
+      const info = getElementSizeAndPosition(meetingContentBodyLeftDom);
+      if (meetingContentBodyLeftBlock) {
+        meetingContentBodyLeftBlock.style.width = `${info.width}px`
+        meetingContentBodyLeftBlock.style.height = `${info.height}px`
+        meetingContentBodyLeftBlock.style.top = `${info.top}px`
+        meetingContentBodyLeftBlock.style.left = `0`
+      }
+    }
+  }
+  // 刷新
+  const refreshVideoView = async (userItem: any): Promise<void> => {
+    if (userItem.uid === userInfo.uid) {
+      await agora.setupLocalVideo({
+        uid: Number(userItem.uid),
+        view: document.getElementById(`video-${userItem.uid}`),
+        channelId: state.channelId,
+        sourceType: VideoSourceType.VideoSourceCameraPrimary,
+      })
+    } else {
+      await agora.setupRemoteVideoJoin({
+        uid: Number(userItem.uid),
+        view: document.getElementById(`video-${userItem.uid}`),
+        channelId: state.channelId,
+      })
+    }
+  }
   // 替换数据
   const setAllUserListData = async (key: string, item: any, callBack?: Function): Promise<void> => {
     switch (key) {
@@ -457,6 +501,8 @@ const Meeting: React.FC = () => {
             for (const key in item.user) {
               userItem[key] = item.user[key];
             }
+            userItem.isAdmin = item.user.roleId === '1' || item.user.isRoomManager;
+            refreshVideoView(userItem)
           }
           if (key === 'ManagerRefresh') {
             callBack && callBack()
@@ -472,9 +518,13 @@ const Meeting: React.FC = () => {
               userItem[key] = item.user[key];
             }
             userItem.isRoom = true;
+            userItem.isAdmin = item.user.roleId === '1' || item.user.isRoomManager;
+            refreshVideoView(userItem)
             return [...res]
           } else {
             item.user.isRoom = true;
+            item.user.isAdmin = item.user.roleId === '1' || item.user.isRoomManager;
+            refreshVideoView(item.user)
             return [...res, item.user]
           }
         })
@@ -484,6 +534,7 @@ const Meeting: React.FC = () => {
           let userItem = res.find((row: any) => row.uid === item.uid)
           if (userItem) {
             userItem.isRoom = false
+            userItem.isAdmin = false
           }
           return res
         })
@@ -793,6 +844,7 @@ const Meeting: React.FC = () => {
         res.data.forEach((item: any) => {
           item.isShow = true;
           item.isRoom = true;
+          item.isAdmin = item.roleId === '1' || item.isRoomManager
         })
         setRoomUserList(res.data)
         getUserRoomInfo().then(async (res) => {
@@ -1084,10 +1136,10 @@ const Meeting: React.FC = () => {
         </div>
         <div className={styles.meetingContent}>
           <div className={styles.meetingContentBody}>
-            <div className={`${styles.meetingContentBodyLeft} drag`}>
+            <div className={`${styles.meetingContentBodyLeft} drag`} id='meetingContentBodyLeft'>
               <div className={getMeetingContentBodyLeftModeClass()} id='videoView'>
                 {roomUserList.map((item: any, index: number) => {
-                  return (index <= 19 && item.isRoom ? <div
+                  return (index <= 19 && item.isRoom && item.isAdmin ? <div
                     id={item.uid}
                     className={`${styles.meetingContentSwiperCard}`}
                     key={index}
@@ -1232,6 +1284,9 @@ const Meeting: React.FC = () => {
                   </div> : null}
               </div>
             </div>
+            {isAdmin ? null : <div className={styles.meetingContentBodyLeftBlock} id='meetingContentBodyLeftBlock'>
+              <img src={ImageUrl.icon46} alt="" />
+            </div>}
             {
               (statusList.userList || statusList.userChatList) ? (
                 <div className={styles.meetingContentBodyRight}>

src/utils/package/imageUrl.ts

@@ -57,6 +57,7 @@ import icon43 from '@/assets/icon43.png'
 import icon44 from '@/assets/icon44.png'
 import icon45 from '@/assets/icon45.png'
 import icon45Active from '@/assets/icon45-active.png'
+import icon46 from '@/assets/icon46.png'
 export default {
   error,
   icon,
@@ -117,4 +118,5 @@ export default {
   icon44,
   icon45,
   icon45Active,
+  icon46,
 }