@@ -87,12 +95,12 @@ const EquipmentManagement = forwardRef((_props: any, ref: any) => {
uid: callerUid,
driversJsonString: JSON.stringify(deviceInfo)
})
- setEquipmentManagementModal(false)
+ handleWindowsChange()
message.success('设置成功')
}}>确定
+ onClick={() => handleWindowsChange()}>取消
+
({});
+ const [roomUserList, setRoomUserList] = useState([])
+ const channel = new BroadcastChannel('meeting_channel');
+ const userInfo = JSON.parse(storage.getItem('user') as string)
+ useEffect(() => {
+ setUser(userInfo)
+ getRoomUser()
+ channel.onmessage = function (event) {
+ const { type, roomUserList } = event.data;
+ switch (type) {
+ case 'roomUserList':
+ setRoomUserList(roomUserList)
+ break;
+ }
+ }
+ }, []);
+ // 获取房间用户
+ const getRoomUser = async (): Promise => {
+ const data = JSON.parse(storage.getItem('stateInfo') as string)
+ GetRoomUser(data.channelId).then(res => {
+ if (res.code === 200) {
+ res.data.forEach((item: any) => {
+ item.isShow = true;
+ item.isRoom = true;
+ item.isAdmin = role.ID.includes(item.roleId) || item.isRoomManager
+ })
+ setRoomUserList(res.data)
+ }
+ })
+ }
+ return (
+ <>
+
+
+ )
+}
+
+export default UserListWindow
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 06a65c7..56bbaec 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -22,6 +22,7 @@ import EquipmentManagement from '@/components/EquipmentManagement';
import UserVideo from '@/components/UserVideo';
import { role } from '@/config/role';
import { fixWebmDuration } from "webm-duration-fix-buffer";
+import { getKeyOpenChildWindow, setKeyOpenChildWindow } from '@/utils/package/public';
const { confirm } = Modal;
const { exec } = require('child_process');
const fs = require('fs').promises;
@@ -201,38 +202,77 @@ const Meeting: React.FC = () => {
const container = document.getElementById('videoView') as HTMLElement;
container.addEventListener('wheel', handleWheelChange);
channel.onmessage = async function (event) {
- const { type, footerListsTitle } = event.data;
+ const {
+ type,
+ shareScreenWindowfooterListsTitle,
+ userListWindowPostOpenMicr,
+ userListWindowPostOpenCamera,
+ userListWindowDeleteRoomManager,
+ userListWindowPostRoomManager,
+ userListWindowGetRoomKickout,
+ shareScreenWindowEquipmentManagement
+ } = event.data;
switch (type) {
- case 'closeShareScreen':
+ case 'shareScreenWindowClose':
await stopScreenCapture()
await allUserLook(userInfo.uid, userInfo.userName)
break;
- case 'setting':
+ case 'shareScreenWindowSetting':
stupWizardRef.current.changeModal(3);
window.electron.mainWindowCenter()
break;
- case 'footerListsTitle':
- switch (footerListsTitle) {
+ case 'shareScreenWindowfooterListsTitle':
+ switch (shareScreenWindowfooterListsTitle) {
case '静音':
case '解除静音':
changeStatusList({
- title: footerListsTitle
+ title: shareScreenWindowfooterListsTitle
}, 0, 1)
break;
case '关闭视频':
case '开启视频':
changeStatusList({
- title: footerListsTitle
+ title: shareScreenWindowfooterListsTitle
}, 0, 2)
break;
case '录制':
case '录制中':
changeStatusList({
- title: footerListsTitle
+ title: shareScreenWindowfooterListsTitle
}, 1, 3)
break;
}
break;
+ case 'userListWindowPostOpenMicr':
+ postOpenMicr(userListWindowPostOpenMicr.enableMicr, userListWindowPostOpenMicr.uid)
+ break;
+ case 'userListWindowPostOpenCamera':
+ postOpenCamera(userListWindowPostOpenCamera.enableCamera, userListWindowPostOpenCamera.uid)
+ break;
+ case 'userListWindowDeleteRoomManager':
+ DeleteRoomManager({
+ roomId: state.roomId,
+ roomNum: state.channelId,
+ userId: userListWindowDeleteRoomManager.uid
+ })
+ break;
+ case 'userListWindowPostRoomManager':
+ postRoomManager({
+ roomId: state.roomId,
+ roomNum: state.channelId,
+ userId: userListWindowPostRoomManager.uid
+ })
+ break;
+ case 'userListWindowGetRoomKickout':
+ GetRoomKickout(state.channelId, userListWindowGetRoomKickout.uid)
+ break;
+ case 'userListWindowAllPostOpenMicr':
+ postOpenMicr(false, userInfo.id, true)
+ break;
+ case 'shareScreenWindowEquipmentManagement':
+ equipmentManagement(shareScreenWindowEquipmentManagement.uid, shareScreenWindowEquipmentManagement.userName)
+ window.electron.mainWindowCenter()
+ break;
}
}
time = setInterval(() => {
@@ -1307,13 +1347,16 @@ const Meeting: React.FC = () => {
setIsSharedScreenModal(false)
await agora.setDesktopCapturerVideo(sharedScreenItem, isComputerAudio, isFluencyPriority)
await allUserLook(user.screenShareId, user.userName)
- // window.electron.createChildWindow({
- // url: location.origin + `/#/shareScreenWindow`,
- // width: 540,
- // height: 70,
- // key: 'shareScreenWindow',
- // })
- // storage.setItem('isOpenChildWindow', true)
+ const isOpen = await getKeyOpenChildWindow('shareScreenWindow')
+ if (!isOpen) {
+ window.electron.createChildWindow({
+ url: location.origin + `/#/shareScreenWindow`,
+ width: 540,
+ height: 70,
+ key: 'shareScreenWindow',
+ })
+ setKeyOpenChildWindow('shareScreenWindow', true)
+ }
} else {
message.error('请选择应用!')
}
@@ -1357,6 +1400,7 @@ const Meeting: React.FC = () => {
footerListTemplate[1][0].title = '共享屏幕'
setFooterList(footerListTemplate)
window.electron.closeChildWindow('shareScreenWindow')
+ setKeyOpenChildWindow('shareScreenWindow', false)
}
// 获取房间用户
const getRoomUser = async (): Promise => {
@@ -2015,7 +2059,7 @@ const Meeting: React.FC = () => {
: null}
{item.uid !== user.uid && role.ID.includes(user.roleId) ? {time} 共享中
-
+
+
)
}
diff --git a/src/page/Meeting/UserListWindow/index.module.scss b/src/page/Meeting/UserListWindow/index.module.scss
new file mode 100644
index 0000000..2cc7677
--- /dev/null
+++ b/src/page/Meeting/UserListWindow/index.module.scss
@@ -0,0 +1,120 @@
+.userListWindow {
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ background-color: #16191E;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ padding: 10px 0;
+
+ >div {
+ margin-bottom: 10px;
+
+ &:last-child {
+ margin-bottom: 0px;
+ }
+ }
+
+ .userListWindowTitle {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding: 0 10px;
+
+ >span {
+ color: #EEEEEE;
+ font-size: 18px;
+ }
+
+ >img {
+ cursor: pointer;
+ }
+ }
+
+ .userListWindowContent {
+ flex-grow: 1;
+ height: 0px;
+ overflow-y: auto;
+
+ >div {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+ box-sizing: border-box;
+ padding: 4px 10px;
+
+ >div:nth-child(1) {
+ display: flex;
+ align-items: center;
+
+ >span {
+ font-size: 14px;
+ color: #F3F3F5;
+ margin-left: 4px;
+ }
+
+ >div {
+ flex-shrink: 0;
+ }
+ }
+
+ >div:nth-child(2) {
+ display: flex;
+ align-items: center;
+
+ >div {
+ height: 30px;
+ width: 30px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ >img {
+ width: 20px;
+ }
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+ }
+ }
+
+ &:hover {
+ background-color: rgb(52, 52, 52);
+ }
+ }
+ }
+
+ .userListWindowFooter {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+
+ >div {
+ font-size: 14px;
+ cursor: pointer;
+ background-color: #31353A;
+ color: #EEEEEE;
+ width: 104px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border-radius: 5px;
+
+ &:hover {
+ background-color: lighten(#31353A, 4%);
+ }
+
+ &:active {
+ background-color: darken(#31353A, 4%);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/page/Meeting/UserListWindow/index.tsx b/src/page/Meeting/UserListWindow/index.tsx
new file mode 100644
index 0000000..b3bf4bf
--- /dev/null
+++ b/src/page/Meeting/UserListWindow/index.tsx
@@ -0,0 +1,210 @@
+import { role } from '@/config/role';
+import styles from '@/page/Meeting/UserListWindow/index.module.scss'
+import ImageUrl from '@/utils/package/imageUrl';
+import { EllipsisOutlined, ExclamationCircleFilled, SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Modal, Popover } from 'antd';
+import Avatar from '@/components/Avatar';
+import { useEffect, useState } from "react";
+import { storage } from '@/utils';
+import { GetRoomUser } from '@/api/Meeting';
+import { setKeyOpenChildWindow } from '@/utils/package/public';
+const { confirm } = Modal;
+
+const UserListWindow: React.FC = () => {
+ const [userSearchValue, setUserSearchValue] = useState('')
+ const [user, setUser] = useState
{footerLists.map((item: any, index: number) => {
return (
- {
+ onClick={async () => {
switch (item.title) {
case '静音':
case '解除静音':
@@ -122,15 +123,27 @@ const ShareScreenWindow: React.FC = () => {
case '录制':
case '录制中':
channel.postMessage({
- type: 'footerListsTitle',
- footerListsTitle: item.title
+ type: 'shareScreenWindowfooterListsTitle',
+ shareScreenWindowfooterListsTitle: item.title
});
break;
case '设置':
channel.postMessage({
- type: 'setting'
+ type: 'shareScreenWindowSetting'
});
break;
+ case '成员列表':
+ const isOpen = await getKeyOpenChildWindow('userListWindow')
+ if (!isOpen) {
+ window.electron.createChildWindow({
+ url: location.origin + `/#/userListWindow`,
+ width: 340,
+ height: 540,
+ key: 'userListWindow',
+ })
+ setKeyOpenChildWindow('userListWindow', true)
+ }
+ break;
}
}}
key={index}>
@@ -142,13 +155,13 @@ const ShareScreenWindow: React.FC = () => {
+
+
+ 成员列表
+ 
{
+ window.electron.closeChildWindow('userListWindow')
+ setKeyOpenChildWindow('userListWindow', false)
+ }} />
+
+
+ }
+ value={userSearchValue}
+ onChange={(e) => {
+ setUserSearchValue(e.target.value)
+ const newRoomUserList = [...roomUserList]
+ newRoomUserList.forEach(row => {
+ if (e.target.value) {
+ if (row.userName.indexOf(e.target.value) !== -1) {
+ row.isShow = true;
+ } else {
+ row.isShow = false;
+ }
+ } else {
+ row.isShow = true;
+ }
+ });
+ setRoomUserList(newRoomUserList)
+ }}
+ />
+
+
+ {roomUserList.map((item: any, index: number) => {
+ return (
+ item.isShow && item.isRoom ?
: null
+ )
+ }
+ )}
+
+
+
+
+
+ {role.ID.includes(item.roleId) || item.isRoomManager ?
: null}
+
+ 
{
+ channel.postMessage({
+ type: 'userListWindowPostOpenMicr',
+ userListWindowPostOpenMicr: {
+ enableMicr: !item.enableMicr,
+ uid: item.uid
+ }
+ });
+ }} title={item.enableMicr ? '静音' : '解除声音'} />
+
: null}
+ {role.ID.includes(item.roleId) || item.isRoomManager ?
+ 
{
+ channel.postMessage({
+ type: 'userListWindowPostOpenCamera',
+ userListWindowPostOpenCamera: {
+ enableCamera: !item.enableCamera,
+ uid: item.uid
+ }
+ });
+ }} title={item.enableCamera ? '关闭视频' : '开启视频'} />
+
: null}
+ {item.uid !== user.uid && role.ID.includes(user.roleId) ?
+
+ {!role.ID.includes(item.roleId) ? : null}
+
+
+
+ }>
+
+
+ {
+ channel.postMessage({
+ type: 'userListWindowAllPostOpenMicr'
+ });
+ }}>全员静音
+
{!role.ID.includes(item.roleId) ?