diff --git a/main.js b/main.js index db2a312..a416b71 100644 --- a/main.js +++ b/main.js @@ -322,17 +322,19 @@ app.on('ready', () => { child.loadURL(config.url) childWindow[config.key] = child child.once('ready-to-show', () => { - child.show() - if (config.key === 'shareScreenWindow') { - const display = screen.getDisplayMatching({ ...child.getBounds() }); - const x = Math.round((display.workArea.width - child.getSize()[0]) / 2); - child.setPosition(x, 0); - child.setResizable(false) - child.setMovable(false) - mainWindow.setPosition(-999999, -999999); - } + childWindow[config.key].show() + windowOperation(config) }) }); + // 隐藏窗口 + ipcMain.handle('closeChildWindow', (event, key) => { + childWindow[key].close() + childWindow[key] = "" + const display = screen.getDisplayMatching({ ...mainWindow.getBounds() }); + const x = Math.round((display.workArea.width - mainWindow.getSize()[0]) / 2); + const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2); + mainWindow.setPosition(x, y); + }); } }); // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写 @@ -401,3 +403,16 @@ function cancleDownloadUpdate() { function quitAndInstall() { autoUpdater.quitAndInstall(); } + +function windowOperation(config) { + const child = childWindow[config.key]; + if (config.key === 'shareScreenWindow') { + const display = screen.getDisplayMatching({ ...child.getBounds() }); + const x = Math.round((display.workArea.width - child.getSize()[0]) / 2); + child.setPosition(x, 0); + child.setResizable(false) + child.setMovable(false) + mainWindow.setPosition(-999999, -999999); + child.webContents.openDevTools() + } +} \ No newline at end of file diff --git a/preload.js b/preload.js index adecf8a..1914a17 100644 --- a/preload.js +++ b/preload.js @@ -77,4 +77,8 @@ window.electron = { createChildWindow: (config) => { ipcRenderer.invoke('createChildWindow', config) }, + // 关闭子窗口 + closeChildWindow: (key) => { + ipcRenderer.invoke('closeChildWindow', key) + }, } diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 9fa9617..27bf3b7 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -184,6 +184,7 @@ const Meeting: React.FC = () => { const [observer, setObserver] = useState() let userInfo = JSON.parse(storage.getItem('user') as string) const msgTips = '您不是管理员或发言人，无法开启此功能！' + const channel = new BroadcastChannel('meeting_channel'); useEffect(() => { let time: NodeJS.Timeout; // let getDesktopCapturerVideoTime: NodeJS.Timeout; @@ -199,8 +200,43 @@ const Meeting: React.FC = () => { window.addEventListener('customStorageChange', handleCustomStorageChange); const container = document.getElementById('videoView') as HTMLElement; container.addEventListener('wheel', handleWheelChange); + channel.onmessage = async function (event) { + const { type, footerListsTitle } = event.data; + switch (type) { + case 'closeShareScreen': + await stopScreenCapture() + await allUserLook(userInfo.uid, userInfo.userName) + break; + case 'footerListsTitle': + switch (footerListsTitle) { + case '静音': + case '解除静音': + changeStatusList({ + title: footerListsTitle + }, 0, 1) + break; + case '关闭视频': + case '开启视频': + changeStatusList({ + title: footerListsTitle + }, 0, 2) + break; + case '录制': + case '录制中': + changeStatusList({ + title: footerListsTitle + }, 1, 3) + break; + } + break; + } + } time = setInterval(() => { setCurrentSeconds(currentSeconds++) + channel.postMessage({ + type: 'time', + time: changeCurrentSeconds(), + }); }, 1000) // getDesktopCapturerVideoTime = setInterval(() => { // setSharedScreenItem((i: any) => { @@ -639,6 +675,14 @@ const Meeting: React.FC = () => { observerObject.observe(element); }); } + channel.postMessage({ + type: 'roomUserList', + roomUserList, + }); + channel.postMessage({ + type: 'footerList', + footerList, + }); return () => { elements.forEach(element => { observer?.unobserve(element); @@ -1075,12 +1119,12 @@ const Meeting: React.FC = () => { await allUserLook(userInfo.uid, userInfo.userName) break; case '静音': - await postOpenMicr(false, user.uid) + await postOpenMicr(false, userInfo.uid) break; case '解除静音': await getUserRoomInfo().then(async (res) => { if (res) { - await postOpenMicr(true, user.uid) + await postOpenMicr(true, userInfo.uid) } else { if (!isClicked) { setCurrentRequestSpeakType('audio') @@ -1092,12 +1136,12 @@ const Meeting: React.FC = () => { }) break; case '关闭视频': - await postOpenCamera(false, user.uid) + await postOpenCamera(false, userInfo.uid) break; case '开启视频': await getUserRoomInfo().then(async (res) => { if (res) { - await postOpenCamera(true, user.uid) + await postOpenCamera(true, userInfo.uid) } else { if (!isClicked) { setCurrentRequestSpeakType('video') @@ -1259,6 +1303,12 @@ 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', + // }) } else { message.error('请选择应用!') } @@ -1301,6 +1351,7 @@ const Meeting: React.FC = () => { agora.stopScreenCapture() footerListTemplate[1][0].title = '共享屏幕' setFooterList(footerListTemplate) + window.electron.closeChildWindow('shareScreenWindow') } // 获取房间用户 const getRoomUser = async (): Promise => { diff --git a/src/page/ShareScreenWindow/index.module.scss b/src/page/ShareScreenWindow/index.module.scss index 9859102..d1f0f36 100644 --- a/src/page/ShareScreenWindow/index.module.scss +++ b/src/page/ShareScreenWindow/index.module.scss @@ -24,13 +24,13 @@ display: flex; flex-grow: 1; justify-content: space-between; - padding: 0 20px; >div { display: flex; flex-direction: column; align-items: center; cursor: pointer; + width: calc(100% / 6); >img { height: 24px; diff --git a/src/page/ShareScreenWindow/index.tsx b/src/page/ShareScreenWindow/index.tsx index 0d122bf..361ec9a 100644 --- a/src/page/ShareScreenWindow/index.tsx +++ b/src/page/ShareScreenWindow/index.tsx @@ -1,15 +1,12 @@ +import { GetRoomUser, GetRoomUserItem } from '@/api/Meeting'; +import { role } from '@/config/role'; import styles from '@/page/ShareScreenWindow/index.module.scss' +import { storage } from '@/utils'; import ImageUrl from '@/utils/package/imageUrl'; import { Button } from 'antd'; import { useEffect, useState } from "react"; -// window.electron.createChildWindow({ -// url: location.origin + `/#/shareScreenWindow`, -// width: 500, -// height: 70, -// key: 'shareScreenWindow', -// }) const ShareScreenWindow: React.FC = () => { - const [footerList, setFooterList] = useState([ + const [footerLists, setFooterLists] = useState([ { title: '静音', icon: ImageUrl.icon22, @@ -54,33 +51,96 @@ const ShareScreenWindow: React.FC = () => { select: false, }, ]) + const [time, setTime] = useState('') + const [roomUserLists, setRoomUserLists] = useState([]) + const channel = new BroadcastChannel('meeting_channel'); + let userInfo = JSON.parse(storage.getItem('user') as string) useEffect(() => { - + getRoomUser() + channel.onmessage = function (event) { + const { type, time, roomUserList, footerList } = event.data; + const footerListTemplate = [...footerLists]; + switch (type) { + case 'time': + setTime(time) + break; + case 'roomUserList': + setRoomUserLists(roomUserList) + break; + case 'footerList': + footerListTemplate[0].title = footerList[0][0].active ? '解除静音' : '静音'; + footerListTemplate[0].active = footerList[0][0].active; + footerListTemplate[1].title = footerList[0][1].active ? '开启视频' : '关闭视频'; + footerListTemplate[1].active = footerList[0][1].active; + footerListTemplate[5].title = footerList[1][3].active ? '录制中' : '录制'; + footerListTemplate[5].active = footerList[1][3].active; + setFooterLists(footerListTemplate) + break; + } + } }, []); + // 获取房间用户 + const getRoomUser = async (): Promise => { + const data = JSON.parse(storage.getItem('stateInfo') as string) + await GetRoomUserItem(data.channelId, userInfo.uid).then((res: any) => { + if (res.code === 200) { + const footerListTemplate = [...footerLists]; + footerListTemplate[0].title = !res.data.enableMicr ? '解除静音' : '静音'; + footerListTemplate[0].active = !res.data.enableMicr; + footerListTemplate[1].title = !res.data.enableCamera ? '开启视频' : '关闭视频'; + footerListTemplate[1].active = !res.data.enableCamera; + setFooterLists(footerListTemplate) + 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 + }) + setRoomUserLists(res.data) + } + }) + } + }) + } return ( <>
-
02：38 共享中
+
{time} 共享中
- {footerList.map((item: any, index: number) => { + {footerLists.map((item: any, index: number) => { return (
{ - console.log(item, index) + switch (item.title) { + case '静音': + case '解除静音': + case '关闭视频': + case '开启视频': + case '录制': + case '录制中': + channel.postMessage({ + type: 'footerListsTitle', + footerListsTitle: item.title + }); + break; + } }} key={index}> {item.select ? : } - {item.title} + {item.title}{item.title === '成员列表' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}
) })}
diff --git a/src/render.d.ts b/src/render.d.ts index 2a0cc6d..cf22a14 100644 --- a/src/render.d.ts +++ b/src/render.d.ts @@ -19,6 +19,7 @@ export interface IElectronAPI { setRegistry: (uuid: string) => any; getRegistry: () => any; createChildWindow: (config: any) => void; + closeChildWindow: (key: string) => void; } declare global {