Robin E. R. Davies
812 lines
36 KiB
TypeScript
812 lines
36 KiB
TypeScript
// Copyright (c) 2022 Robin Davies
|
|
//
|
|
// Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
// this software and associated documentation files (the "Software"), to deal in
|
|
// the Software without restriction, including without limitation the rights to
|
|
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
// the Software, and to permit persons to whom the Software is furnished to do so,
|
|
// subject to the following conditions:
|
|
//
|
|
// The above copyright notice and this permission notice shall be included in all
|
|
// copies or substantial portions of the Software.
|
|
//
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
|
|
|
|
import { Theme } from '@mui/material/styles';
|
|
|
|
import WithStyles from './WithStyles';
|
|
import { createStyles } from './WithStyles';
|
|
|
|
import { withStyles } from "tss-react/mui";
|
|
|
|
import Button from '@mui/material/Button';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import DialogEx from './DialogEx';
|
|
import JackServerSettings from './JackServerSettings';
|
|
import JackHostStatus from './JackHostStatus';
|
|
|
|
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Select from '@mui/material/Select';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Typography from '@mui/material/Typography';
|
|
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
|
|
import IconButtonEx from './IconButtonEx';
|
|
import RefreshIcon from '@mui/icons-material/Refresh';
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
|
|
import AlsaDeviceInfo from './AlsaDeviceInfo';
|
|
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') // Pi 4 headphones out.
|
|
);
|
|
});
|
|
}
|
|
|
|
function sortDevices(devices: AlsaDeviceInfo[]): AlsaDeviceInfo[] {
|
|
function category(d: AlsaDeviceInfo): number {
|
|
if (d.supportsCapture && d.supportsPlayback) return 0;
|
|
if (d.longName.toLowerCase().includes("usb")) return 1;
|
|
return 2;
|
|
}
|
|
let copy = [...devices];
|
|
copy.sort((a, b) => {
|
|
let ca = category(a);
|
|
let cb = category(b);
|
|
if (ca !== cb) return ca - cb;
|
|
return a.name.localeCompare(b.name);
|
|
});
|
|
return copy;
|
|
}
|
|
|
|
const MIN_BUFFER_SIZE = 16;
|
|
const MAX_BUFFER_SIZE = 2048;
|
|
|
|
const valid_buffer_sizes = [16, 32, 48, 64, 128, 256, 512, 1024, 2048];
|
|
|
|
|
|
interface BufferSetting {
|
|
bufferSize: number;
|
|
numberOfBuffers: number;
|
|
};
|
|
|
|
// empty string used when no valid device is selected - the default.
|
|
const INVALID_DEVICE_ID = "";
|
|
|
|
enum WarningDialogType {
|
|
None,
|
|
Apply,
|
|
Ok,
|
|
};
|
|
interface JackServerSettingsDialogState {
|
|
latencyText: string;
|
|
jackServerSettings: JackServerSettings;
|
|
jackHostStatus?: JackHostStatus;
|
|
alsaDevices?: AlsaDeviceInfo[];
|
|
okEnabled: boolean;
|
|
fullScreen: boolean;
|
|
compactWidth: boolean;
|
|
warningDialogType: WarningDialogType;
|
|
suppressDeviceWarning: boolean;
|
|
windowSize: { width: number, height: number};
|
|
}
|
|
|
|
const styles = (theme: Theme) =>
|
|
createStyles({
|
|
formControl: {
|
|
margin: theme.spacing(1),
|
|
minWidth: 120,
|
|
},
|
|
selectEmpty: {
|
|
marginTop: theme.spacing(2),
|
|
},
|
|
inputLabel: {
|
|
whiteSpace: "nowrap"
|
|
}
|
|
});
|
|
export interface JackServerSettingsDialogProps extends WithStyles<typeof styles> {
|
|
open: boolean;
|
|
jackServerSettings: JackServerSettings;
|
|
onClose: () => void;
|
|
onApply: (jackServerSettings: JackServerSettings) => void;
|
|
}
|
|
|
|
function getLatencyText(settings?: JackServerSettings): string {
|
|
if (!settings) {
|
|
return "\u00A0";
|
|
}
|
|
|
|
if (!settings.sampleRate || !settings.bufferSize || !settings.numberOfBuffers) {
|
|
return "\u00A0";
|
|
}
|
|
|
|
let ms = (settings.bufferSize * settings.numberOfBuffers) / settings.sampleRate * 1000;
|
|
return ms.toFixed(1) + "ms";
|
|
}
|
|
|
|
function getValidBufferCounts(bufferSize: number, alsaDeviceInfo?: AlsaDeviceInfo): number[] {
|
|
if (!alsaDeviceInfo) {
|
|
return [];
|
|
}
|
|
let result: number[] = [];
|
|
if (bufferSize * 2 >= alsaDeviceInfo.minBufferSize) {
|
|
result = [2, 3, 4, 5, 6];
|
|
} else {
|
|
let minBuffers = Math.ceil(alsaDeviceInfo.minBufferSize / bufferSize / 2 - 0.0001);
|
|
result = [minBuffers * 2, minBuffers * 3, minBuffers * 4, minBuffers * 5, minBuffers * 6];
|
|
}
|
|
for (let i = 0; i < result.length; ++i) {
|
|
let selectedSize = result[i] * bufferSize;
|
|
if (selectedSize < alsaDeviceInfo.minBufferSize || selectedSize > alsaDeviceInfo.maxBufferSize) {
|
|
result.splice(i, 1);
|
|
--i;
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
function intersectArrays(a: number[], b: number[]): number[] {
|
|
return a.filter((v) => b.indexOf(v) !== -1);
|
|
}
|
|
|
|
function getValidBufferCountsMultiple(bufferSize: number, inDevice?: AlsaDeviceInfo, outDevice?: AlsaDeviceInfo): number[] {
|
|
let c1 = getValidBufferCounts(bufferSize, inDevice);
|
|
if (!outDevice) return c1;
|
|
return intersectArrays(c1, getValidBufferCounts(bufferSize, outDevice));
|
|
}
|
|
|
|
function getValidBufferSizesMultiple(inDevice?: AlsaDeviceInfo, outDevice?: AlsaDeviceInfo): number[] {
|
|
let s1 = getValidBufferSizes(inDevice);
|
|
if (!outDevice) return s1;
|
|
return intersectArrays(s1, getValidBufferSizes(outDevice));
|
|
}
|
|
function getValidBufferSizes(alsaDeviceInfo?: AlsaDeviceInfo): number[] {
|
|
if (!alsaDeviceInfo) {
|
|
return [];
|
|
}
|
|
let result: number[] = [];
|
|
for (let i = 0; i < valid_buffer_sizes.length; i++) {
|
|
let v = valid_buffer_sizes[i];
|
|
if (getValidBufferCounts(v, alsaDeviceInfo).length !== 0) {
|
|
result.push(v);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
function getBestBuffers(
|
|
inDevice: AlsaDeviceInfo | undefined,
|
|
outDevice: AlsaDeviceInfo | undefined,
|
|
bufferSize: number,
|
|
numberOfBuffers: number,
|
|
bufferSizeChanging: boolean = false
|
|
): BufferSetting {
|
|
if (!inDevice && !outDevice) {
|
|
return { bufferSize: bufferSize, numberOfBuffers: numberOfBuffers };
|
|
}
|
|
|
|
// If the numberOfbuffers is fine as is, don't change the number of Buffers.
|
|
// set default values. Otherwise, choose the best buffer count from available buffer counts.
|
|
let validBuffercounts = getValidBufferCountsMultiple(bufferSize, inDevice, outDevice);
|
|
const minSize = Math.max(inDevice?.minBufferSize ?? MIN_BUFFER_SIZE, outDevice?.minBufferSize ?? MIN_BUFFER_SIZE);
|
|
const maxSize = Math.min(inDevice?.maxBufferSize ?? MAX_BUFFER_SIZE, outDevice?.maxBufferSize ?? MAX_BUFFER_SIZE);
|
|
let ix = validBuffercounts.indexOf(numberOfBuffers);
|
|
if (ix !== -1) {
|
|
if (bufferSize * numberOfBuffers <= maxSize
|
|
&& bufferSize * numberOfBuffers >= minSize) {
|
|
return { bufferSize: bufferSize, numberOfBuffers: numberOfBuffers };
|
|
}
|
|
}
|
|
// if numberOfBuffers is not valid, and the user has just selected a new buffers size,
|
|
// then choose from available buffer counts.
|
|
if (bufferSizeChanging) {
|
|
if (validBuffercounts.length !== 0) {
|
|
// prefer the one thats divisible by 3.
|
|
for (let i = 0; i < validBuffercounts.length; ++i) {
|
|
if (validBuffercounts[i] % 3 === 0) {
|
|
numberOfBuffers = validBuffercounts[i];
|
|
return { bufferSize: bufferSize, numberOfBuffers: numberOfBuffers };
|
|
}
|
|
}
|
|
numberOfBuffers = validBuffercounts[0];
|
|
return { bufferSize: bufferSize, numberOfBuffers: numberOfBuffers };
|
|
}
|
|
}
|
|
// otherwise select a sensible starting value.
|
|
|
|
// Build candidate sizes with 32 first if present.
|
|
let validBufferSizes = getValidBufferSizesMultiple(inDevice, outDevice);
|
|
validBufferSizes.sort((a, b) => a - b);
|
|
if (validBufferSizes.indexOf(32) !== -1) {
|
|
validBufferSizes = [32, ...validBufferSizes.filter(v => v !== 32)];
|
|
}
|
|
|
|
function tryPick(count: number): BufferSetting | undefined {
|
|
for (let bs of validBufferSizes) {
|
|
const counts = getValidBufferCountsMultiple(bs, inDevice, outDevice);
|
|
if (counts.indexOf(count) !== -1) {
|
|
if (bs * count >= minSize && bs * count <= maxSize) {
|
|
return { bufferSize: bs, numberOfBuffers: count };
|
|
}
|
|
}
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
let result = tryPick(4);
|
|
if (!result) result = tryPick(3);
|
|
if (!result) result = tryPick(2);
|
|
if (result) return result;
|
|
|
|
// Fallback to previous behaviour.
|
|
if (64 * 3 >= minSize && 64 * 3 <= maxSize) {
|
|
return { bufferSize: 64, numberOfBuffers: 3 };
|
|
}
|
|
bufferSize = minSize / 2;
|
|
numberOfBuffers = 4;
|
|
if (bufferSize * numberOfBuffers > maxSize) {
|
|
numberOfBuffers = 2;
|
|
}
|
|
return { bufferSize: bufferSize, numberOfBuffers: numberOfBuffers };
|
|
|
|
};
|
|
|
|
function isOkEnabled(jackServerSettings: JackServerSettings, alsaDevices?: AlsaDeviceInfo[]) {
|
|
if (!alsaDevices) return false;
|
|
if (!jackServerSettings.alsaInputDevice || !jackServerSettings.alsaOutputDevice) return false;
|
|
|
|
const inDevice = alsaDevices.find(d => d.id === jackServerSettings.alsaInputDevice && d.supportsCapture);
|
|
const outDevice = alsaDevices.find(d => d.id === jackServerSettings.alsaOutputDevice && d.supportsPlayback);
|
|
if (!inDevice || !outDevice) return false;
|
|
|
|
const sampleRates = intersectArrays(inDevice.sampleRates, outDevice.sampleRates);
|
|
if (sampleRates.indexOf(jackServerSettings.sampleRate) === -1) return false;
|
|
|
|
const deviceBufferSize = jackServerSettings.bufferSize * jackServerSettings.numberOfBuffers;
|
|
const minSize = Math.max(inDevice.minBufferSize, outDevice.minBufferSize);
|
|
const maxSize = Math.min(inDevice.maxBufferSize, outDevice.maxBufferSize);
|
|
if (deviceBufferSize < minSize || deviceBufferSize > maxSize) return false;
|
|
|
|
const validBufferCounts = getValidBufferCountsMultiple(jackServerSettings.bufferSize, inDevice, outDevice);
|
|
if (validBufferCounts.indexOf(jackServerSettings.numberOfBuffers) === -1) return false;
|
|
|
|
return true;
|
|
}
|
|
|
|
|
|
const JackServerSettingsDialog = withStyles(
|
|
class extends ResizeResponsiveComponent<JackServerSettingsDialogProps, JackServerSettingsDialogState> {
|
|
|
|
model: PiPedalModel;
|
|
|
|
constructor(props: JackServerSettingsDialogProps) {
|
|
super(props);
|
|
this.model = PiPedalModelFactory.getInstance();
|
|
|
|
|
|
let suppressWarnings = true; //localStorage.getItem("suppressSeparateDeviceWarning") === "1";
|
|
this.state = {
|
|
latencyText: getLatencyText(props.jackServerSettings),
|
|
jackServerSettings: props.jackServerSettings.clone(), // invalid, but not nullish
|
|
alsaDevices: undefined,
|
|
okEnabled: false,
|
|
fullScreen: this.getFullScreen(),
|
|
compactWidth: this.windowSize.width < 600,
|
|
warningDialogType: WarningDialogType.None,
|
|
suppressDeviceWarning: suppressWarnings,
|
|
windowSize: this.windowSize,
|
|
|
|
jackHostStatus: undefined
|
|
};
|
|
}
|
|
mounted: boolean = false;
|
|
|
|
|
|
getFullScreen() {
|
|
return false;
|
|
// return document.documentElement.clientWidth < 420 ||
|
|
// document.documentElement.clientHeight < 700;
|
|
}
|
|
|
|
onWindowSizeChanged(width: number, height: number): void {
|
|
// super.onWindowSizeChanged(width, height);
|
|
// const fullScreen = this.getFullScreen();
|
|
const compactWidth = width < 600;
|
|
this.setState({ compactWidth: compactWidth, windowSize: { width: width, height: height } });
|
|
}
|
|
|
|
requestAlsaInfo() {
|
|
this.model.getAlsaDevices()
|
|
.then((devices) => {
|
|
if (this.mounted) {
|
|
if (this.props.open) {
|
|
let f = filterDevices(devices);
|
|
let settings = this.applyAlsaDevices(this.state.jackServerSettings, f);
|
|
this.setState({
|
|
alsaDevices: f,
|
|
jackServerSettings: settings,
|
|
latencyText: getLatencyText(settings),
|
|
okEnabled: isOkEnabled(settings, f)
|
|
});
|
|
} else {
|
|
this.setState({ alsaDevices: filterDevices(devices) });
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Failed to get ALSA device info: " + error.message);
|
|
});
|
|
}
|
|
|
|
applyAlsaDevices(jackServerSettings: JackServerSettings, alsaDevices?: AlsaDeviceInfo[]) {
|
|
let result = jackServerSettings.clone();
|
|
if (!alsaDevices || alsaDevices.length === 0) {
|
|
result.valid = false;
|
|
result.alsaInputDevice = INVALID_DEVICE_ID;
|
|
result.alsaOutputDevice = INVALID_DEVICE_ID;
|
|
return result;
|
|
}
|
|
|
|
let devices = filterDevices(alsaDevices);
|
|
let inDevice = devices.find(d => d.id === result.alsaInputDevice && d.supportsCapture);
|
|
let outDevice = devices.find(d => d.id === result.alsaOutputDevice && d.supportsPlayback);
|
|
|
|
if (!inDevice || !outDevice) {
|
|
const capture = devices.filter(d => d.supportsCapture);
|
|
const playback = devices.filter(d => d.supportsPlayback);
|
|
if (capture.length === 1 && playback.length === 1) {
|
|
inDevice = capture[0];
|
|
outDevice = playback[0];
|
|
result.alsaInputDevice = inDevice.id;
|
|
result.alsaOutputDevice = outDevice.id;
|
|
} else if (capture.length === 1 && capture[0].supportsPlayback && playback.length === 0) {
|
|
inDevice = capture[0];
|
|
outDevice = capture[0];
|
|
result.alsaInputDevice = inDevice.id;
|
|
result.alsaOutputDevice = outDevice.id;
|
|
}
|
|
}
|
|
|
|
if (!inDevice || !outDevice) {
|
|
result.valid = false;
|
|
if (!inDevice) result.alsaInputDevice = INVALID_DEVICE_ID;
|
|
if (!outDevice) result.alsaOutputDevice = INVALID_DEVICE_ID;
|
|
return result;
|
|
}
|
|
|
|
let sampleRates = intersectArrays(inDevice.sampleRates, outDevice.sampleRates);
|
|
if (sampleRates.length !== 0 && sampleRates.indexOf(result.sampleRate) === -1) {
|
|
let bestSr = sampleRates[0];
|
|
let bestErr = 1e36;
|
|
for (let sr of sampleRates) {
|
|
let err = (sr - result.sampleRate) * (sr - result.sampleRate);
|
|
if (err < bestErr) { bestErr = err; bestSr = sr; }
|
|
}
|
|
result.sampleRate = bestSr;
|
|
}
|
|
|
|
let bestBuffers = getBestBuffers(inDevice, outDevice, result.bufferSize, result.numberOfBuffers);
|
|
result.bufferSize = bestBuffers.bufferSize;
|
|
result.numberOfBuffers = bestBuffers.numberOfBuffers;
|
|
return result;
|
|
}
|
|
|
|
|
|
tick() {
|
|
this.model.getJackStatus()
|
|
.then((jackStatus) =>
|
|
this.setState(
|
|
{
|
|
jackHostStatus: jackStatus
|
|
})
|
|
)
|
|
.catch((error) => { });
|
|
}
|
|
|
|
componentDidMount() {
|
|
super.componentDidMount();
|
|
this.mounted = true;
|
|
|
|
this.updateActive();
|
|
|
|
}
|
|
|
|
private active: boolean = false;
|
|
private timerHandle: number | null = null;
|
|
|
|
updateActive() {
|
|
let active = this.mounted && this.props.open;
|
|
if (active !== this.active) {
|
|
this.active = active;
|
|
if (this.active) {
|
|
|
|
|
|
this.setState({
|
|
jackServerSettings: this.props.jackServerSettings.clone(),
|
|
alsaDevices: undefined,
|
|
latencyText: "",
|
|
jackHostStatus: undefined,
|
|
okEnabled: false
|
|
});
|
|
this.requestAlsaInfo();
|
|
|
|
this.timerHandle = setInterval(() => this.tick(), 1000);
|
|
|
|
} else {
|
|
if (this.timerHandle !== null) {
|
|
clearInterval(this.timerHandle);
|
|
this.timerHandle = null;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
componentDidUpdate(oldProps: JackServerSettingsDialogProps) {
|
|
|
|
this.updateActive();
|
|
}
|
|
|
|
|
|
componentWillUnmount() {
|
|
super.componentWillUnmount();
|
|
this.mounted = false;
|
|
|
|
this.updateActive();
|
|
|
|
}
|
|
|
|
getSelectedDevice(deviceId: string): AlsaDeviceInfo | undefined {
|
|
if (!this.state.alsaDevices) return undefined;
|
|
for (let i = 0; i < this.state.alsaDevices.length; ++i) {
|
|
if (this.state.alsaDevices[i].id === deviceId) {
|
|
return this.state.alsaDevices[i];
|
|
}
|
|
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
handleRateChanged(e: any) {
|
|
let rate = e.target.value as number;
|
|
let inDev = this.getSelectedDevice(this.state.jackServerSettings.alsaInputDevice);
|
|
let outDev = this.getSelectedDevice(this.state.jackServerSettings.alsaOutputDevice);
|
|
if (!inDev && !outDev) return;
|
|
let settings = this.state.jackServerSettings.clone();
|
|
settings.sampleRate = rate;
|
|
settings.valid = false;
|
|
|
|
this.setState({
|
|
jackServerSettings: settings,
|
|
latencyText: getLatencyText(settings),
|
|
okEnabled: isOkEnabled(settings, this.state.alsaDevices)
|
|
});
|
|
}
|
|
handleSizeChanged(e: any) {
|
|
let size = e.target.value as number;
|
|
|
|
let inDev = this.getSelectedDevice(this.state.jackServerSettings.alsaInputDevice);
|
|
let outDev = this.getSelectedDevice(this.state.jackServerSettings.alsaOutputDevice);
|
|
if (!inDev && !outDev) return;
|
|
let settings = this.state.jackServerSettings.clone();
|
|
settings.bufferSize = size;
|
|
settings.valid = false;
|
|
let bestBufferSetting = getBestBuffers(inDev, outDev, settings.bufferSize, settings.numberOfBuffers, true);
|
|
settings.bufferSize = bestBufferSetting.bufferSize;
|
|
settings.numberOfBuffers = bestBufferSetting.numberOfBuffers;
|
|
|
|
this.setState({
|
|
jackServerSettings: settings,
|
|
latencyText: getLatencyText(settings),
|
|
okEnabled: isOkEnabled(settings, this.state.alsaDevices)
|
|
});
|
|
}
|
|
handleNumberOfBuffersChanged(e: any) {
|
|
let bufferCount = e.target.value as number;
|
|
|
|
let inDev = this.getSelectedDevice(this.state.jackServerSettings.alsaInputDevice);
|
|
let outDev = this.getSelectedDevice(this.state.jackServerSettings.alsaOutputDevice);
|
|
if (!inDev && !outDev) return;
|
|
let settings = this.state.jackServerSettings.clone();
|
|
settings.numberOfBuffers = bufferCount;
|
|
settings.valid = false;
|
|
|
|
this.setState({
|
|
jackServerSettings: settings,
|
|
latencyText: getLatencyText(settings),
|
|
okEnabled: isOkEnabled(settings, this.state.alsaDevices)
|
|
});
|
|
}
|
|
|
|
applySettings() {
|
|
const settings = this.state.jackServerSettings.clone();
|
|
settings.valid = true;
|
|
this.props.onApply(settings);
|
|
|
|
}
|
|
handleApply() {
|
|
if (!this.state.okEnabled) return;
|
|
|
|
if (this.state.jackServerSettings.alsaInputDevice !== this.state.jackServerSettings.alsaOutputDevice
|
|
&& this.state.suppressDeviceWarning === false) {
|
|
this.setState({ warningDialogType: WarningDialogType.Apply });
|
|
} else {
|
|
this.applySettings();
|
|
};
|
|
}
|
|
|
|
handleOk() {
|
|
if (!this.state.okEnabled) return;
|
|
|
|
if (this.state.jackServerSettings.alsaInputDevice !== this.state.jackServerSettings.alsaOutputDevice
|
|
&& this.state.suppressDeviceWarning === false) {
|
|
this.setState({ warningDialogType: WarningDialogType.Ok });
|
|
} else {
|
|
this.applySettings();
|
|
this.props.onClose(); // Close the dialog
|
|
}
|
|
};
|
|
|
|
handleWarningProceed() {
|
|
this.setState({ warningDialogType: WarningDialogType.None });
|
|
|
|
if (this.state.warningDialogType === WarningDialogType.Ok) {
|
|
this.applySettings();
|
|
this.props.onClose(); // Close the dialog after the warning
|
|
} else if (this.state.warningDialogType === WarningDialogType.Apply) {
|
|
this.applySettings();
|
|
}
|
|
}
|
|
|
|
handleWarningCancel() {
|
|
this.setState({ warningDialogType: WarningDialogType.None });
|
|
}
|
|
|
|
handleWarningCheck(e: any, checked: boolean) {
|
|
this.setState({ suppressDeviceWarning: checked });
|
|
localStorage.setItem("suppressSeparateDeviceWarning", checked ? "1" : "0");
|
|
}
|
|
handleInputDeviceChanged(e: any) {
|
|
const d = e.target.value as string;
|
|
let s = this.state.jackServerSettings.clone();
|
|
s.alsaInputDevice = d;
|
|
s.valid = false;
|
|
let settings = this.applyAlsaDevices(s, this.state.alsaDevices);
|
|
this.setState({
|
|
jackServerSettings: settings,
|
|
latencyText: getLatencyText(settings),
|
|
okEnabled: isOkEnabled(settings, this.state.alsaDevices)
|
|
});
|
|
}
|
|
|
|
handleOutputDeviceChanged(e: any) {
|
|
const d = e.target.value as string;
|
|
let s = this.state.jackServerSettings.clone();
|
|
s.alsaOutputDevice = d;
|
|
s.valid = false;
|
|
let settings = this.applyAlsaDevices(s, this.state.alsaDevices);
|
|
this.setState({
|
|
jackServerSettings: settings,
|
|
latencyText: getLatencyText(settings),
|
|
okEnabled: isOkEnabled(settings, this.state.alsaDevices)
|
|
});
|
|
}
|
|
|
|
handleClose() {
|
|
this.props.onClose();
|
|
};
|
|
|
|
render() {
|
|
const classes = withStyles.getClasses(this.props);
|
|
|
|
|
|
|
|
const sortedDevices = sortDevices(this.state.alsaDevices ?? []);
|
|
|
|
let selectedInputDevice = this.getSelectedDevice(this.state.jackServerSettings.alsaInputDevice);
|
|
let selectedOutputDevice = this.getSelectedDevice(this.state.jackServerSettings.alsaOutputDevice);
|
|
|
|
const devicesSelected = (selectedInputDevice && selectedOutputDevice);
|
|
|
|
let bufferSizes: number[] = devicesSelected ?
|
|
getValidBufferSizesMultiple(selectedInputDevice, selectedOutputDevice) : [this.state.jackServerSettings.bufferSize];
|
|
let bufferCounts = devicesSelected ?
|
|
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;
|
|
|
|
return (
|
|
<>
|
|
<DialogEx tag="jack" onClose={() => { this.handleClose(); }} aria-labelledby="select-channels-title" open={this.props.open}
|
|
onEnterKey={() => {
|
|
this.handleOk();
|
|
}}
|
|
fullScreen={this.state.fullScreen}
|
|
|
|
>
|
|
<DialogContent>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
<div style={{ display: "flex", flexDirection: "row", alignItems: "center", gap: 8 }}>
|
|
<div style={{ display: "flex", flexDirection: this.state.compactWidth ? "column" : "row", gap: 8 }}>
|
|
{/* Audio Input Device */}
|
|
<FormControl variant="standard" className={classes.formControl}>
|
|
<InputLabel shrink className={classes.inputLabel} htmlFor="jsd_inputDevice">Input Device</InputLabel>
|
|
<Select variant="standard"
|
|
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 }}
|
|
>
|
|
{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>
|
|
|
|
{/* Audio Output Device */}
|
|
<FormControl variant="standard" className={classes.formControl}>
|
|
<InputLabel shrink className={classes.inputLabel} htmlFor="jsd_outputDevice">Output Device</InputLabel>
|
|
<Select variant="standard"
|
|
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 }}
|
|
>
|
|
{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>
|
|
<IconButtonEx tooltip="Refresh devices" onClick={() => this.requestAlsaInfo()} aria-label="refresh-audio-devices">
|
|
<RefreshIcon />
|
|
</IconButtonEx>
|
|
</div>
|
|
</div><div>
|
|
<FormControl variant="standard" className={classes.formControl}>
|
|
<InputLabel shrink className={classes.inputLabel} htmlFor="jsd_sampleRate">Sample rate</InputLabel>
|
|
<Select variant="standard"
|
|
onChange={(e) => this.handleRateChanged(e)}
|
|
value={this.state.jackServerSettings.sampleRate}
|
|
disabled={sampleRates.length === 0}
|
|
inputProps={{
|
|
id: 'jsd_sampleRate',
|
|
style: {
|
|
textAlign: "right",
|
|
}
|
|
}}
|
|
>
|
|
{sampleRateOptions.map((sr) => {
|
|
return (<MenuItem key={sr} value={sr}>{sr}</MenuItem>);
|
|
})}
|
|
</Select>
|
|
</FormControl>
|
|
<div style={{ display: "flex", flexFlow: "row wrap", justifyContent: "start" }}>
|
|
<FormControl variant="standard" className={classes.formControl}
|
|
>
|
|
<InputLabel shrink className={classes.inputLabel} htmlFor="bufferSize">Buffer size</InputLabel>
|
|
<Select variant="standard"
|
|
onChange={(e) => this.handleSizeChanged(e)}
|
|
value={this.state.jackServerSettings.bufferSize}
|
|
disabled={bufferSizeDisabled}
|
|
inputProps={{
|
|
name: 'Buffer size',
|
|
id: 'jsd_bufferSize',
|
|
}}
|
|
>
|
|
{bufferSizes.map((buffSize) =>
|
|
(
|
|
<MenuItem key={"b" + buffSize} value={buffSize}>{buffSize}</MenuItem>
|
|
|
|
)
|
|
)}
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl variant="standard" className={classes.formControl}>
|
|
<InputLabel shrink className={classes.inputLabel} htmlFor="numberofBuffers">Buffers</InputLabel>
|
|
<Select variant="standard"
|
|
onChange={(e) => this.handleNumberOfBuffersChanged(e)}
|
|
value={this.state.jackServerSettings.numberOfBuffers}
|
|
disabled={bufferCountDisabled}
|
|
inputProps={{
|
|
name: 'Number of buffers',
|
|
id: 'jsd_bufferCount',
|
|
}}
|
|
>
|
|
{
|
|
bufferCounts.map((bufferCount) => {
|
|
return (
|
|
<MenuItem key={bufferCount} value={bufferCount}>{bufferCount.toString()}</MenuItem>
|
|
|
|
);
|
|
})
|
|
}
|
|
</Select>
|
|
</FormControl>
|
|
</div>
|
|
</div>
|
|
<Typography display="block" variant="caption" style={{ textAlign: "left", marginTop: 12, marginLeft: 24 }}
|
|
color="textSecondary">
|
|
Latency: {this.state.latencyText}
|
|
</Typography>
|
|
<Typography display="block" variant="caption" style={{ textAlign: "left", marginTop: 0, marginLeft: 24 }}
|
|
color="textSecondary">
|
|
{
|
|
JackHostStatus.getDisplayView("Status: ", this.state.jackHostStatus)
|
|
}
|
|
</Typography>
|
|
|
|
</DialogContent>
|
|
|
|
<DialogActions>
|
|
<Button variant="dialogSecondary" onClick={() => { this.handleClose(); }}>
|
|
Cancel
|
|
</Button>
|
|
<Button variant="dialogSecondary" onClick={() => this.handleApply()} disabled={!this.state.okEnabled}>Apply</Button>
|
|
<Button variant="dialogPrimary" onClick={() => this.handleOk()} disabled={!this.state.okEnabled}>
|
|
OK
|
|
</Button>
|
|
</DialogActions>
|
|
|
|
</DialogEx>
|
|
{this.state.warningDialogType !== WarningDialogType.None && (
|
|
<DialogEx open={true} tag="ioWarning"
|
|
onEnterKey={() => this.handleWarningProceed()}
|
|
onClose={() => this.handleWarningCancel()}
|
|
style={{ userSelect: "none" }}
|
|
>
|
|
<DialogContent>
|
|
<Typography display="block" variant="body2" color="textSecondary" style={{ fontSize: 16, fontWeight: 400 }} gutterBottom>
|
|
For best results, you should the same device for both audio input and output.
|
|
Are you sure you want to continue?
|
|
</Typography>
|
|
<FormControlLabel
|
|
control={<Checkbox checked={this.state.suppressDeviceWarning} onChange={(e, c) => this.handleWarningCheck(e, c)} />}
|
|
label="Don't show me this message again"
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => this.handleWarningCancel()} variant="dialogSecondary" style={{ width: 120 }}>Cancel</Button>
|
|
<Button onClick={() => this.handleWarningProceed()} variant="dialogPrimary" style={{ width: 120 }}>PROCEED</Button>
|
|
</DialogActions>
|
|
</DialogEx>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
},
|
|
styles);
|
|
|
|
export default JackServerSettingsDialog;
|