635 lines
29 KiB
TypeScript
635 lines
29 KiB
TypeScript
import styles from '@/components/StupWizard/index.module.scss'
|
||
import ImageUrl from '@/utils/package/imageUrl';
|
||
import { Button, Checkbox, Empty, Input, message, Modal, Popover, Radio, Select, Slider, Space } from 'antd';
|
||
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
|
||
import { agora } from '@/utils/package/agora'
|
||
import { CloseOutlined, LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
|
||
import { storage } from '@/utils';
|
||
import path from 'path';
|
||
import { getKeyOpenChildWindow } from '@/utils/package/public';
|
||
|
||
const fs = require('fs').promises;
|
||
const { exec } = require('child_process');
|
||
const StupWizard = forwardRef((props: any, ref: any) => {
|
||
useImperativeHandle(ref, () => ({
|
||
changeModal: (index: number = 0) => {
|
||
if (location.hash.indexOf('/meeting') === -1) {
|
||
agora.init()
|
||
}
|
||
setList((res: any) => {
|
||
res.forEach((item: any) => {
|
||
item.active = false
|
||
});
|
||
res[index].active = true;
|
||
return res
|
||
})
|
||
setIsStupWizard(true)
|
||
}
|
||
}))
|
||
const [list, setList] = useState([
|
||
{
|
||
title: '通用',
|
||
icon: ImageUrl.icon45,
|
||
iconActive: ImageUrl.icon45Active,
|
||
active: true,
|
||
},
|
||
{
|
||
title: '视频',
|
||
icon: ImageUrl.icon39,
|
||
iconActive: ImageUrl.icon39Active,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '音频',
|
||
icon: ImageUrl.icon40,
|
||
iconActive: ImageUrl.icon40Active,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '录制',
|
||
icon: ImageUrl.icon41,
|
||
iconActive: ImageUrl.icon41Active,
|
||
active: false,
|
||
},
|
||
{
|
||
title: '文件下载',
|
||
icon: ImageUrl.icon42,
|
||
iconActive: ImageUrl.icon42Active,
|
||
active: false,
|
||
}
|
||
])
|
||
const [isStupWizard, setIsStupWizard] = useState(false);
|
||
return (
|
||
<>
|
||
<Modal
|
||
title=""
|
||
open={isStupWizard}
|
||
footer={null}
|
||
closable={false}
|
||
destroyOnClose={true}
|
||
centered
|
||
width={'70vw'}
|
||
className='modal-padding'>
|
||
<div className={styles.stupWizard}>
|
||
<div className={styles.stupWizardLeft}>
|
||
{list.map((row: any, index: number) => {
|
||
return (
|
||
<div key={index} className={`${row.active ? styles.active : ''}`} onClick={async () => {
|
||
const newList = [...list];
|
||
newList.forEach(item => item.active = false);
|
||
newList[index].active = true;
|
||
setList(newList)
|
||
agora.stopPlaybackDeviceTest()
|
||
agora.stopRecordingDeviceTest()
|
||
}}>
|
||
<img src={row.active ? row.iconActive : row.icon} alt="" />
|
||
<span>{row.title}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
<div className={styles.stupWizardRight}>
|
||
<CloseOutlined style={{
|
||
position: 'absolute',
|
||
color: 'white',
|
||
right: '20px',
|
||
top: '16px',
|
||
cursor: 'pointer'
|
||
}}
|
||
onClick={async () => {
|
||
if (location.hash.indexOf('/meeting') === -1) {
|
||
agora.release()
|
||
}
|
||
const isOpen = await getKeyOpenChildWindow('shareScreenWindow')
|
||
if (isOpen) {
|
||
window.electron.mainWindowHide()
|
||
}
|
||
setIsStupWizard(false)
|
||
}}
|
||
/>
|
||
{list[0].active ? <CurrencyComponents /> : null}
|
||
{list[1].active ? <VideoComponents /> : null}
|
||
{list[2].active ? <AudioComponents /> : null}
|
||
{list[3].active ? <RecordingComponents /> : null}
|
||
{list[4].active ? <FileComponents /> : null}
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</>
|
||
)
|
||
})
|
||
const CurrencyComponents = () => {
|
||
const [optionsValue, setOperationValue] = useState<'hide' | 'quit'>('hide');
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
useEffect(() => {
|
||
setOperationValue(setting.closeSetting)
|
||
}, []);
|
||
return (
|
||
<>
|
||
<div>
|
||
<span>通用</span>
|
||
<div className={styles.currencyComponents}>
|
||
<div>
|
||
<div>
|
||
<span>关闭按钮设置</span>
|
||
<Radio.Group onChange={(e: any) => {
|
||
setting.closeSetting = e.target.value;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setOperationValue(e.target.value)
|
||
}} style={{ flexShrink: 0, margin: '10px 0' }} value={optionsValue}>
|
||
<Radio value={'quit'}>退出主程序</Radio>
|
||
<Radio value={'hide'}>不退出程序，最小化到托盘</Radio>
|
||
</Radio.Group>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
const VideoComponents = () => {
|
||
const [videoDeviceManager, setVideoDeviceManager] = useState<any>({
|
||
list: [],
|
||
item: null,
|
||
});
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
useEffect(() => {
|
||
getVideoDeviceList()
|
||
}, []);
|
||
const getVideoDeviceList = async (): Promise<void> => {
|
||
const userInfo = JSON.parse(storage.getItem('user') as string)
|
||
agora.getVideoDeviceManager().then(async (res) => {
|
||
const { list } = res
|
||
setVideoDeviceManager({
|
||
list: list.map((row: any) => {
|
||
return {
|
||
value: row.deviceId,
|
||
label: row.deviceName
|
||
}
|
||
}),
|
||
item: setting.videoDeviceId,
|
||
})
|
||
if (setting.videoDeviceId && list.length) {
|
||
await agora.setVideoDeviceManager(setting.videoDeviceId)
|
||
await agora.startPreview('videoPreview', Number(userInfo.screenShareId))
|
||
}
|
||
})
|
||
}
|
||
return (
|
||
<>
|
||
<div>
|
||
<span>视频</span>
|
||
<div className={styles.videoComponents}>
|
||
{
|
||
videoDeviceManager.item ?
|
||
<div>
|
||
<div id='videoPreview'>
|
||
<LoadingOutlined style={{
|
||
position: 'absolute',
|
||
color: 'white',
|
||
right: '50%',
|
||
fontSize: '30px',
|
||
top: '50%',
|
||
}} />
|
||
</div>
|
||
</div> :
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||
<Empty description={'未检测到摄像头'} />
|
||
</div>
|
||
</div>
|
||
}
|
||
<div>
|
||
<span>摄像头：</span>
|
||
<Popover
|
||
content={
|
||
<span
|
||
style={{
|
||
color: 'white'
|
||
}}>
|
||
解释说明：如未检测到摄像头请插拔后重试
|
||
</span>
|
||
}
|
||
title=""
|
||
>
|
||
<QuestionCircleOutlined style={{
|
||
color: 'white',
|
||
cursor: 'pointer',
|
||
marginRight: '10px'
|
||
}} />
|
||
</Popover>
|
||
<Select
|
||
placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'}
|
||
options={videoDeviceManager.list} style={{ flexGrow: 1, marginRight: '10px' }}
|
||
value={videoDeviceManager.item} onChange={async (e) => {
|
||
setting.videoDeviceId = e;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setVideoDeviceManager({
|
||
...videoDeviceManager,
|
||
item: e
|
||
})
|
||
agora.setVideoDeviceManager(e)
|
||
}} />
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
const AudioComponents = () => {
|
||
const [audioDeviceManager, setAudioDeviceManager] = useState<any>({
|
||
playBackList: [],
|
||
ecordingList: [],
|
||
playBackItem: null,
|
||
ecordingItem: null,
|
||
playBackVolume: 0,
|
||
playBackActive: false,
|
||
ecordingActive: false,
|
||
ecordingVolume: 0,
|
||
autoEcordingVolume: true,
|
||
isAINoiseReduction: true,
|
||
aINoiseReduction: 1
|
||
});
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
useEffect(() => {
|
||
getAudioMediaList()
|
||
agora.registerEventHandler({
|
||
onAudioVolumeIndication: (speakers: any) => {
|
||
const totalVolume = speakers.length ? speakers[0].volume : 0
|
||
const percentage = (totalVolume / 255) * 100
|
||
const dom = document.getElementById('deviceTest') as any;
|
||
if (dom) {
|
||
dom.style.width = `${percentage}%`
|
||
}
|
||
}
|
||
})
|
||
}, []);
|
||
const getAudioMediaList = async (): Promise<void> => {
|
||
const {
|
||
playBackList,
|
||
ecordingList,
|
||
ecordingVolume
|
||
} = await agora.getAudioMediaList();
|
||
if (!setting.ecordingVolume) {
|
||
setting.ecordingVolume = ecordingVolume;
|
||
}
|
||
if (!setting.playBackVolume) {
|
||
setting.playBackVolume = 127;
|
||
}
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackList: playBackList.map((row: any) => {
|
||
return {
|
||
value: row.deviceId,
|
||
label: row.deviceName
|
||
}
|
||
}),
|
||
ecordingList: ecordingList.map((row: any) => {
|
||
return {
|
||
value: row.deviceId,
|
||
label: row.deviceName
|
||
}
|
||
}),
|
||
playBackItem: setting.playBackDeviceId,
|
||
ecordingItem: setting.ecordingDeviceId,
|
||
ecordingVolume: setting.ecordingVolume,
|
||
playBackVolume: setting.playBackVolume,
|
||
autoEcordingVolume: setting.autoEcordingVolume,
|
||
isAINoiseReduction: setting.isAINoiseReduction,
|
||
aINoiseReduction: setting.aINoiseReduction,
|
||
})
|
||
}
|
||
return (
|
||
<>
|
||
<div>
|
||
<span>音频</span>
|
||
<div className={styles.audioComponents}>
|
||
<div>
|
||
<div className={styles.audioComponentsSelect}>
|
||
<span>麦克风：</span>
|
||
<Select
|
||
placeholder={audioDeviceManager.ecordingList.length ? '请选择设备' : '未检测到麦克风'}
|
||
options={audioDeviceManager.ecordingList} style={{ flexGrow: 1 }}
|
||
value={audioDeviceManager.ecordingItem} onChange={async (e) => {
|
||
setting.ecordingDeviceId = e;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
ecordingItem: e
|
||
})
|
||
agora.setRecordingDevice(e)
|
||
}} />;
|
||
{audioDeviceManager.ecordingActive ? <div onClick={() => {
|
||
agora.stopRecordingDeviceTest()
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackActive: false,
|
||
ecordingActive: false,
|
||
})
|
||
}}>结束</div> : <div onClick={() => {
|
||
agora.stopPlaybackDeviceTest()
|
||
agora.startRecordingDeviceTest(100)
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackActive: false,
|
||
ecordingActive: true,
|
||
})
|
||
}}>测试</div>}
|
||
</div>
|
||
{audioDeviceManager.ecordingActive ? <div className={styles.audioComponentsVolume}>
|
||
<img src={ImageUrl.icon36} alt="" />
|
||
<div>
|
||
<img src={ImageUrl.icon34} alt="" />
|
||
<div id='deviceTest'>
|
||
<img src={ImageUrl.icon35} alt="" />
|
||
</div>
|
||
</div>
|
||
</div> : null}
|
||
<div className={styles.audioComponentsSlider}>
|
||
<span>输入音量：</span>
|
||
<Slider value={audioDeviceManager.ecordingVolume} style={{ flexGrow: 1 }} max={255}
|
||
onChange={async (e) => {
|
||
setting.ecordingVolume = e;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
await agora.setRecordingDeviceVolume(e)
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
ecordingVolume: e,
|
||
})
|
||
}} disabled={!audioDeviceManager.ecordingItem} />
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<Checkbox checked={audioDeviceManager.isAINoiseReduction} onChange={(e) => {
|
||
setting.isAINoiseReduction = e.target.checked;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
isAINoiseReduction: e.target.checked
|
||
})
|
||
agora.setAINSMode(e.target.checked, audioDeviceManager.aINoiseReduction)
|
||
}}>
|
||
AI降噪
|
||
</Checkbox>
|
||
</div>
|
||
<div style={{ margin: '10px 0 0 20px' }}>
|
||
<Radio.Group onChange={(e) => {
|
||
setting.aINoiseReduction = e.target.value;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
aINoiseReduction: e.target.value
|
||
})
|
||
agora.setAINSMode(audioDeviceManager.isAINoiseReduction, e.target.value)
|
||
}} disabled={!audioDeviceManager.isAINoiseReduction} value={audioDeviceManager.aINoiseReduction}>
|
||
<Space direction="vertical">
|
||
<Radio value={0}>均衡降噪模式</Radio>
|
||
<Radio value={1}>强降噪模式</Radio>
|
||
<Radio value={2}>低延时强降噪模式</Radio>
|
||
</Space>
|
||
</Radio.Group>
|
||
</div>
|
||
</div>
|
||
{/* <div>
|
||
<Checkbox onChange={async (e) => {
|
||
setting.autoEcordingVolume = e.target.checked;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
autoEcordingVolume: e.target.checked
|
||
})
|
||
}} checked={audioDeviceManager.autoEcordingVolume}>自动调整麦克风音量</Checkbox>
|
||
</div> */}
|
||
</div>
|
||
<div>
|
||
<div className={styles.audioComponentsSelect}>
|
||
<span>扬声器：</span>
|
||
<Select
|
||
placeholder={audioDeviceManager.playBackList.length ? '请选择设备' : '未检测到麦克风'}
|
||
options={audioDeviceManager.playBackList} style={{ flexGrow: 1 }}
|
||
value={audioDeviceManager.playBackItem} onChange={async (e) => {
|
||
setting.playBackDeviceId = e;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackItem: e
|
||
})
|
||
agora.setPlaybackDevice(e)
|
||
}} />;
|
||
{audioDeviceManager.playBackActive ? <div onClick={() => {
|
||
agora.stopPlaybackDeviceTest()
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackActive: false,
|
||
ecordingActive: false,
|
||
})
|
||
}}>结束</div> : <div onClick={() => {
|
||
agora.stopRecordingDeviceTest()
|
||
agora.startPlaybackDeviceTest()
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackActive: true,
|
||
ecordingActive: false,
|
||
})
|
||
}}>测试</div>}
|
||
</div>
|
||
{audioDeviceManager.playBackActive ? <div className={styles.audioComponentsVolume}>
|
||
<img src={ImageUrl.icon36} alt="" />
|
||
<div>
|
||
<img src={ImageUrl.icon34} alt="" />
|
||
<div id='deviceTest'>
|
||
<img src={ImageUrl.icon35} alt="" />
|
||
</div>
|
||
</div>
|
||
</div> : null}
|
||
<div className={styles.audioComponentsSlider}>
|
||
<span>输出音量：</span>
|
||
<Slider value={audioDeviceManager.playBackVolume} style={{ flexGrow: 1 }} max={255}
|
||
onChange={async (e) => {
|
||
setting.playBackVolume = e;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
agora.setPlaybackDeviceVolume(e)
|
||
setAudioDeviceManager({
|
||
...audioDeviceManager,
|
||
playBackVolume: e,
|
||
})
|
||
}} disabled={!audioDeviceManager.playBackItem} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
const RecordingComponents = () => {
|
||
const [filePath, setFilePath] = useState('')
|
||
const [isRecordingTips, setIsRecordingTips] = useState(false)
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
useEffect(() => {
|
||
if (!setting.recordingFilesPath) {
|
||
// 获取安装父目录
|
||
const currentDirectory = __dirname;
|
||
const parentDirectory = path.resolve(currentDirectory, '../../Downloads') + '\\';
|
||
setting.recordingFilesPath = parentDirectory;
|
||
setFilePath(setting.recordingFilesPath)
|
||
} else {
|
||
setFilePath(setting.recordingFilesPath);
|
||
}
|
||
if (setting.isRecordingTips === undefined) {
|
||
setting.isRecordingTips = true;
|
||
}
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setIsRecordingTips(setting.isRecordingTips)
|
||
window.addEventListener('customStorageChange', handleCustomStorageChange);
|
||
return () => {
|
||
window.removeEventListener('customStorageChange', handleCustomStorageChange);
|
||
};
|
||
}, [])
|
||
const handleCustomStorageChange = (e: any): void => {
|
||
if (e.key === 'setting') {
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
setFilePath(setting.recordingFilesPath)
|
||
}
|
||
};
|
||
return (
|
||
<>
|
||
<div>
|
||
<span>录制</span>
|
||
<div className={styles.recordingComponents}>
|
||
<div>
|
||
<span>本地录制</span>
|
||
<div>
|
||
<span>本地录制文件路径</span>
|
||
<Input
|
||
disabled={true}
|
||
placeholder="请填入文件路径"
|
||
style={{ margin: '0 14px', flexGrow: 1 }}
|
||
value={filePath}
|
||
onChange={async (e) => {
|
||
setting.recordingFilesPath = e.target.value;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setFilePath(e.target.value)
|
||
}}
|
||
/>
|
||
<Button type="primary" onClick={() => {
|
||
window.electron.selectFilePath({
|
||
key: 'recordingFilesPath',
|
||
})
|
||
}} style={{ backgroundColor: '#31353A', marginRight: '10px' }}>选择保存目录</Button>
|
||
<Button type="primary" onClick={async () => {
|
||
try {
|
||
await fs.access(filePath, fs.constants.F_OK);
|
||
if (process.platform === 'win32') {
|
||
exec(`explorer "${filePath}"`);
|
||
} else if (process.platform === 'darwin') {
|
||
exec(`open "${filePath}"`);
|
||
}
|
||
} catch (error: any) {
|
||
if (error.code === 'ENOENT') {
|
||
message.error('文件夹不存在！')
|
||
} else {
|
||
message.error(error)
|
||
}
|
||
}
|
||
}} style={{ backgroundColor: '#31353A' }}>打开</Button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span>录制设置</span>
|
||
<div>
|
||
<Checkbox onChange={async (e) => {
|
||
setting.isRecordingTips = e.target.checked;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setIsRecordingTips(e.target.checked)
|
||
}} checked={isRecordingTips}>开启入会录制提示</Checkbox>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
const FileComponents = () => {
|
||
const [filePath, setFilePath] = useState('')
|
||
const [isShareSavePath, setIsShareSavePath] = useState(true)
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
useEffect(() => {
|
||
if (!setting.shareFilesPath) {
|
||
// 获取安装父目录
|
||
const currentDirectory = __dirname;
|
||
const parentDirectory = path.resolve(currentDirectory, '../../Downloads') + '\\';
|
||
setting.shareFilesPath = parentDirectory
|
||
setFilePath(setting.shareFilesPath)
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
} else {
|
||
setFilePath(setting.shareFilesPath);
|
||
}
|
||
setIsShareSavePath(setting.isShareSavePath)
|
||
window.addEventListener('customStorageChange', handleCustomStorageChange);
|
||
return () => {
|
||
window.removeEventListener('customStorageChange', handleCustomStorageChange);
|
||
};
|
||
}, [])
|
||
const handleCustomStorageChange = (e: any): void => {
|
||
if (e.key === 'setting') {
|
||
const setting = JSON.parse(storage.getItem('setting') as string)
|
||
setFilePath(setting.shareFilesPath)
|
||
}
|
||
};
|
||
return (
|
||
<>
|
||
<div>
|
||
<span>文件下载</span>
|
||
<div className={styles.fileComponents}>
|
||
<span>文件下载</span>
|
||
<div>
|
||
<span>保存位置</span>
|
||
<Input
|
||
disabled={true}
|
||
placeholder="请填入保存目录"
|
||
style={{ margin: '0 14px', flexGrow: 1 }}
|
||
value={filePath}
|
||
onChange={async (e) => {
|
||
setting.shareFilesPath = e.target.value;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setFilePath(e.target.value)
|
||
}}
|
||
/>
|
||
<Button type="primary" onClick={() => {
|
||
window.electron.selectFilePath({
|
||
key: 'shareFilesPath',
|
||
})
|
||
}} style={{ backgroundColor: '#31353A', marginRight: '10px' }}>选择保存目录</Button>
|
||
<Button type="primary" onClick={async () => {
|
||
try {
|
||
await fs.access(filePath, fs.constants.F_OK);
|
||
if (process.platform === 'win32') {
|
||
exec(`explorer "${filePath}"`);
|
||
} else if (process.platform === 'darwin') {
|
||
exec(`open "${filePath}"`);
|
||
}
|
||
} catch (error: any) {
|
||
if (error.code === 'ENOENT') {
|
||
message.error('文件夹不存在！')
|
||
} else {
|
||
message.error(error)
|
||
}
|
||
}
|
||
}} style={{ backgroundColor: '#31353A' }}>打开</Button>
|
||
</div>
|
||
<div>
|
||
<Checkbox onChange={async (e) => {
|
||
setting.isShareSavePath = e.target.checked;
|
||
storage.setItem('setting', JSON.stringify(setting))
|
||
setIsShareSavePath(e.target.checked)
|
||
}} checked={isShareSavePath}>下载前询问每个文件保存位置</Checkbox>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default StupWizard
|