踢出房间&管理员

src/api/Meeting/index.ts

@@ -60,3 +60,23 @@ export const PostOpenCamera = (data: any) =>
     method: 'get',
     data
   })
+
+export const PostRoomManager = (roomId: string, data: any) =>
+  request({
+    url: `/room/manager?roomId=${roomId}`,
+    method: 'post',
+    data
+  })
+
+export const DeleteRoomManager = (roomId: string, data: any) =>
+  request({
+    url: `/room/manager?roomId=${roomId}`,
+    method: 'delete',
+    data
+  })
+
+export const GetRoomKickout = (roomNum: string, kickUid: string) =>
+  request({
+    url: `/room/kickout?roomNum=${roomNum}&kickUid=${kickUid}`,
+    method: 'get'
+  })

src/page/Meeting/index.module.scss

@@ -279,7 +279,7 @@
 
         .meetingUserList {
           height: 100%;
-          padding: 20px;
+          padding: 20px 0;
           box-sizing: border-box;
           background-color: #16191E;
           display: flex;
@@ -291,6 +291,8 @@
             align-items: center;
             justify-content: space-between;
             margin-bottom: 20px;
+            padding: 0 20px;
+            box-sizing: border-box;
 
             >span {
               color: #EEEEEE;
@@ -312,7 +314,10 @@
               display: flex;
               align-items: center;
               justify-content: space-between;
-              padding-bottom: 20px;
+              position: relative;
+              padding: 10px 20px;
+              box-sizing: border-box;
+              cursor: pointer;
 
               >div:nth-child(1) {
                 display: flex;
@@ -347,6 +352,45 @@
                   margin-left: 4px;
                 }
               }
+
+              >div:nth-child(3) {
+                position: absolute;
+                top: 60px;
+                left: 50%;
+                transform: translate(-50%, 0);
+                width: 200px;
+                z-index: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                display: none;
+                background-color: rgb(16, 19, 23);
+                padding: 20px 0;
+
+                >div {
+                  margin: 0 auto;
+                }
+
+                &::after {
+                  content: "";
+                  position: absolute;
+                  top: 0;
+                  left: 50%;
+                  transform: translateX(-50%);
+                  border-width: 0 10px 10px;
+                  border-style: solid;
+                  border-color: transparent transparent #333;
+                }
+              }
+
+              &:hover {
+                background-color: rgb(52, 52, 52);
+
+                >div:nth-child(3) {
+                  display: flex;
+                }
+              }
             }
           }
 
@@ -355,8 +399,11 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
+            padding: 0 20px;
+            box-sizing: border-box;
 
             >div {
+              font-size: 20px;
               cursor: pointer;
               background-color: #31353A;
               color: #EEEEEE;

src/page/Meeting/index.tsx

@@ -6,11 +6,10 @@ import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, Vertic
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
-import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser, PostOpenMicr, PostOpenCamera } from '@/api/Meeting';
+import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout } from '@/api/Meeting';
 import axios from 'axios';
 import ImageUrl from '@/utils/package/imageUrl'
 import agora from '@/utils/package/agora'
-import StupWizard from '@/components/StupWizard';
 import SpeakerModeModal from '@/components/SpeakerModeModal';
 import { onInvoke, onSignalr, offSignalr } from '@/utils/package/signalr';
 import dayjs from 'dayjs';
@@ -21,7 +20,6 @@ const { Column } = Table
 const Meeting: React.FC = () => {
   const navigate = useNavigate();
   const { state } = useLocation();
-  const stupWizardRef = useRef<any>();
   const speakerModeModalRef = useRef<any>();
   const [statusList, setStatusList] = useState({
     userList: false,
@@ -180,12 +178,21 @@ const Meeting: React.FC = () => {
           break;
         case 'Operation':
           // 1:全员退出会议
+          // 2:设置取消管理员
+          // 3:踢出房间
           switch (item.type) {
             case 1:
               leaveChannel()
               break;
+            case 2:
+            case 3:
+              getRoomUser()
+              break;
           }
           break;
+        case 'ForceExitRoom':
+          leaveChannel()
+          break;
       }
     })
     return () => {
@@ -258,7 +265,7 @@ const Meeting: React.FC = () => {
         postOpenCamera(true)
         break;
       case '设置向导':
-        stupWizardRef.current.changeIsStupWizard()
+
         break;
       case '录制':
         if (currentVideoId === user.account) {
@@ -365,7 +372,7 @@ const Meeting: React.FC = () => {
       case 'isRemotJoin':
         setTimeout(() => {
           getRoomUser()
-        }, 1000)
+        }, 2000)
         break;
       case 'meetingMode':
         setMeetingMode(e.value)
@@ -514,7 +521,13 @@ const Meeting: React.FC = () => {
                           })
                         }} />
                       </div>
-                      <Input placeholder="请输入用户名" className='drag' prefix={<SearchOutlined style={{ color: 'white' }} />} />
+                      <div style={{ padding: '0 14px', boxSizing: 'border-box' }}>
+                        <Input
+                          placeholder="请输入用户名"
+                          className='drag'
+                          prefix={<SearchOutlined style={{ color: 'white' }} />}
+                        />
+                      </div>
                       <div className={styles.meetingUserListContent}>
                         {roomUserList.map((item: any, index: number) =>
                           <div key={index} className='drag'>
@@ -522,13 +535,63 @@ const Meeting: React.FC = () => {
                               <div><img src={ImageUrl.avatar} alt="" /></div>
                               <span>
                                 {item.userName}
-                                {item.roleId === '1' ? <span style={{ color: '#02B188', marginLeft: '4px' }}>主持人</span> : null}
+                                {item.roleId === '1' || item.isManager ? <span style={{ color: '#02B188', marginLeft: '4px' }}>主持人</span> : null}
                               </span>
                             </div>
                             <div>
                               <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" />
                               <img src={item.enableCamera ? ImageUrl.icon23 : ImageUrl.icon23Active} alt="" />
                             </div>
+                            {item.account !== user.account && user.roleId === '1' ? <div className='drag'>
+                              {!item.isManager ? <Button
+                                type="primary"
+                                className='m-ant-btn'
+                                style={{ marginBottom: '10px', width: '80%' }}
+                                size={'small'}
+                                onClick={() => {
+                                  PostRoomManager(state.roomId, [item.id]).then(res => {
+                                    if (res.code === 200) {
+                                      onInvoke('sendOper', {
+                                        roomNum: state.channelId,
+                                        type: 2,
+                                      })
+                                    }
+                                  })
+                                }}
+                              >设为管理员</Button> : <Button
+                                type="primary"
+                                className='m-ant-btn'
+                                style={{ marginBottom: '10px', width: '80%' }}
+                                size={'small'}
+                                onClick={() => {
+                                  DeleteRoomManager(state.roomId, [item.id]).then(res => {
+                                    if (res.code === 200) {
+                                      onInvoke('sendOper', {
+                                        roomNum: state.channelId,
+                                        type: 2,
+                                      })
+                                    }
+                                  })
+                                }}
+                              >取消管理员</Button>}
+
+                              <Button
+                                type="primary"
+                                className='m-ant-btn'
+                                style={{ width: '80%' }}
+                                size={'small'}
+                                onClick={() => {
+                                  GetRoomKickout(state.channelId, item.id).then(res => {
+                                    if (res.code === 200) {
+                                      onInvoke('sendOper', {
+                                        roomNum: state.channelId,
+                                        type: 3,
+                                      })
+                                    }
+                                  })
+                                }}
+                              >踢出房间</Button>
+                            </div> : null}
                           </div>
                         )}
                       </div>
@@ -645,7 +708,6 @@ const Meeting: React.FC = () => {
           </div>
         </div>
       </Modal>
-      <StupWizard ref={stupWizardRef} />
       <Modal
         title="共享文件"
         open={isSharedFilesModel}
@@ -814,7 +876,7 @@ const meetingContentUser = (item: any) => {
   return (
     <>
       <div className={styles.meetingContentUser}>
-        {item.roleId === '1' ? <div className={styles.meetingContentUserRole}>
+        {item.roleId === '1' || item.isManager ? <div className={styles.meetingContentUserRole}>
           <img src={ImageUrl.icon32} alt="" />
         </div> : null}
         <div className={styles.meetingContentUserName}>

src/utils/package/signalr.ts

@@ -35,6 +35,11 @@ export const onSignalr = (callBack: Function) => {
         type
       })
     });
+    connection.on("ForceExitRoom", () => {
+      callBack({
+        key: 'ForceExitRoom',
+      })
+    });
   }
 }
 export const offSignalr = () => {
@@ -42,6 +47,7 @@ export const offSignalr = () => {
     connection.off('ReceiveMessage');
     connection.off('RefreshUserList');
     connection.off('Operation');
+    connection.off('ForceExitRoom');
   }
 }
 export const onInvoke = async (str: string, data: any) => {
@@ -57,6 +63,8 @@ export const onInvoke = async (str: string, data: any) => {
       break;
     case 'sendOper':
       // 1:全员退出会议
+      // 2:设置取消管理员
+      // 3:踢出房间
       await connection.invoke(str, data.roomNum, data.type)
       break;
   }