Alsa device enumeration, Audio Device dialog tuning, minimum buffer size support (gx plugins).

vite/src/pipedal/AlsaDeviceInfo.tsx

@@ -11,6 +11,8 @@ export default class AlsaDeviceInfo {
         this.maxBufferSize = input.maxBufferSize;
         this.supportsCapture = input.supportsCapture ? true : false;
         this.supportsPlayback = input.supportsPlayback ? true : false;
+        this.captureBusy = input.captureBusy;
+        this.playbackBusy = input.playbackBusy;
         return this;
     }
     static deserialize_array(input: any): AlsaDeviceInfo[]
@@ -67,4 +69,6 @@ export default class AlsaDeviceInfo {
     maxBufferSize: number = 0; 
     supportsCapture: boolean = true;
     supportsPlayback: boolean = true;
+    captureBusy: boolean = false;
+    playbackBusy: boolean = false;
 };

vite/src/pipedal/JackServerSettings.tsx

@@ -81,12 +81,14 @@ export default class JackServerSettings {
             ? this.alsaOutputDevice.substring(3)
             : this.alsaOutputDevice;
 
+        let device: string;
         if (inDev === outDev) {
-            return inDev;
+            device =  inDev;
 
         } else {
-            return inDev + "-> " + outDev;
+            device = inDev + "-> " + outDev;
         }
+        return `${device} ${this.sampleRate} ${this.bufferSize}x${this.numberOfBuffers}`;
     }
 
 }

vite/src/pipedal/JackServerSettingsDialog.tsx

@@ -50,7 +50,9 @@ import ResizeResponsiveComponent from './ResizeResponsiveComponent';
 function filterDevices(devices: AlsaDeviceInfo[]): AlsaDeviceInfo[] {
     return devices.filter(d => {
         const name = (d.name + ' ' + d.longName).toLowerCase();
-        return !(name.includes('hdmi') || name.includes('bcm2835'));
+        return !(name.includes('hdmi') 
+            || name.includes('bcm2835') // Pi 4 headphones out.
+            );
     });
 }
 
@@ -345,7 +347,7 @@ const JackServerSettingsDialog = withStyles(
                     }
                 })
                 .catch((error) => {
-                    // Error requesting ALSA info.
+                    console.log("Failed to get ALSA device info: " + error.message);
                 });
         }
 
@@ -621,16 +623,16 @@ const JackServerSettingsDialog = withStyles(
             const devicesSelected = (selectedInputDevice && selectedOutputDevice);
 
             let bufferSizes: number[] = devicesSelected ?
-                getValidBufferSizesMultiple(selectedInputDevice, selectedOutputDevice) : [];
+                getValidBufferSizesMultiple(selectedInputDevice, selectedOutputDevice) : [this.state.jackServerSettings.bufferSize];
             let bufferCounts = devicesSelected ?
-                getValidBufferCountsMultiple(this.state.jackServerSettings.bufferSize, selectedInputDevice, selectedOutputDevice) : [];
+                getValidBufferCountsMultiple(this.state.jackServerSettings.bufferSize, selectedInputDevice, selectedOutputDevice) : [this.state.jackServerSettings.numberOfBuffers  ];
             let bufferSizeDisabled = !devicesSelected;
             let bufferCountDisabled = !devicesSelected;
             let sampleRates = devicesSelected && selectedInputDevice && selectedOutputDevice ?
                 intersectArrays(selectedInputDevice.sampleRates, selectedOutputDevice.sampleRates)
                 : [];
             let sampleRateOptions = sampleRates.length === 0 && this.state.jackServerSettings.sampleRate ? [this.state.jackServerSettings.sampleRate] : sampleRates;
-            let ultraCompact = this.windowSize.width < 500;
+
             return (
                 <>
                     <DialogEx tag="jack" onClose={() => { this.handleClose(); }} aria-labelledby="select-channels-title" open={this.props.open}
@@ -654,9 +656,14 @@ const JackServerSettingsDialog = withStyles(
                                                 disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
                                                 style={{ width: 220 }}
                                             >
-                                                {sortedDevices.filter(d => d.supportsCapture).map(d => (
-                                                    <MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
-                                                )) || <MenuItem value="" disabled>Loading...</MenuItem>}
+                                                {sortedDevices.filter(d => 
+                                                    (d.supportsCapture || d.captureBusy)
+                                                    ).map(d => (
+                                                    <MenuItem key={d.id} disabled={d.captureBusy}
+                                                        value={d.id}
+                                                        style={{ opacity: d.captureBusy ? 0.3 : 1 }}
+                                                    >{d.name}</MenuItem>
+                                                ))}
                                             </Select>
                                         </FormControl>
 
@@ -670,9 +677,15 @@ const JackServerSettingsDialog = withStyles(
                                                 disabled={!this.state.alsaDevices || this.state.alsaDevices.length === 0}
                                                 style={{ width: 220 }}
                                             >
-                                                {sortedDevices.filter(d => d.supportsPlayback).map(d => (
-                                                    <MenuItem key={d.id} value={d.id}>{d.name}</MenuItem>
-                                                )) || <MenuItem value="" disabled>Loading...</MenuItem>}
+                                                {sortedDevices.filter(
+                                                    d => (d.supportsPlayback
+                                                    || d.playbackBusy)
+                                                ).map(d => (
+                                                    <MenuItem key={d.id} value={d.id}
+                                                        style={{ opacity: d.playbackBusy ? 0.3 : 1.0 }}
+                                                        disabled={d.playbackBusy}
+                                                    >{d.name}</MenuItem>
+                                                ))}
                                             </Select>
                                         </FormControl>
                                     </div>

vite/src/pipedal/SettingsDialog.tsx

@@ -23,6 +23,7 @@ import OkCancelDialog from './OkCancelDialog';
 import RadioSelectDialog from './RadioSelectDialog';
 import IconButtonEx from './IconButtonEx';
 import Typography from '@mui/material/Typography';
+import {isDarkMode} from './DarkMode';
 import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
 import { ColorTheme } from './DarkMode';
 import ButtonBase from "@mui/material/ButtonBase";
@@ -661,7 +662,8 @@ const SettingsDialog = withStyles(
                                     {(!isConfigValid) ?
                                         (
                                             <div className={classes.cpuStatusColor} style={{ paddingLeft: 48, position: "relative", top: -12 }}>
-                                                <Typography display="block" variant="caption" color="textSecondary">Status: <span style={{ color: "#F00" }}>Not configured.</span></Typography>
+                                                <Typography display="block" variant="caption" color="textSecondary">Status: 
+                                                    <span style={{ color: isDarkMode() ? "#F88" :  "#F00" }}>Not configured.</span></Typography>
                                                 {(!this.props.onboarding) && (
                                                     <Typography display="block" variant="caption" color="inherit">Governor: </Typography>
                                                 )}