settings work
This commit is contained in:
michalcourson
@ -5,38 +5,57 @@ import './App.css';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Select from '@mui/material/Select';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import { apiFetch } from './api';
|
||||
|
||||
type AudioDevice = {
|
||||
id: string;
|
||||
label: string;
|
||||
index: number;
|
||||
name: string;
|
||||
default_sample_rate: number;
|
||||
channels: number;
|
||||
};
|
||||
|
||||
type Settings = {
|
||||
httpPort: string;
|
||||
inputDevice: AudioDevice;
|
||||
outputDevice: AudioDevice;
|
||||
recordingLength: number;
|
||||
outputFolder: string;
|
||||
http_port: number;
|
||||
input_device: AudioDevice;
|
||||
output_device: AudioDevice;
|
||||
recording_length: number;
|
||||
save_path: string;
|
||||
};
|
||||
|
||||
const defaultSettings: Settings = {
|
||||
httpPort: '',
|
||||
inputDevice: { id: '', label: '' },
|
||||
outputDevice: { id: '', label: '' },
|
||||
recordingLength: 0,
|
||||
outputFolder: '',
|
||||
http_port: 0,
|
||||
input_device: { index: 0, name: '', default_sample_rate: 0, channels: 0 },
|
||||
output_device: { index: 0, name: '', default_sample_rate: 0, channels: 0 },
|
||||
recording_length: 0,
|
||||
save_path: '',
|
||||
};
|
||||
|
||||
const fetchAudioDevices = async (): Promise<AudioDevice[]> => {
|
||||
async function fetchAudioDevices(
|
||||
type: 'input' | 'output',
|
||||
): Promise<AudioDevice[]> {
|
||||
// Replace with actual backend call
|
||||
// Example: return window.api.getAudioDevices();
|
||||
return [
|
||||
{ id: 'default-in', label: 'Default Input' },
|
||||
{ id: 'mic-1', label: 'Microphone 1' },
|
||||
{ id: 'default-out', label: 'Default Output' },
|
||||
{ id: 'spk-1', label: 'Speakers 1' },
|
||||
];
|
||||
};
|
||||
return apiFetch(`device/list?device_type=${type}`)
|
||||
.then((res) => res.json())
|
||||
.then((data) => data.devices as AudioDevice[])
|
||||
.catch((error) => {
|
||||
console.error('Error fetching audio devices:', error);
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchSettings(): Promise<Settings> {
|
||||
// Replace with actual backend call
|
||||
// Example: return window.api.getAudioDevices();
|
||||
console.log('Fetching settings from backend...');
|
||||
return apiFetch('settings')
|
||||
.then((res) => res.json())
|
||||
.then((data) => data.settings as Settings)
|
||||
.catch((error) => {
|
||||
console.error('Error fetching settings:', error);
|
||||
return defaultSettings;
|
||||
});
|
||||
}
|
||||
|
||||
const sendSettingsToBackend = (settings: Settings) => {
|
||||
// Replace with actual backend call
|
||||
@ -51,11 +70,24 @@ export default function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
fetchAudioDevices()
|
||||
fetchSettings()
|
||||
.then((fetchedSettings) => {
|
||||
console.log('Fetched settings:', fetchedSettings);
|
||||
setSettings(fetchedSettings);
|
||||
return null;
|
||||
})
|
||||
.then(() => {
|
||||
return fetchAudioDevices('input');
|
||||
})
|
||||
.then((devices) => {
|
||||
// For demo, split devices by id
|
||||
setInputDevices(devices.filter((d) => d.id.includes('in')));
|
||||
setOutputDevices(devices.filter((d) => d.id.includes('out')));
|
||||
setInputDevices(devices);
|
||||
// console.log('Input devices:', devices);
|
||||
return fetchAudioDevices('output');
|
||||
})
|
||||
.then((devices) => {
|
||||
setOutputDevices(devices);
|
||||
|
||||
// console.log('Output devices:', devices);
|
||||
return devices;
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -78,16 +110,16 @@ export default function SettingsPage() {
|
||||
const handleFolderChange = async () => {
|
||||
// Replace with actual folder picker
|
||||
// Example: const folder = await window.api.selectFolder();
|
||||
const folder = window.prompt(
|
||||
'Enter output folder path:',
|
||||
settings.outputFolder,
|
||||
);
|
||||
if (folder !== null) {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
outputFolder: folder,
|
||||
}));
|
||||
}
|
||||
// const folder = window.prompt(
|
||||
// 'Enter output folder path:',
|
||||
// settings.outputFolder,
|
||||
// );
|
||||
// if (folder !== null) {
|
||||
// setSettings((prev) => ({
|
||||
// ...prev,
|
||||
// outputFolder: folder,
|
||||
// }));
|
||||
// }
|
||||
};
|
||||
|
||||
return (
|
||||
@ -109,9 +141,15 @@ export default function SettingsPage() {
|
||||
variant="standard"
|
||||
type="text"
|
||||
name="httpPort"
|
||||
value={settings.httpPort}
|
||||
value={settings.http_port}
|
||||
onBlur={() => console.log('port blur')}
|
||||
onChange={(e) => {
|
||||
setSettings((prev) => ({ ...prev, httpPort: e.target.value }));
|
||||
if (!Number.isNaN(Number(e.target.value))) {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
http_port: Number(e.target.value),
|
||||
}));
|
||||
}
|
||||
}}
|
||||
className="ml-2 text-white w-[150px]"
|
||||
/>
|
||||
@ -121,15 +159,24 @@ export default function SettingsPage() {
|
||||
<Select
|
||||
variant="standard"
|
||||
name="inputDevice"
|
||||
value={settings.inputDevice}
|
||||
value={settings.input_device.index}
|
||||
onChange={(e) => {
|
||||
setSettings((prev) => ({ ...prev, inputDevice: e.target.value }));
|
||||
const newDevice = inputDevices.find(
|
||||
(dev) => dev.index === Number(e.target.value),
|
||||
);
|
||||
console.log('Selected input device index:', newDevice);
|
||||
if (newDevice) {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
inputDevice: newDevice,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
className="ml-2 w-64"
|
||||
>
|
||||
{inputDevices.map((dev) => (
|
||||
<MenuItem key={dev.id} value={dev.id}>
|
||||
{dev.label}
|
||||
<MenuItem key={dev.index} value={dev.index}>
|
||||
{dev.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
@ -139,18 +186,23 @@ export default function SettingsPage() {
|
||||
<Select
|
||||
variant="standard"
|
||||
name="outputDevice"
|
||||
value={settings.outputDevice}
|
||||
value={settings.output_device.index}
|
||||
onChange={(e) => {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
outputDevice: e.target.value,
|
||||
}));
|
||||
const newDevice = outputDevices.find(
|
||||
(dev) => dev.index === Number(e.target.value),
|
||||
);
|
||||
if (newDevice) {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
output_device: newDevice,
|
||||
}));
|
||||
}
|
||||
}}
|
||||
className="ml-2 w-64"
|
||||
>
|
||||
{outputDevices.map((dev) => (
|
||||
<MenuItem key={dev.id} value={dev.id}>
|
||||
{dev.label}
|
||||
<MenuItem key={dev.index} value={dev.index}>
|
||||
{dev.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
@ -161,12 +213,14 @@ export default function SettingsPage() {
|
||||
variant="standard"
|
||||
type="text"
|
||||
name="recordingLength"
|
||||
value={settings.recordingLength}
|
||||
value={settings.recording_length}
|
||||
onChange={(e) => {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
recordingLength: e.target.value,
|
||||
}));
|
||||
if (!Number.isNaN(Number(e.target.value))) {
|
||||
setSettings((prev) => ({
|
||||
...prev,
|
||||
recording_length: Number(e.target.value),
|
||||
}));
|
||||
}
|
||||
}}
|
||||
className="ml-2 w-[150px]"
|
||||
/>
|
||||
@ -177,8 +231,8 @@ export default function SettingsPage() {
|
||||
<TextField
|
||||
variant="standard"
|
||||
type="text"
|
||||
name="outputFolder"
|
||||
value={settings.outputFolder}
|
||||
name="savePath"
|
||||
value={settings.save_path}
|
||||
className="ml-2 w-[300px]"
|
||||
/>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user