marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

yangjie #22

Merged
yangqiang merged 99 commits from yangjie into master 2024-10-22 16:11:46 +08:00
Conversation 0 Commits 99 Files Changed 34 +463 -11
7 changed files with 463 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 187e91f07a - Show all commits

4
src/App.tsx
View File

@ -21,6 +21,7 @@ import path from "path";
import ShareScreenWindow from "@/page/Meeting/ShareScreenWindow";
import UserListWindow from "@/page/Meeting/UserListWindow";
import ChatSmallWindow from "./page/Meeting/ChatSmallWindow";
import ChatBigWindow from "./page/Meeting/ChatBigWindow";
const fs = require('fs').promises;
const { exec } = require('child_process');
const App: React.FC = () => {
@ -35,7 +36,7 @@ const App: React.FC = () => {
});
const [spinning, setSpinning] = useState(false);
const [isState, setIsState] = useState(true);
const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow']
const urlHashArr = ['#/userListWindow', '#/shareScreenWindow', '#/chatSmallWindow', '#/chatBigWindow']
if (urlHashArr.indexOf(location.hash) == -1) {
useEffect(() => {
let userInfo = JSON.parse(storage.getItem('user') as string)
@ -251,6 +252,7 @@ const App: React.FC = () => {
<Route path='/shareScreenWindow' element={<ShareScreenWindow />} />
<Route path='/userListWindow' element={<UserListWindow />} />
<Route path='/chatSmallWindow' element={<ChatSmallWindow />} />
<Route path='/chatBigWindow' element={<ChatBigWindow />} />
<Route path='*' element={<NotFound />} />
</Routes>
<Spin spinning={spinning} fullscreen />

133
src/page/Meeting/ChatBigWindow/index.module.scss Normal file
View File

@ -0,0 +1,133 @@
.chatBigWindow {
height: 100%;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 10px 0;
.chatBigWindowTitle {
background-color: #16191E;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 10px 10px;
>span {
color: #EEEEEE;
font-size: 18px;
}
>img {
cursor: pointer;
}
}
.chatBigWindowContent {
flex-grow: 1;
height: 0px;
overflow-y: auto;
background-color: rgb(31, 33, 37);
padding: 10px;
.chatBigWindowContentLeft {
display: flex;
flex-direction: column;
align-items: flex-start;
>div:nth-child(1) {
display: flex;
align-items: center;
>span {
font-size: 14px;
color: #F3F3F5;
margin-left: 4px;
}
>div {}
}
>div:nth-child(2) {
background-color: #5575F2;
color: #F3F3F5;
max-width: 266px;
padding: 10px;
box-sizing: border-box;
border-radius: 0 25px 25px 25px;
margin: 10px 0 10px 40px;
font-size: 14px;
}
}
.chatBigWindowContentRight {
display: flex;
flex-direction: column;
align-items: flex-end;
>div:nth-child(1) {
display: flex;
align-items: center;
flex-direction: row-reverse;
>span {
font-size: 14px;
color: #F3F3F5;
}
>div {
margin-left: 4px;
}
}
>div:nth-child(2) {
background-color: #464E6B;
color: #F3F3F5;
max-width: 266px;
padding: 10px;
box-sizing: border-box;
border-radius: 25px 0 25px 25px;
margin: 10px 40px 10px 0;
font-size: 14px;
}
}
}
.chatBigWindowButton {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
padding: 10px;
box-sizing: border-box;
background-color: rgb(31, 33, 37);
>button {
margin: 4px 4px 0;
}
}
.chatBigWindowInput {
flex-shrink: 0;
padding: 10px 10px;
background-color: #16191E;
display: flex;
flex-direction: column;
align-items: flex-end;
}
}
.chatBigWindowInputPopover {
display: flex;
flex-direction: column;
>button {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
}
}

263
src/page/Meeting/ChatBigWindow/index.tsx Normal file
View File

@ -0,0 +1,263 @@
import styles from '@/page/Meeting/ChatBigWindow/index.module.scss'
import ImageUrl from '@/utils/package/imageUrl';
import { useEffect, useState } 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';
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 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 } = event.data;
switch (type) {
case 'chatList':
setChatLists(chatList)
setTimeout(() => {
const chatBigWindowView = document.getElementById('chatBigWindowView') as HTMLElement;
if (chatBigWindowView) {
chatBigWindowView.scrollTop = chatBigWindowView.scrollHeight;
}
}, 100)
break;
}
}
}, []);
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={() => {
channel.postMessage({
type: 'chatBigWindowEquipmentManagement',
chatBigWindowEquipmentManagement: {
uid: roomUserItem.uid,
userName: roomUserItem.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>
</>
)
}
export default ChatBigWindow

3
src/page/Meeting/ChatSmallWindow/index.module.scss
View File

@ -8,10 +8,9 @@
>div:nth-child(1) {
flex-grow: 1;
overflow-y: hidden;
height: 80%;
max-height: 80%;
padding: 4px;
box-sizing: border-box;
overflow-y: auto;
.chatSmallWindowContentLeft {
display: flex;

12
src/page/Meeting/ChatSmallWindow/index.tsx
View File

@ -14,10 +14,12 @@ const ChatSmallWindow: React.FC = () => {
switch (type) {
case 'chatList':
setChatLists(chatList)
const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement;
if (chatSmallWindowView) {
chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight;
}
setTimeout(() => {
const chatSmallWindowView = document.getElementById('chatSmallWindowView') as HTMLElement;
if (chatSmallWindowView) {
chatSmallWindowView.scrollTop = chatSmallWindowView.scrollHeight;
}
}, 100)
break;
}
}
@ -27,7 +29,7 @@ const ChatSmallWindow: React.FC = () => {
return (
<>
<div className={styles.chatSmallWindow}>
<div className='drag' id='chatSmallWindowView'>
<div id='chatSmallWindowView'>
{chatLists.map((item: any) =>
<div className={`${item.uid !== userInfo.uid ? styles.chatSmallWindowContentLeft : styles.chatSmallWindowContentRight}`}>
<div>

16
src/page/Meeting/ShareScreenWindow/index.tsx
View File

@ -132,9 +132,21 @@ const ShareScreenWindow: React.FC = () => {
type: 'shareScreenWindowSetting'
});
break;
case '聊天':
const chatBigWindow = await getKeyOpenChildWindow('chatBigWindow')
if (!chatBigWindow) {
window.electron.createChildWindow({
url: location.origin + `/#/chatBigWindow`,
width: 440,
height: 640,
key: 'chatBigWindow',
})
setKeyOpenChildWindow('chatBigWindow', true)
}
break;
case '成员列表':
const isOpen = await getKeyOpenChildWindow('userListWindow')
if (!isOpen) {
const userListWindow = await getKeyOpenChildWindow('userListWindow')
if (!userListWindow) {
window.electron.createChildWindow({
url: location.origin + `/#/userListWindow`,
width: 340,

43
src/page/Meeting/index.tsx
View File

@ -212,7 +212,15 @@ const Meeting: React.FC = () => {
userListWindowPostRoomManager,
userListWindowGetRoomKickout,
shareScreenWindowEquipmentManagement,
chatSmallWindowSendChannelMsg
chatSmallWindowSendChannelMsg,
chatBigWindowSetAllUserLook,
chatBigWindowDeleteRoomManager,
chatBigWindowPostRoomManager,
chatBigWindowPostOpenMicr,
chatBigWindowPostOpenCamera,
chatBigWindowEquipmentManagement,
chatBigWindowGetRoomKickout,
chatBigWindowSendChannelMsg,
} = event.data;
switch (type) {
case 'shareScreenWindowClose':
@ -278,6 +286,39 @@ const Meeting: React.FC = () => {
case 'chatSmallWindowSendChannelMsg':
sendMsg(chatSmallWindowSendChannelMsg.msg)
break;
case 'chatBigWindowSetAllUserLook':
setAllUserLook(chatBigWindowSetAllUserLook.roomUserItem)
break;
case 'chatBigWindowDeleteRoomManager':
DeleteRoomManager({
roomId: state.roomId,
roomNum: state.channelId,
userId: chatBigWindowDeleteRoomManager.uid
})
break;
case 'chatBigWindowPostRoomManager':
postRoomManager({
roomId: state.roomId,
roomNum: state.channelId,
userId: chatBigWindowPostRoomManager.uid
})
break;
case 'chatBigWindowPostOpenMicr':
postOpenMicr(chatBigWindowPostOpenMicr.enableMicr, chatBigWindowPostOpenMicr.uid)
break;
case 'chatBigWindowPostOpenCamera':
postOpenCamera(chatBigWindowPostOpenCamera.enableCamera, chatBigWindowPostOpenCamera.uid)
break;
case 'chatBigWindowEquipmentManagement':
equipmentManagement(chatBigWindowEquipmentManagement.uid, chatBigWindowEquipmentManagement.userName)
window.electron.mainWindowCenter()
break;
case 'chatBigWindowGetRoomKickout':
GetRoomKickout(state.channelId, chatBigWindowGetRoomKickout.uid)
break;
case 'chatBigWindowSendChannelMsg':
sendMsg(chatBigWindowSendChannelMsg.msg)
break;
}
}
time = setInterval(() => {