282 lines
12 KiB
TypeScript
282 lines
12 KiB
TypeScript
import styles from '@/page/Meeting/ChatBigWindow/index.module.scss'
|
|
import ImageUrl from '@/utils/package/imageUrl';
|
|
import { useEffect, useState, useRef } from "react";
|
|
import { storage } from '@/utils';
|
|
import { setKeyOpenChildWindow } from '@/utils/package/public';
|
|
import { Button, Input, Modal, Popover } from 'antd';
|
|
import { role } from '@/config/role';
|
|
import { GetRoomUserItem } from '@/api/Meeting';
|
|
import Avatar from '@/components/Avatar';
|
|
import dayjs from 'dayjs';
|
|
import { ExclamationCircleFilled } from '@ant-design/icons';
|
|
import EquipmentManagement from '@/components/EquipmentManagement';
|
|
const { confirm } = Modal;
|
|
const ChatBigWindow: React.FC = () => {
|
|
const [inputValue, setInputValue] = useState<string>('')
|
|
const [chatLists, setChatLists] = useState<any>([])
|
|
const [user, setUser] = useState<any>({});
|
|
const [roomUserItem, setRoomUserItem] = useState<any>(null)
|
|
const [commonlyChatList] = useState<any>([
|
|
'能听到我说话吗？',
|
|
'听得到',
|
|
'听不到',
|
|
'我要发言',
|
|
])
|
|
const equipmentManagementRef = useRef<any>();
|
|
const userInfo = JSON.parse(storage.getItem('user') as string)
|
|
const stateInfo = JSON.parse(storage.getItem('stateInfo') as string)
|
|
const channel = new BroadcastChannel('meeting_channel');
|
|
useEffect(() => {
|
|
setUser(userInfo)
|
|
channel.onmessage = function (event) {
|
|
const { type, chatList, showDriverList } = event.data;
|
|
switch (type) {
|
|
case 'chatList':
|
|
setChatLists(chatList)
|
|
setTimeout(() => {
|
|
const chatBigWindowView = document.getElementById('chatBigWindowView') as HTMLElement;
|
|
if (chatBigWindowView) {
|
|
chatBigWindowView.scrollTop = chatBigWindowView.scrollHeight;
|
|
}
|
|
}, 100)
|
|
break;
|
|
case 'showDriverList':
|
|
equipmentManagementRef.current.setData(showDriverList)
|
|
break;
|
|
}
|
|
}
|
|
channel.postMessage({
|
|
type: 'chatBigWindowSendChannelMsg',
|
|
chatBigWindowSendChannelMsg: {
|
|
msg: '',
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className={`${styles.chatBigWindow}`}>
|
|
<div className={styles.chatBigWindowTitle}>
|
|
<span>聊天</span>
|
|
<img src={ImageUrl.icon18} className='drag' alt="" onClick={() => {
|
|
window.electron.closeChildWindow('chatBigWindow')
|
|
setKeyOpenChildWindow('chatBigWindow', false)
|
|
}} />
|
|
</div>
|
|
<div className={`${styles.chatBigWindowContent} drag`} id='chatBigWindowView'>
|
|
{chatLists.map((item: any, index: number) =>
|
|
<div
|
|
key={index}
|
|
className={`${item.uid !== user.uid ? styles.chatBigWindowContentLeft : styles.chatBigWindowContentRight}`}>
|
|
{role.ID.includes(user.roleId) ? <Popover
|
|
placement="bottom"
|
|
title={''}
|
|
onOpenChange={(e: boolean) => {
|
|
if (e) {
|
|
GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
|
|
if (res.code === 200) {
|
|
setRoomUserItem(res.data)
|
|
}
|
|
})
|
|
} else {
|
|
setRoomUserItem(null)
|
|
}
|
|
}}
|
|
content={
|
|
roomUserItem ? <div className={styles.chatBigWindowInputPopover}>
|
|
{roomUserItem.isRoomManager || role.ID.includes(roomUserItem.roleId) ? <Button
|
|
type="primary"
|
|
className='m-ant-btn'
|
|
size={'small'}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
channel.postMessage({
|
|
type: 'chatBigWindowSetAllUserLook',
|
|
chatBigWindowSetAllUserLook: {
|
|
roomUserItem,
|
|
}
|
|
});
|
|
}}
|
|
>全员看Ta</Button> : null}
|
|
{roomUserItem.uid !== user.uid && !role.ID.includes(roomUserItem.roleId) ? <Button
|
|
type="primary"
|
|
className='m-ant-btn'
|
|
size={'small'}
|
|
onClick={async (event) => {
|
|
event.stopPropagation();
|
|
if (roomUserItem.isRoomManager) {
|
|
channel.postMessage({
|
|
type: 'chatBigWindowDeleteRoomManager',
|
|
chatBigWindowDeleteRoomManager: {
|
|
uid: roomUserItem.uid
|
|
}
|
|
});
|
|
} else {
|
|
channel.postMessage({
|
|
type: 'chatBigWindowPostRoomManager',
|
|
chatBigWindowPostRoomManager: {
|
|
uid: roomUserItem.uid
|
|
}
|
|
});
|
|
}
|
|
await GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
|
|
if (res.code === 200) {
|
|
setRoomUserItem(res.data)
|
|
}
|
|
})
|
|
}}
|
|
>{roomUserItem.isRoomManager ? '取消发言' : '允许发言'}</Button> : null}
|
|
{roomUserItem.isRoomManager ? <Button
|
|
type="primary"
|
|
className='m-ant-btn'
|
|
size={'small'}
|
|
onClick={async (event) => {
|
|
event.stopPropagation();
|
|
channel.postMessage({
|
|
type: 'chatBigWindowPostOpenMicr',
|
|
chatBigWindowPostOpenMicr: {
|
|
uid: roomUserItem.uid,
|
|
enableMicr: !roomUserItem.enableMicr
|
|
}
|
|
});
|
|
await GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
|
|
if (res.code === 200) {
|
|
setRoomUserItem(res.data)
|
|
}
|
|
})
|
|
}}
|
|
>{roomUserItem.enableMicr ? '静音' : '解除静音'}</Button> : null}
|
|
{roomUserItem.isRoomManager ? <Button
|
|
type="primary"
|
|
className='m-ant-btn'
|
|
size={'small'}
|
|
onClick={async (event) => {
|
|
event.stopPropagation();
|
|
channel.postMessage({
|
|
type: 'chatBigWindowPostOpenCamera',
|
|
chatBigWindowPostOpenCamera: {
|
|
uid: roomUserItem.uid,
|
|
enableMicr: !roomUserItem.enableCamera
|
|
}
|
|
});
|
|
await GetRoomUserItem(stateInfo.channelId, item.uid).then((res: any) => {
|
|
if (res.code === 200) {
|
|
setRoomUserItem(res.data)
|
|
}
|
|
})
|
|
}}
|
|
>{roomUserItem.enableCamera ? '关闭视频' : '打开视频'}</Button> : null}
|
|
{roomUserItem.uid !== user.uid ? <Button
|
|
type="primary"
|
|
className='m-ant-btn'
|
|
size={'small'}
|
|
onClick={() => {
|
|
equipmentManagementRef.current.changeModal(item.uid, item.userName)
|
|
}}
|
|
>设备管理</Button> : null}
|
|
{roomUserItem.uid !== user.uid ? <Button
|
|
type="primary"
|
|
style={{ backgroundColor: '#EC3C3C' }}
|
|
size={'small'}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
confirm({
|
|
title: '移出会议',
|
|
icon: <ExclamationCircleFilled />,
|
|
content: `确定将用户${item.userName}移出会议？`,
|
|
centered: true,
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
async onOk() {
|
|
channel.postMessage({
|
|
type: 'chatBigWindowGetRoomKickout',
|
|
chatBigWindowGetRoomKickout: {
|
|
uid: item.uid
|
|
}
|
|
});
|
|
},
|
|
onCancel() {
|
|
|
|
},
|
|
});
|
|
}}
|
|
>移出会议</Button> : null}
|
|
</div> : <div style={{ color: 'white' }}>用户不在房间内</div>
|
|
}>
|
|
<div>
|
|
<div><Avatar name={item.userName} /></div>
|
|
{item.uid !== user.uid ?
|
|
<span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
|
|
<span> <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
|
|
}
|
|
|
|
</div>
|
|
</Popover> : <div>
|
|
<div><Avatar name={item.userName} /></div>
|
|
{item.uid !== user.uid ?
|
|
<span>{item.userName}<span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
|
|
<span><span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
|
|
}
|
|
</div>}
|
|
<div>{item.message}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`${styles.chatBigWindowButton} drag`}>
|
|
{
|
|
commonlyChatList.map((item: string, index: number) => {
|
|
return <Button
|
|
key={index}
|
|
type="primary"
|
|
className='m-ant-btn'
|
|
onClick={() => {
|
|
channel.postMessage({
|
|
type: 'chatBigWindowSendChannelMsg',
|
|
chatBigWindowSendChannelMsg: {
|
|
msg: item,
|
|
}
|
|
});
|
|
}}
|
|
>{item}</Button>
|
|
})
|
|
}
|
|
</div>
|
|
<div className={`${styles.chatBigWindowInput} drag`}>
|
|
<Input.TextArea
|
|
placeholder="请输入内容"
|
|
style={{ flexGrow: 1 }}
|
|
value={inputValue}
|
|
onChange={(e) => {
|
|
setInputValue(e.target.value)
|
|
}}
|
|
autoSize={{ minRows: 3, maxRows: 3 }} />
|
|
<Button type="primary" className='m-ant-btn' style={{ flexShrink: 0, marginTop: '4px' }} onClick={() => {
|
|
channel.postMessage({
|
|
type: 'chatBigWindowSendChannelMsg',
|
|
chatBigWindowSendChannelMsg: {
|
|
msg: inputValue,
|
|
}
|
|
});
|
|
setInputValue('')
|
|
}}>发送</Button>
|
|
</div>
|
|
</div>
|
|
<EquipmentManagement ref={equipmentManagementRef} getDriver={(uid: string) => {
|
|
channel.postMessage({
|
|
type: 'userListWindowEquipmentManagement',
|
|
userListWindowEquipmentManagement: {
|
|
uid
|
|
}
|
|
});
|
|
}} setDriver={(data: any) => {
|
|
channel.postMessage({
|
|
type: 'userListWindowSetEquipmentManagement',
|
|
userListWindowSetEquipmentManagement: data
|
|
});
|
|
}} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ChatBigWindow
|