From 47c4626171c0b902f5c56b6eda35df01585db7ee Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Thu, 29 Aug 2024 13:38:41 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 41 -- preload.js | 8 - src/App.tsx | 227 ++++++----- .../UserVideo/index.module.scss | 38 +- src/{page => components}/UserVideo/index.tsx | 25 +- src/page/Meeting/index.module.scss | 38 +- src/page/Meeting/index.tsx | 360 ++++++++++-------- src/render.d.ts | 3 - 8 files changed, 363 insertions(+), 377 deletions(-) rename src/{page => components}/UserVideo/index.module.scss (73%) rename src/{page => components}/UserVideo/index.tsx (85%) diff --git a/main.js b/main.js index f8b4a61..ceff3d4 100644 --- a/main.js +++ b/main.js @@ -16,7 +16,6 @@ const { autoUpdater, CancellationToken } = require('electron-updater'); const cancellationToken = new CancellationToken() app.allowRendererProcessReuse = false; let mainWindow = null; -let newWindow = null; let isMaximized = false; let env; @@ -263,46 +262,6 @@ app.on('ready', () => { const y = Math.round((display.workArea.height - mainWindow.getSize()[1]) / 2); mainWindow.setPosition(x, y); }); - // 打开新窗口 - ipcMain.handle('oepnWindow', (event, data) => { - if (newWindow) { - newWindow.focus(); - } else { - newWindow = new BrowserWindow({ - width: 1200, - height: 800, - minWidth: 1200, - minHeight: 800, - webPreferences: { - contextIsolation: false, - nodeIntegration: true, - enableRemoteModule: true, - nodeIntegrationInWorker: true, - allowMediaDevices: true, - preload: path.join(__dirname, 'preload.js') - }, - frame: false, - backgroundColor: '#00000000', - transparent: true, - }); - newWindow.loadURL(data.url); - newWindow.focus(); - newWindow.webContents.on('before-input-event', (event, input) => { - if (env === 'development') { - if (input.key === 'F12') { - newWindow.webContents.openDevTools() - } - } - }); - } - }); - // 关闭会议监控窗口 - ipcMain.handle('closeMonitorWindow', () => { - if (newWindow) { - newWindow.close(); - newWindow = null - } - }); } }); // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写 diff --git a/preload.js b/preload.js index 5fa46a0..e430d77 100644 --- a/preload.js +++ b/preload.js @@ -60,13 +60,5 @@ window.electron = { // 下载文件 downFile: (callback) => { ipcRenderer.on('downFile', callback) - }, - // 打开新窗口 - oepnWindow: (data) => { - ipcRenderer.invoke('oepnWindow', data) - }, - // 关闭会议监控窗口 - closeMonitorWindow: () => { - ipcRenderer.invoke('closeMonitorWindow') } } diff --git a/src/App.tsx b/src/App.tsx index 6a40579..6221e4a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,7 +17,6 @@ import { PostLogin } from "@/api/Login"; import { agora } from "@/utils/package/agora"; import QuitTips from "@/components/QuitTips"; import { GetLeave } from "@/api/Meeting"; -import UserVideo from "./page/UserVideo"; import path from "path"; const fs = require('fs').promises; const { exec } = require('child_process'); @@ -33,128 +32,123 @@ const App: React.FC = () => { }); const [spinning, setSpinning] = useState(false); const [isState, setIsState] = useState(true); - if (location.href.indexOf('/userVideo') === -1) { - useEffect(() => { - let userInfo = JSON.parse(storage.getItem('user') as string) - let loginInfo = JSON.parse(storage.getItem('login') as string) - if (userInfo) { - if (loginInfo && loginInfo.isAutoLogin) { - PostLogin({ - account: loginInfo.account, - pwd: CryptoJS.MD5(loginInfo.password).toString(CryptoJS.enc.Hex) - }).then(async (res) => { - if (res.code === 200) { - storage.setItem('user', JSON.stringify(res.data)) - toSrc('/home') - await startSignalr() - } else { - toSrc('/login') - } - }) - } else { - toSrc('/login') - } + useEffect(() => { + let userInfo = JSON.parse(storage.getItem('user') as string) + let loginInfo = JSON.parse(storage.getItem('login') as string) + if (userInfo) { + if (loginInfo && loginInfo.isAutoLogin) { + PostLogin({ + account: loginInfo.account, + pwd: CryptoJS.MD5(loginInfo.password).toString(CryptoJS.enc.Hex) + }).then(async (res) => { + if (res.code === 200) { + storage.setItem('user', JSON.stringify(res.data)) + toSrc('/home') + await startSignalr() + } else { + toSrc('/login') + } + }) } else { toSrc('/login') } - window.addEventListener('resize', handleResize); - window.addEventListener('online', handleNetworkChange); - window.addEventListener('offline', handleNetworkChange); - const originalSetItem = window.localStorage.setItem; - window.localStorage.setItem = function (key, value) { - originalSetItem.call(this, key, value); - const event = new Event('customStorageChange') as any; - event.key = key - event.value = value - window.dispatchEvent(event); - }; - window.addEventListener('customStorageChange', handleCustomStorageChange); - return () => { - window.removeEventListener('resize', handleResize); - window.removeEventListener('customStorageChange', handleCustomStorageChange); - window.removeEventListener('online', handleNetworkChange); - window.removeEventListener('offline', handleNetworkChange); - }; - }, []); - useEffect(() => { - window.electron.downFile(async (_e: any, data: any) => { - const response = await fetch(data.filePath); - const arrayBuffer = await response.arrayBuffer(); - const buffer = Buffer.from(arrayBuffer); - fs.writeFile(`${data.downFilePaths}${data.fileName}`, buffer, {}); - message.success(`下载成功！文件已保存至:${data.downFilePaths}`) - await fs.access(data.downFilePaths, fs.constants.F_OK); - if (process.platform === 'win32') { - exec(`explorer "${data.downFilePaths}"`); - } else if (process.platform === 'darwin') { - exec(`open "${data.downFilePaths}"`); - } - }) - window.electron.onFilePath(async (_e: any, filePath: string, key: string) => { - const setting = await JSON.parse(storage.getItem('setting') as string) - if (key === 'recordingFilesPath') { - setting.recordingFilesPath = filePath + } else { + toSrc('/login') + } + window.addEventListener('resize', handleResize); + window.addEventListener('online', handleNetworkChange); + window.addEventListener('offline', handleNetworkChange); + const originalSetItem = window.localStorage.setItem; + window.localStorage.setItem = function (key, value) { + originalSetItem.call(this, key, value); + const event = new Event('customStorageChange') as any; + event.key = key + event.value = value + window.dispatchEvent(event); + }; + window.addEventListener('customStorageChange', handleCustomStorageChange); + return () => { + window.removeEventListener('resize', handleResize); + window.removeEventListener('customStorageChange', handleCustomStorageChange); + window.removeEventListener('online', handleNetworkChange); + window.removeEventListener('offline', handleNetworkChange); + }; + }, []); + useEffect(() => { + window.electron.downFile(async (_e: any, data: any) => { + const response = await fetch(data.filePath); + const arrayBuffer = await response.arrayBuffer(); + const buffer = Buffer.from(arrayBuffer); + fs.writeFile(`${data.downFilePaths}${data.fileName}`, buffer, {}); + message.success(`下载成功！文件已保存至:${data.downFilePaths}`) + await fs.access(data.downFilePaths, fs.constants.F_OK); + if (process.platform === 'win32') { + exec(`explorer "${data.downFilePaths}"`); + } else if (process.platform === 'darwin') { + exec(`open "${data.downFilePaths}"`); + } + }) + window.electron.onFilePath(async (_e: any, filePath: string, key: string) => { + const setting = await JSON.parse(storage.getItem('setting') as string) + if (key === 'recordingFilesPath') { + setting.recordingFilesPath = filePath + } else { + setting.shareFilesPath = filePath + } + storage.setItem('setting', JSON.stringify(setting)) + }) + window.electron.quitAndInstall(async (_e: any) => { + leaveChannel() + }) + }, []) + useEffect(() => { + window.electron.onUpdate((_e: any, data: any) => { + if (location.hash.indexOf('/meeting') === -1) { + updateModalRef.current.changeModal(data) + } + }) + if (!storage.getItem('setting')) { + storage.setItem('setting', JSON.stringify({ + videoDeviceId: '', //摄像头id + ecordingDeviceId: "", //输入设备id + playBackDeviceId: "", //输出设备id + ecordingVolume: '', //输入音量 + playBackVolume: '', //输出音量 + autoEcordingVolume: true, //是否自动调整麦克风音量 + recordingFilesPath: path.resolve(__dirname, '../../Downloads') + '\\', //本地录制保存路径 + shareFilesPath: path.resolve(__dirname, '../../Downloads/') + '\\', //共享文件保存路径 + isShareSavePath: true, //是否下载钱询问每个文件保存的位置 + closeSetting: 'hide', //关闭按钮设置 + })) + } + }, []) + useEffect(() => { + if (isState) { + setIsState(false) + window.electron.onQuit(async () => { + if (location.hash.indexOf('/login') === 1) { + window.electron.quit() } else { - setting.shareFilesPath = filePath - } - storage.setItem('setting', JSON.stringify(setting)) - }) - window.electron.quitAndInstall(async (_e: any) => { - leaveChannel() - }) - }, []) - useEffect(() => { - window.electron.onUpdate((_e: any, data: any) => { - if (location.hash.indexOf('/meeting') === -1) { - updateModalRef.current.changeModal(data) - } - }) - if (!storage.getItem('setting')) { - storage.setItem('setting', JSON.stringify({ - videoDeviceId: '', //摄像头id - ecordingDeviceId: "", //输入设备id - playBackDeviceId: "", //输出设备id - ecordingVolume: '', //输入音量 - playBackVolume: '', //输出音量 - autoEcordingVolume: true, //是否自动调整麦克风音量 - recordingFilesPath: path.resolve(__dirname, '../../Downloads') + '\\', //本地录制保存路径 - shareFilesPath: path.resolve(__dirname, '../../Downloads/') + '\\', //共享文件保存路径 - isShareSavePath: true, //是否下载钱询问每个文件保存的位置 - closeSetting: 'hide', //关闭按钮设置 - })) - } - }, []) - useEffect(() => { - if (isState) { - setIsState(false) - window.electron.onQuit(async () => { - if (location.hash.indexOf('/login') === 1) { - window.electron.quit() - } else { - if (storage.getItem('isTips') === 'true') { - const setting = JSON.parse(storage.getItem('setting') as string) - if (setting.closeSetting === 'hide') { - window.electron.setViewStatus(setting.closeSetting) - } else { - window.electron.quit() - } + if (storage.getItem('isTips') === 'true') { + const setting = JSON.parse(storage.getItem('setting') as string) + if (setting.closeSetting === 'hide') { + window.electron.setViewStatus(setting.closeSetting) } else { - quitTipsRef.current.changeModal() + window.electron.quit() } + } else { + quitTipsRef.current.changeModal() } - }) - } - storage.setItem('stateInfo', JSON.stringify(state)) - }, [state]) - useEffect(() => { - if (location.href.indexOf('/login') !== -1) { - onStop() - } - if (location.href.indexOf('/meeting') === -1) { - window.electron.closeMonitorWindow() - } - }, [navigate]) - } + } + }) + } + storage.setItem('stateInfo', JSON.stringify(state)) + }, [state]) + useEffect(() => { + if (location.href.indexOf('/login') !== -1) { + onStop() + } + }, [navigate]) useEffect(() => { document.addEventListener('keydown', (event) => { if (event.key === 'F11') { @@ -259,7 +253,6 @@ const App: React.FC = () => { } /> } /> - } /> } /> diff --git a/src/page/UserVideo/index.module.scss b/src/components/UserVideo/index.module.scss similarity index 73% rename from src/page/UserVideo/index.module.scss rename to src/components/UserVideo/index.module.scss index 607f360..8886f70 100644 --- a/src/page/UserVideo/index.module.scss +++ b/src/components/UserVideo/index.module.scss @@ -2,40 +2,24 @@ width: 100%; height: 100%; background-color: rgb(7, 9, 11); - padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; - .userVideoTitle { - text-align: center; - color: white; - font-size: 20px; - flex-shrink: 0; - position: relative; - - >span { - cursor: pointer; - position: absolute; - right: 20px; - top: 50%; - transform: translate(0, -50%); - } - } .userVideoContent { flex-grow: 1; display: flex; flex-direction: column; - padding: 20px 40px 0; .userVideoContentHeader { + flex-shrink: 0; + margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; - flex-shrink: 0; - margin-bottom: 10px; - padding: 0 10px; + padding: 10px; + box-sizing: border-box; >div:nth-child(1) { display: flex; @@ -45,12 +29,16 @@ background-color: #181A1D; border-radius: 4px; padding: 4px 10px; + box-sizing: border-box; margin: 0 10px 0 0; + display: flex; + align-items: center; >span { color: #EEEEEE; - font-size: 14px; - margin-right: 10px; + font-size: 12px; + white-space: nowrap; + margin-right: 4px; } } } @@ -61,8 +49,8 @@ >span { color: #EEEEEE; - font-size: 14px; - margin-right: 10px; + font-size: 12px; + margin-right: 4px; } } } @@ -78,7 +66,7 @@ .userVideoContentListItem { height: 20%; - width: calc(100% / 4 - 20px); + width: calc(100% / 3 - 20px); padding: 10px; .userVideoContentListItemVideo { diff --git a/src/page/UserVideo/index.tsx b/src/components/UserVideo/index.tsx similarity index 85% rename from src/page/UserVideo/index.tsx rename to src/components/UserVideo/index.tsx index 774bc81..bd68e45 100644 --- a/src/page/UserVideo/index.tsx +++ b/src/components/UserVideo/index.tsx @@ -1,13 +1,14 @@ +import styles from '@/components/UserVideo/index.module.scss' import { GetPolling } from '@/api/Meeting'; -import styles from '@/page/UserVideo/index.module.scss' import { storage } from '@/utils'; import { agora } from '@/utils/package/agora'; -import { CloseOutlined } from '@ant-design/icons'; import { Button, Empty, Select, message } from 'antd'; import { useEffect, useState } from "react"; +import { useLocation } from 'react-router'; const UserVideo: React.FC = () => { let userInfo = JSON.parse(storage.getItem('user') as string) + const { state } = useLocation(); const [user, setUser] = useState({}); const [from, setFrom] = useState({ cycleIntervalList: [ @@ -77,15 +78,9 @@ const UserVideo: React.FC = () => { } }; - // 获取地址栏参数 - const getQueryParameterRegex = (name: string): string | null => { - const reg = new RegExp(`[?&]${name}=([^&#]*)`); - const results = window.location.href.match(reg); - return results === null ? null : results[1]; - } // 获取轮训用户 const getPolling = async (): Promise => { - GetPolling(getQueryParameterRegex('channelId')?.split('1')[0] as string, from.viewPeopleValue).then((res: any) => { + GetPolling(state.channelId?.split('1')[0] as string, from.viewPeopleValue).then((res: any) => { if (res.code === 200) { setUserList(res.data) } @@ -94,13 +89,7 @@ const UserVideo: React.FC = () => { return ( <>
-
- 会议监控 - { - window.electron.closeMonitorWindow() - }} /> -
-
+
@@ -108,6 +97,7 @@ const UserVideo: React.FC = () => { { setFrom({ ...from, viewPeopleValue: e }) }} /> @@ -127,6 +118,7 @@ const UserVideo: React.FC = () => { {timeNumber}秒后刷新 {timeStatus ?
{ - (statusList.userList || statusList.userChatList) ? ( + (statusList.userList || statusList.userChatList || statusList.userVideo) ? (
{statusList.userList ?
@@ -1565,6 +1575,7 @@ const Meeting: React.FC = () => { setStatusList({ userList: false, userChatList: false, + userVideo: false, }) }} />
@@ -1676,152 +1687,169 @@ const Meeting: React.FC = () => {
postOpenMicr(false, user.id, true)}>全员静音
- : -
-
- 聊天 - { - setStatusList({ - userList: false, - userChatList: false, - }) - }} /> -
-
- {chatList.map((item: any, index: number) => -
- {user.roleId === '1' ? { - if (e) { - GetRoomUserItem(state.channelId, item.uid).then((res: any) => { - if (res.code === 200) { - setRoomUserItem(res.data) - } - }) - } else { - setRoomUserItem(null) - } - }} - content={ - roomUserItem ?
- {roomUserItem.isRoomManager || roomUserItem.roleId === '1' ? : null} - {roomUserItem.uid !== user.uid && roomUserItem.roleId !== '1' ? : null} + {roomUserItem.uid !== user.uid && roomUserItem.roleId !== '1' ? : null} - {roomUserItem.isRoomManager ? : null} - {roomUserItem.isRoomManager ? : null} - {roomUserItem.uid !== user.uid ? : null} -
:
用户不在房间内
- }> -
+ await GetRoomUserItem(state.channelId, item.uid).then((res: any) => { + if (res.code === 200) { + setRoomUserItem(res.data) + } + }) + }} + >{roomUserItem.isRoomManager ? '取消发言人' : '设为发言人'} : null} + {roomUserItem.isRoomManager ? : null} + {roomUserItem.isRoomManager ? : null} + {roomUserItem.uid !== user.uid ? : null} +
:
用户不在房间内
+ }> +
+
+ {item.uid !== user.uid ? + {item.userName} {dayjs(item.timestamp).format('HH:mm:ss')} : + {dayjs(item.timestamp).format('HH:mm:ss')} {item.userName} + } + +
+ :
{item.uid !== user.uid ? - {item.userName} {dayjs(item.timestamp).format('HH:mm:ss')} : - {dayjs(item.timestamp).format('HH:mm:ss')} {item.userName} + {item.userName}{dayjs(item.timestamp).format('HH:mm:ss')} : + {dayjs(item.timestamp).format('HH:mm:ss')} {item.userName} } - -
- :
-
- {item.uid !== user.uid ? - {item.userName}{dayjs(item.timestamp).format('HH:mm:ss')} : - {dayjs(item.timestamp).format('HH:mm:ss')} {item.userName} - } -
} -
{item.message}
-
- )} +
} +
{item.message}
+
+ )} +
+
+ { + commonlyChatList.map((item: string, index: number) => { + return + }) + } +
+
+ { + setTextMsg(e.target.value) + }}> + +
-
- { - commonlyChatList.map((item: string, index: number) => { - return - }) - } + : +
+
+ 会议监控 + { + setStatusList({ + userList: false, + userChatList: false, + userVideo: false, + }) + }} /> +
+
+ +
-
- { - setTextMsg(e.target.value) - }}> - -
-
}
) : null @@ -1914,7 +1942,7 @@ const Meeting: React.FC = () => { onMouseUp={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} onMouseLeave={() => changeFooterListSelect(row, itemIndex, rowIndex, false)} key={rowIndex}> - {row.select ? : } + {statusList.userVideo ? : row.select ? : } {row.title} } diff --git a/src/render.d.ts b/src/render.d.ts index e0a5232..cd72d54 100644 --- a/src/render.d.ts +++ b/src/render.d.ts @@ -15,9 +15,6 @@ export interface IElectronAPI { downFile: (callBack: Function) => void; quitAndInstall: (callBack: Function) => void; getVersion: () => Promise; - oepnWindow: (data: any) => any; - - closeMonitorWindow: () => void } declare global {