hides mic switch the right way

This commit is contained in:
Sara
2023-10-04 15:45:21 +02:00
parent 12ad721c1f
commit d08962a610
2 changed files with 6 additions and 15 deletions

View File

@@ -6,19 +6,9 @@ const AudioInputsDropdown: React.FC<{
audioDevices: Option[]; audioDevices: Option[];
disabled: boolean; disabled: boolean;
hide: () => void; hide: () => void;
deviceId: string;
setDeviceId: React.Dispatch<React.SetStateAction<string | null>>; setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
}> = (props) => { }> = (props) => {
const [ddOptions, setDdOptions] = useState<Option[]>([]);
useEffect(() => {
if (props.audioDevices) {
setDdOptions(props.audioDevices);
props.setDeviceId(
props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
);
}
}, [props.audioDevices]);
const handleDropdownChange = (option: Option) => { const handleDropdownChange = (option: Option) => {
props.setDeviceId(option.value); props.setDeviceId(option.value);
props.hide(); props.hide();
@@ -26,9 +16,9 @@ const AudioInputsDropdown: React.FC<{
return ( return (
<Dropdown <Dropdown
options={ddOptions} options={props.audioDevices}
onChange={handleDropdownChange} onChange={handleDropdownChange}
value={ddOptions[0]} value={props.deviceId}
className="flex-grow w-full" className="flex-grow w-full"
disabled={props.disabled} disabled={props.disabled}
/> />

View File

@@ -279,7 +279,7 @@ export default function Recorder(props: RecorderProps) {
useEffect(() => { useEffect(() => {
if (props.audioDevices && props.audioDevices.length > 0) { if (props.audioDevices && props.audioDevices.length > 0) {
setDeviceId[props.audioDevices[0].value]; setDeviceId(props.audioDevices[0].value);
} }
}, [props.audioDevices]); }, [props.audioDevices]);
@@ -347,7 +347,7 @@ export default function Recorder(props: RecorderProps) {
> >
{isRecording ? "Stop" : "Record"} {isRecording ? "Stop" : "Record"}
</button> </button>
{props.audioDevices && props.audioDevices?.length > 0 && ( {props.audioDevices && props.audioDevices?.length > 0 && deviceId && (
<> <>
<button <button
className="text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg focus-visible:outline outline-blue-400" className="text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg focus-visible:outline outline-blue-400"
@@ -365,6 +365,7 @@ export default function Recorder(props: RecorderProps) {
audioDevices={props.audioDevices} audioDevices={props.audioDevices}
disabled={recordStarted} disabled={recordStarted}
hide={() => setShowDevices(false)} hide={() => setShowDevices(false)}
deviceId={deviceId}
/> />
</div> </div>
</> </>