踢出房间&管理员
This commit is contained in:
parent
3e5c3ddcfd
commit
5def31854b
|
|
@ -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'
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -179,13 +177,22 @@ const Meeting: React.FC = () => {
|
|||
getRoomUser()
|
||||
break;
|
||||
case 'Operation':
|
||||
// 1: 全员退出会议
|
||||
// 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}>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue