设置新增通用

This commit is contained in:
yj 2024-08-13 09:36:11 +08:00
parent a4b5e86cbf
commit a50aa756e5
3 changed files with 63 additions and 22 deletions

View File

@ -173,6 +173,7 @@ const App: React.FC = () => {
recordingFilesPath: '', //本地录制保存路径
shareFilesPath: '', //共享文件保存路径
isShareSavePath: true, //是否下载钱询问每个文件保存的位置
closeSetting: 'hide', //关闭按钮设置
}))
}
}, [])

View File

@ -209,4 +209,20 @@
white-space: nowrap;
}
}
}
.currencyComponents {
>div {
>div {
display: flex;
flex-direction: column;
>span {
color: #bfbfbf;
font-size: 16px;
}
}
}
}

View File

@ -1,6 +1,6 @@
import styles from '@/components/StupWizard/index.module.scss'
import ImageUrl from '@/utils/package/ImageUrl';
import { Button, Checkbox, Empty, Input, Modal, Popover, Select, Slider, message } from 'antd';
import { Button, Checkbox, Empty, Input, Modal, Popover, Radio, Select, Slider, message } from 'antd';
import { useState, useImperativeHandle, forwardRef, useEffect } from "react";
import agora from '@/utils/package/agora'
import { CloseOutlined, LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
@ -19,11 +19,17 @@ const StupWizard = forwardRef((props: any, ref: any) => {
}))
const [list, setList] = useState([
{
title: '视频',
title: '通用',
icon: ImageUrl.icon39,
iconActive: ImageUrl.icon39Active,
active: true,
},
{
title: '视频',
icon: ImageUrl.icon39,
iconActive: ImageUrl.icon39Active,
active: false,
},
{
title: '音频',
icon: ImageUrl.icon40,
@ -88,27 +94,56 @@ const StupWizard = forwardRef((props: any, ref: any) => {
setIsStupWizard(false)
}}
/>
{list[0].active ? <VideoComponents /> : null}
{list[1].active ? <AudioComponents /> : null}
{list[2].active ? <RecordingComponents /> : null}
{list[3].active ? <FileComponents /> : null}
{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 setting = await JSON.parse(storage.getItem('setting') as string)
const userInfo = JSON.parse(storage.getItem('user') as string)
agora.getVideoDeviceManager().then(async (res) => {
const { item, list } = res
@ -181,7 +216,6 @@ const VideoComponents = () => {
placeholder={videoDeviceManager.list.length ? '请选择设备' : '未检测到摄像头'}
options={videoDeviceManager.list} style={{ flexGrow: 1, marginRight: '10px' }}
value={videoDeviceManager.item} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.videoDeviceId = e;
storage.setItem('setting', JSON.stringify(setting))
setVideoDeviceManager({
@ -209,6 +243,7 @@ const AudioComponents = () => {
ecordingVolume: 0,
autoEcordingVolume: true,
});
const setting = JSON.parse(storage.getItem('setting') as string)
useEffect(() => {
getAudioMediaList()
agora.registerEventHandler({
@ -222,7 +257,6 @@ const AudioComponents = () => {
}, []);
const getAudioMediaList = async (): Promise<void> => {
const { playBackList, ecordingList, playBackItem, ecordingItem, ecordingVolume } = await agora.getAudioMediaList();
const setting = await JSON.parse(storage.getItem('setting') as string)
if ((!setting.ecordingDeviceId && ecordingItem.deviceId) || (!(ecordingList.find((item: any) => item.deviceId === setting.ecordingDeviceId)) && ecordingItem.deviceId)) {
setting.ecordingDeviceId = ecordingItem.deviceId
}
@ -275,7 +309,6 @@ const AudioComponents = () => {
placeholder={audioDeviceManager.ecordingList.length ? '请选择设备' : '未检测到麦克风'}
options={audioDeviceManager.ecordingList} style={{ flexGrow: 1 }}
value={audioDeviceManager.ecordingItem} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.ecordingDeviceId = e;
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({
@ -313,7 +346,6 @@ const AudioComponents = () => {
<div className={styles.audioComponentsSlider}>
<span></span>
<Slider value={audioDeviceManager.ecordingVolume} style={{ flexGrow: 1 }} max={255} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.ecordingVolume = e;
storage.setItem('setting', JSON.stringify(setting))
await agora.setRecordingDeviceVolume(e)
@ -325,7 +357,6 @@ const AudioComponents = () => {
</div>
<div>
<Checkbox onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.autoEcordingVolume = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({
@ -342,7 +373,6 @@ const AudioComponents = () => {
placeholder={audioDeviceManager.playBackList.length ? '请选择设备' : '未检测到麦克风'}
options={audioDeviceManager.playBackList} style={{ flexGrow: 1 }}
value={audioDeviceManager.playBackItem} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.playBackDeviceId = e;
storage.setItem('setting', JSON.stringify(setting))
setAudioDeviceManager({
@ -380,7 +410,6 @@ const AudioComponents = () => {
<div className={styles.audioComponentsSlider}>
<span></span>
<Slider value={audioDeviceManager.playBackVolume} style={{ flexGrow: 1 }} max={255} onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.playBackVolume = e;
storage.setItem('setting', JSON.stringify(setting))
agora.setPlaybackDeviceVolume(e)
@ -398,8 +427,8 @@ const AudioComponents = () => {
}
const RecordingComponents = () => {
const [filePath, setFilePath] = useState('')
const setting = JSON.parse(storage.getItem('setting') as string)
useEffect(() => {
const setting = JSON.parse(storage.getItem('setting') as string)
if (!setting.recordingFilesPath) {
setting.recordingFilesPath = path.dirname(process.execPath) + '\\';
setFilePath(setting.recordingFilesPath)
@ -414,7 +443,6 @@ const RecordingComponents = () => {
}, [])
const handleCustomStorageChange = (e: any): void => {
if (e.key === 'setting') {
const setting = JSON.parse(storage.getItem('setting') as string)
setFilePath(setting.recordingFilesPath)
}
};
@ -432,7 +460,6 @@ const RecordingComponents = () => {
style={{ margin: '0 14px', flexGrow: 1 }}
value={filePath}
onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.recordingFilesPath = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setFilePath(e.target.value)
@ -468,8 +495,8 @@ const RecordingComponents = () => {
const FileComponents = () => {
const [filePath, setFilePath] = useState('')
const [isShareSavePath, setIsShareSavePath] = useState(true)
const setting = JSON.parse(storage.getItem('setting') as string)
useEffect(() => {
const setting = JSON.parse(storage.getItem('setting') as string)
if (!setting.shareFilesPath) {
setting.shareFilesPath = path.dirname(process.execPath) + '\\';
setFilePath(setting.shareFilesPath)
@ -485,7 +512,6 @@ const FileComponents = () => {
}, [])
const handleCustomStorageChange = (e: any): void => {
if (e.key === 'setting') {
const setting = JSON.parse(storage.getItem('setting') as string)
setFilePath(setting.shareFilesPath)
}
};
@ -503,7 +529,6 @@ const FileComponents = () => {
style={{ margin: '0 14px', flexGrow: 1 }}
value={filePath}
onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.shareFilesPath = e.target.value;
storage.setItem('setting', JSON.stringify(setting))
setFilePath(e.target.value)
@ -533,7 +558,6 @@ const FileComponents = () => {
</div>
<div>
<Checkbox onChange={async (e) => {
const setting = await JSON.parse(storage.getItem('setting') as string)
setting.isShareSavePath = e.target.checked;
storage.setItem('setting', JSON.stringify(setting))
setIsShareSavePath(e.target.checked)