shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update JackServerSettingsDialog.tsx

Browse Source 
The dialog now disables the device selectors and shows a “Loading…” placeholder until ALSA devices are available, preventing runtime errors during the initial render
This commit is contained in:
ExtremesecrecyOne
2025-07-23 07:58:23 -07:00
parent 7fc2ca7cdf
commit c6aec562b0
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite/src/pipedal/JackServerSettingsDialog.tsx
+21 -19
View File
@@ -458,31 +458,33 @@ const JackServerSettingsDialog = withStyles(
{/* Audio Input Device */}
<FormControl className={classes.formControl}>
<InputLabel htmlFor="jsd_inputDevice">Input Device</InputLabel>
<Select
id="jsd_inputDevice"
value={this.state.jackServerSettings.alsaInputDevice}
onChange={e => this.handleInputDeviceChanged(e)}
style={{ width: 220 }}
>
{this.state.alsaDevices!.map(d => (
<Select
id="jsd_inputDevice"
value={this.state.jackServerSettings.alsaInputDevice}
onChange={e => this.handleInputDeviceChanged(e)}
disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
style={{ width: 220 }}
>
{this.state.alsaDevices?.map(d => (
<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
))}
</Select>
)) || <MenuItem value="" disabled>Loading...</MenuItem>}
</Select>
</FormControl>
{/* Audio Output Device */}
<FormControl className={classes.formControl}>
<InputLabel htmlFor="jsd_outputDevice">Output Device</InputLabel>
<Select
id="jsd_outputDevice"
value={this.state.jackServerSettings.alsaOutputDevice}
onChange={e => this.handleOutputDeviceChanged(e)}
style={{ width: 220 }}
>
{this.state.alsaDevices!.map(d => (
<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
))}
</Select>
<Select
id="jsd_outputDevice"
value={this.state.jackServerSettings.alsaOutputDevice}
onChange={e => this.handleOutputDeviceChanged(e)}
disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
style={{ width: 220 }}
>
{this.state.alsaDevices?.map(d => (
<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
)) || <MenuItem value="" disabled>Loading...</MenuItem>}
</Select>
</FormControl>
</div><div>
<FormControl className={classes.formControl}>