95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
/**
|
|
* Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
|
|
* SPDX-license-identifier: BSD-3-Clause
|
|
*/
|
|
|
|
import { useMemo } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { MediaType } from '@volcengine/rtc';
|
|
import { Switch, Select } from '@arco-design/web-react';
|
|
import DrawerRowItem from '@/components/DrawerRowItem';
|
|
import { RootState } from '@/store';
|
|
import RtcClient from '@/lib/RtcClient';
|
|
import { useDeviceState } from '@/lib/useCommon';
|
|
import { updateSelectedDevice } from '@/store/slices/device';
|
|
import utils from '@/utils/utils';
|
|
import styles from './index.module.less';
|
|
|
|
interface IDeviceDrawerButtonProps {
|
|
type?: MediaType.AUDIO | MediaType.VIDEO;
|
|
}
|
|
|
|
const DEVICE_NAME = {
|
|
[MediaType.AUDIO]: '麦克风',
|
|
[MediaType.VIDEO]: '摄像头',
|
|
};
|
|
|
|
function DeviceDrawerButton(props: IDeviceDrawerButtonProps) {
|
|
const { type = MediaType.AUDIO } = props;
|
|
const device = useDeviceState();
|
|
const isEnable = type === MediaType.AUDIO ? device.isAudioPublished : device.isVideoPublished;
|
|
const switcher = type === MediaType.AUDIO ? device.switchMic : device.switchCamera;
|
|
const devicePermissions = useSelector((state: RootState) => state.device.devicePermissions);
|
|
const devices = useSelector((state: RootState) => state.device);
|
|
const selectedDevice =
|
|
type === MediaType.AUDIO ? devices.selectedMicrophone : devices.selectedCamera;
|
|
const permission = devicePermissions?.[type === MediaType.AUDIO ? 'audio' : 'video'];
|
|
|
|
const dispatch = useDispatch();
|
|
const deviceList = useMemo(
|
|
() => (type === MediaType.AUDIO ? devices.audioInputs : devices.videoInputs),
|
|
[devices]
|
|
);
|
|
|
|
const handleDeviceChange = (value: string) => {
|
|
RtcClient.switchDevice(type, value);
|
|
if (type === MediaType.AUDIO) {
|
|
dispatch(
|
|
updateSelectedDevice({
|
|
selectedMicrophone: value,
|
|
})
|
|
);
|
|
}
|
|
if (type === MediaType.VIDEO) {
|
|
dispatch(
|
|
updateSelectedDevice({
|
|
selectedCamera: value,
|
|
})
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DrawerRowItem
|
|
btnText={`${DEVICE_NAME[type]}设置`}
|
|
drawer={{
|
|
width: utils.isMobile() ? '100%' : undefined,
|
|
title: `${DEVICE_NAME[type]}设置`,
|
|
footer: false,
|
|
children: (
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.label}>{DEVICE_NAME[type]}</div>
|
|
<div className={styles.value}>
|
|
<Switch
|
|
checked={isEnable}
|
|
size="small"
|
|
onChange={(enable) => switcher(enable)}
|
|
disabled={!permission}
|
|
/>
|
|
<Select style={{ width: 250 }} value={selectedDevice} onChange={handleDeviceChange}>
|
|
{deviceList.map((device) => (
|
|
<Select.Option key={device.deviceId} value={device.deviceId}>
|
|
{device.label}
|
|
</Select.Option>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
),
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default DeviceDrawerButton;
|