65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { Dropdown } from "../ui/Dropdown";
|
|
import { SettingContainer } from "../ui/SettingContainer";
|
|
import { ResetButton } from "../ui/ResetButton";
|
|
import { useSettings } from "../../hooks/useSettings";
|
|
|
|
interface MicrophoneSelectorProps {
|
|
descriptionMode?: "inline" | "tooltip";
|
|
grouped?: boolean;
|
|
}
|
|
|
|
export const MicrophoneSelector: React.FC<MicrophoneSelectorProps> = React.memo(({
|
|
descriptionMode = "tooltip",
|
|
grouped = false,
|
|
}) => {
|
|
const {
|
|
getSetting,
|
|
updateSetting,
|
|
resetSetting,
|
|
isUpdating,
|
|
isLoading,
|
|
audioDevices,
|
|
refreshAudioDevices,
|
|
} = useSettings();
|
|
|
|
const selectedMicrophone = getSetting("selected_microphone") === "default" ? "Default" : getSetting("selected_microphone") || "Default";
|
|
|
|
|
|
const handleMicrophoneSelect = async (deviceName: string) => {
|
|
await updateSetting("selected_microphone", deviceName);
|
|
};
|
|
|
|
const handleReset = async () => {
|
|
await resetSetting("selected_microphone");
|
|
};
|
|
|
|
const microphoneOptions = audioDevices.map(device => ({
|
|
value: device.name,
|
|
label: device.name
|
|
}));
|
|
|
|
return (
|
|
<SettingContainer
|
|
title="Microphone"
|
|
description="Select your preferred microphone device"
|
|
descriptionMode={descriptionMode}
|
|
grouped={grouped}
|
|
>
|
|
<div className="flex items-center space-x-1">
|
|
<Dropdown
|
|
options={microphoneOptions}
|
|
selectedValue={selectedMicrophone}
|
|
onSelect={handleMicrophoneSelect}
|
|
placeholder={isLoading || audioDevices.length === 0 ? "Loading..." : "Select microphone..."}
|
|
disabled={isUpdating("selected_microphone") || isLoading || audioDevices.length === 0}
|
|
onRefresh={refreshAudioDevices}
|
|
/>
|
|
<ResetButton
|
|
onClick={handleReset}
|
|
disabled={isUpdating("selected_microphone") || isLoading}
|
|
/>
|
|
</div>
|
|
</SettingContainer>
|
|
);
|
|
});
|