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

共享窗口部分代码(未提交使用代码)

This commit is contained in:
yj 2024-10-11 17:48:12 +08:00
parent 73085c1f74
commit 5a54e639a2
6 changed files with 159 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
main.js
View File

@ -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()
}
}

4
preload.js
View File

@ -77,4 +77,8 @@ window.electron = {
createChildWindow: (config) => {
ipcRenderer.invoke('createChildWindow', config)
},
// 关闭子窗口
closeChildWindow: (key) => {
ipcRenderer.invoke('closeChildWindow', key)
},
}

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

@ -184,6 +184,7 @@ const Meeting: React.FC = () => {
const [observer, setObserver] = useState<IntersectionObserver>()
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<void> => {

2
src/page/ShareScreenWindow/index.module.scss
View File

@ -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;

88
src/page/ShareScreenWindow/index.tsx
View File

@ -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<any>([
const [footerLists, setFooterLists] = useState<any>([
{
title: '静音',
icon: ImageUrl.icon22,
@ -54,33 +51,96 @@ const ShareScreenWindow: React.FC = () => {
select: false,
},
])
const [time, setTime] = useState('')
const [roomUserLists, setRoomUserLists] = useState<any>([])
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<void> => {
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 (
<>
<div className={`${styles.shareScreenWindow} drag`}>
<div className={styles.shareScreenWindowTitle}>02：38 共享中</div>
<div className={styles.shareScreenWindowTitle}>{time} 共享中</div>
<div className={styles.shareScreenWindowContent}>
<div className={styles.shareScreenWindowContentList}>
{footerList.map((item: any, index: number) => {
{footerLists.map((item: any, index: number) => {
return (
<div
onClick={() => {
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 ? <img src={item.iconSelect} alt="" /> : <img src={item.active ? item.iconActive : item.icon} alt="" />}
<span>{item.title}</span>
<span>{item.title}{item.title === '成员列表' ? `(${roomUserLists.filter((item: any) => item.isRoom).length})` : ''}</span>
</div>
)
})}
</div>
<Button type="primary" style={{ backgroundColor: '#FF5219', marginRight: '14px' }} onClick={() => {
channel.postMessage({
type: 'closeShareScreen'
});
}}>
结束会议
结束共享
</Button>
</div>
</div>

1
src/render.d.ts vendored
View File

@ -19,6 +19,7 @@ export interface IElectronAPI {
setRegistry: (uuid: string) => any;
getRegistry: () => any;
createChildWindow: (config: any) => void;
closeChildWindow: (key: string) => void;
}
declare global {