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 */} {/* Audio Input Device */}
<FormControl className={classes.formControl}> <FormControl className={classes.formControl}>
<InputLabel htmlFor="jsd_inputDevice">Input Device</InputLabel> <InputLabel htmlFor="jsd_inputDevice">Input Device</InputLabel>
<Select <Select
id="jsd_inputDevice" id="jsd_inputDevice"
value={this.state.jackServerSettings.alsaInputDevice} value={this.state.jackServerSettings.alsaInputDevice}
onChange={e => this.handleInputDeviceChanged(e)} onChange={e => this.handleInputDeviceChanged(e)}
style={{ width: 220 }} disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
> style={{ width: 220 }}
{this.state.alsaDevices!.map(d => ( >
{this.state.alsaDevices?.map(d => (
<MenuItem key={d.id} value={d.id}>{d.name}</MenuItem> <MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
))} )) || <MenuItem value="" disabled>Loading...</MenuItem>}
</Select> </Select>
</FormControl> </FormControl>
{/* Audio Output Device */} {/* Audio Output Device */}
<FormControl className={classes.formControl}> <FormControl className={classes.formControl}>
<InputLabel htmlFor="jsd_outputDevice">Output Device</InputLabel> <InputLabel htmlFor="jsd_outputDevice">Output Device</InputLabel>
<Select <Select
id="jsd_outputDevice" id="jsd_outputDevice"
value={this.state.jackServerSettings.alsaOutputDevice} value={this.state.jackServerSettings.alsaOutputDevice}
onChange={e => this.handleOutputDeviceChanged(e)} onChange={e => this.handleOutputDeviceChanged(e)}
style={{ width: 220 }} 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> {this.state.alsaDevices?.map(d => (
))} <MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
</Select> )) || <MenuItem value="" disabled>Loading...</MenuItem>}
</Select>
</FormControl> </FormControl>
</div><div> </div><div>
<FormControl className={classes.formControl}> <FormControl className={classes.formControl}>