{controlGroup.name !== "" && (
@@ -711,6 +784,11 @@ const PluginControlView =
);
}
}
+ if (plugin.audio_side_chain_inputs !== 0) {
+
+ result.push(this.makeSideChainSelect(plugin));
+
+ }
return result;
}
@@ -803,6 +881,9 @@ const PluginControlView =
return false;
}
+ handleSelectSidechainInput() {
+ this.setState({sidechainDialogOpen: true});
+ }
handleModGuiFileProperty(instanceId: number, filePropertyUri: string, selectedFile: string) {
let plugin = this.model.getUiPlugin(this.props.item.uri);
@@ -827,10 +908,30 @@ const PluginControlView =
if (!uiPlugin) {
return (
);
}
+ let toolBarChildren: ReactNode[] = [];
+ if (uiPlugin.audio_side_chain_inputs > 0) {
+ toolBarChildren.push(
+
{
+ this.handleSelectSidechainInput();
+ }}
+ >
+
+
+ );
+ }
return (
{ this.setState({ showModGuiZoomed: value }); }
}
@@ -1012,6 +1113,16 @@ const PluginControlView =
}
/>
)}
+ {this.state.sidechainDialogOpen && (
+ { this.setState({sidechainDialogOpen: false});}}
+ selectItems={this.getSidechainSelectItems()}
+ selectedInstanceId={this.props.item.sideChainInputId}
+ onChanged={(instanceId: number) => {
+ this.model.setPedalboardSideChainInput(this.props.item.instanceId, instanceId);
+ }}
+ />
+ )}
{/* xxx: I don't think we need this anyore. */}
c.minDb && levelDb <= c.maxDb) {
ix = i;
@@ -122,18 +121,18 @@ const styles = (theme: Theme) => createStyles({
}),
titleSection: css({
- flex: "0 0 auto", alignSelf:"stretch", marginBottom: 8, marginLeft: 0, marginRight: 0
+ flex: "0 0 auto", alignSelf: "stretch", marginBottom: 8, marginLeft: 0, marginRight: 0
}),
midSection: css({
- flex: "1 1 1", display: "flex",flexFlow: "column nowrap",alignContent: "center",justifyContent: "center"
+ flex: "1 1 1", display: "flex", flexFlow: "column nowrap", alignContent: "center", justifyContent: "center"
}),
editSection: css({
flex: "0 0 28", position: "relative", width: 60, height: 28, minHeight: 28
}),
editSectionNoContent: css({
- flex: "0 0 28", position: "relative", width: 1, height: 28, minHeight: 28
+ flex: "0 0 28", position: "relative", width: 1, height: 28, minHeight: 28
})
});
@@ -153,12 +152,12 @@ const PluginOutputControl =
class extends Component {
private model: PiPedalModel;
- private vuRef: React.RefObject;
- private progressRef: React.RefObject;
- private dbVuRef: React.RefObject;
- private dbVuTelltaleRef: React.RefObject;
- private dbVuTextRef: React.RefObject;
- private lampRef: React.RefObject;
+ private vuRef: React.RefObject;
+ private progressRef: React.RefObject;
+ private dbVuRef: React.RefObject;
+ private dbVuTelltaleRef: React.RefObject;
+ private dbVuTextRef: React.RefObject;
+ private lampRef: React.RefObject;
constructor(props: PluginOutputControlProps) {
@@ -210,7 +209,7 @@ const PluginOutputControl =
}
}
- private PROGRESS_WIDTH = 40-4;
+ private PROGRESS_WIDTH = 40 - 4;
private VU_HEIGHT = 60 - 4;
private DB_VU_HEIGHT = 60 - 4;
private animationHandle: number | undefined = undefined;
@@ -240,26 +239,23 @@ const PluginOutputControl =
}
if (this.dbVuTextRef.current) {
let text: string;
- if (this.dbVuTelltale <= this.props.uiControl.min_value)
- {
+ if (this.dbVuTelltale <= this.props.uiControl.min_value) {
text = "-";
} else {
- if (Math.abs(this.dbVuTelltale) >= 99.5)
- {
+ if (Math.abs(this.dbVuTelltale) >= 99.5) {
text = Math.round(this.dbVuTelltale).toString();
} else {
text = this.dbVuTelltale.toFixed(1);
}
if (!text.startsWith("-")) {
- text = '+'+text;
- }
+ text = '+' + text;
+ }
}
- if (this.lastDbText !== text)
- {
+ if (this.lastDbText !== text) {
this.lastDbText = text;
this.dbVuTextRef.current.innerText = text;
}
- }
+ }
this.animationHandle = undefined;
this.updateDbVuTelltale();
}
@@ -322,7 +318,7 @@ const PluginOutputControl =
)
}
- }
+ }
else if (this.vuRef.current) {
let control = this.props.uiControl;
let range = (value - control.min_value) / (control.max_value - control.min_value);
@@ -389,8 +385,7 @@ const PluginOutputControl =
if (value > control.max_value) {
value = control.max_value;
}
- if (value < control.min_value)
- {
+ if (value < control.min_value) {
value = control.min_value;
}
let y = (control.max_value - value) * this.DB_VU_HEIGHT / (control.max_value - control.min_value);
@@ -439,13 +434,13 @@ const PluginOutputControl =
} else if (control.isProgress()) {
item_width = undefined;
return (
-
{/* TITLE SECTION */}
-
+
- {control.name === "" ? "\u00A0" : control.name}
@@ -453,15 +448,18 @@ const PluginOutputControl =
{/* CONTROL SECTION */}
-
-
-
-
-
@@ -478,45 +476,48 @@ const PluginOutputControl =
let vuColors = defaultVuColors;
return (
-
{/* TITLE SECTION */}
-
-
- {control.name === "" ? "\u00A0" : control.name}
-
+
+ {control.name === "" ? "\u00A0" : control.name}
{/* CONTROL SECTION */}
-
-
-
-
- {
- vuColors.map((vuColor,ix)=>{
- let top = Math.floor(this.dbVuMap(vuColor.maxDb));
- let bottom = Math.ceil(this.dbVuMap(vuColor.minDb))+1;
+
- return (
-
- );
- })
- }
+
+
+
+ {
+ vuColors.map((vuColor, ix) => {
+ let top = Math.floor(this.dbVuMap(vuColor.maxDb));
+ let bottom = Math.ceil(this.dbVuMap(vuColor.minDb)) + 1;
+
+ return (
+
+ );
+ })
+ }
+
+
+
+
-
-
-
-
+
@@ -533,26 +534,28 @@ const PluginOutputControl =
else if (control.isVu()) {
item_width = undefined;
return (
-
+
{/* TITLE SECTION */}
-
-
- {control.name === "" ? "\u00A0" : control.name}
-
+
+ {control.name === "" ? "\u00A0" : control.name}
+
{/* CONTROL SECTION */}
-
-
-
+ style={{ display: "flex", justifyContent: "center", alignItems: "start", flexFlow: "row nowrap" }}>
+
+
-
+
@@ -575,11 +578,11 @@ const PluginOutputControl =
}
return (
+ style={{ width: attachedLamp ? 15 : item_width }}
+ >
{/* TITLE SECTION */}
-
+
{/* CONTROL SECTION */}
-
@@ -613,23 +616,23 @@ const PluginOutputControl =
);
} if (control.isOutputText()) {
return (
-
+
{/* TITLE SECTION */}
-
{control.name === "" ? "\u00A0": control.name}
+ }}> {control.name === "" ? "\u00A0" : control.name}
{/* CONTROL SECTION */}
@@ -646,10 +649,10 @@ const PluginOutputControl =
} else {
return (
-
+
{/* TITLE SECTION */}
-
{/* CONTROL SECTION */}
-
{text}
diff --git a/vite/src/pipedal/SideChainSelectControl.tsx b/vite/src/pipedal/SideChainSelectControl.tsx
new file mode 100644
index 0000000..f4f3177
--- /dev/null
+++ b/vite/src/pipedal/SideChainSelectControl.tsx
@@ -0,0 +1,223 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) Robin E. R. 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 { Component } from 'react';
+import { Theme } from '@mui/material/styles';
+import { css } from '@emotion/react';
+
+import DialogEx from './DialogEx';
+import DialogTitle from '@mui/material/DialogTitle';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import Toolbar from '@mui/material/Toolbar';
+import DialogContent from '@mui/material/DialogContent';
+import IconButtonEx from './IconButtonEx';
+import Typography from '@mui/material/Typography';
+import { PiPedalModel, PiPedalModelFactory, State } from './PiPedalModel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+
+
+export const StandardItemSize = { width: 80, height: 140 }
+
+
+import { withStyles } from "tss-react/mui";
+import WithStyles from './WithStyles';
+import { withTheme } from './WithStyles';
+
+const styles = (theme: Theme) => {
+ return {
+ frame: css({
+ position: "relative",
+ margin: "12px"
+ }),
+ controlFrame: css({
+ display: "flex", flexDirection: "column", alignItems: "start", justifyContent: "space-between", height: 116
+ }),
+ displayValue: css({
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 4,
+ textAlign: "center",
+ background: theme.mainBackground,
+ color: theme.palette.text.secondary,
+ // zIndex: -1,
+ }),
+ titleSection: css({
+ flex: "0 0 auto", alignSelf: "stretch", marginBottom: 8, marginLeft: 8, marginRight: 0
+ }),
+ midSection: css({
+ flex: "1 1 1", display: "flex", flexFlow: "column nowrap", alignContent: "center", justifyContent: "center"
+ }),
+ editSection: css({
+ flex: "0 0 0", position: "relative", width: 60, height: 28, minHeight: 28
+ })
+ }
+}
+ ;
+
+
+export interface SideChainSelectControlProps extends WithStyles {
+ title: string;
+ selectItems: { instanceId: number, title: string }[];
+ selectedInstanceId: number;
+ onChanged(instanceId: number): void;
+ theme: Theme;
+}
+type SideChainSelectControlState = {
+};
+
+const SideChainSelectControl =
+ withTheme(withStyles(
+ class extends Component {
+
+ model: PiPedalModel;
+
+
+ constructor(props: SideChainSelectControlProps) {
+ super(props);
+
+ this.state = {
+ };
+ this.model = PiPedalModelFactory.getInstance();
+ this.onStateChanged = this.onStateChanged.bind(this);
+ }
+
+
+ onStateChanged(state: State) {
+ }
+ mounted: boolean = false;
+ componentDidMount() {
+ this.model.state.addOnChangedHandler(this.onStateChanged);
+ this.mounted = true;
+ }
+ componentWillUnmount() {
+ this.mounted = false;
+ this.model.state.removeOnChangedHandler(this.onStateChanged);
+ }
+ componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot?: any): void {
+ }
+
+ render() {
+ //const classes = withStyles.getClasses(this.props);
+
+ const classes = withStyles.getClasses(this.props);
+
+ return (
+
+ {/* TITLE SECTION */}
+
+ {this.props.title}
+
+ {/* CONTROL SECTION */}
+
+
+
+
+
+
+ {/* LABEL/EDIT SECTION*/}
+
+
+
+ );
+ }
+ }
+ , styles)
+ )
+ ;
+export default SideChainSelectControl;
+
+export interface SideChainSelectDialogProps {
+ open: boolean,
+ onClose: () => void,
+
+ selectItems: { instanceId: number, title: string }[];
+ selectedInstanceId: number;
+ onChanged(instanceId: number): void;
+
+}
+export function SideChainSelectDialog(props: SideChainSelectDialogProps) {
+ let { open, onClose, selectItems, selectedInstanceId, onChanged } = props;
+ return (
+ { }}
+ >
+
+
+ { onClose(); }} aria-label="back"
+ >
+
+
+
+ Sidechain Input
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/vite/src/pipedal/SnapshotEditor.tsx b/vite/src/pipedal/SnapshotEditor.tsx
index 5708b44..5bb0110 100644
--- a/vite/src/pipedal/SnapshotEditor.tsx
+++ b/vite/src/pipedal/SnapshotEditor.tsx
@@ -24,7 +24,7 @@ import CloseIcon from '@mui/icons-material/Close';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import CssBaseline from '@mui/material/CssBaseline';
-import {createStyles} from './WithStyles';
+import { createStyles } from './WithStyles';
import { withStyles } from "tss-react/mui";
import IconButtonEx from './IconButtonEx';
@@ -148,10 +148,12 @@ const SnapshotEditor = withStyles(
this.model_.zoomedUiControl.addOnChangedHandler(
() => {
- this.setState({
- zoomedControlOpen: this.model_.zoomedUiControl.get() !== undefined,
- zoomedControlInfo: this.model_.zoomedUiControl.get()
- });
+ if (this.mounted93) {
+ this.setState({
+ zoomedControlOpen: this.model_.zoomedUiControl.get() !== undefined,
+ zoomedControlInfo: this.model_.zoomedUiControl.get()
+ });
+ }
}
);
@@ -182,9 +184,11 @@ const SnapshotEditor = withStyles(
this.setState({ isFullScreen: !this.state.isFullScreen });
}
+ private mounted93: boolean = false;
componentDidMount() {
super.componentDidMount();
+ this.mounted93 = true;
this.model_.showStatusMonitor.addOnChangedHandler(this.showStatusMonitorHandler);
}
@@ -206,6 +210,7 @@ const SnapshotEditor = withStyles(
}
componentWillUnmount() {
+ this.mounted93 = false;
super.componentWillUnmount();
this.model_.banks.removeOnChangedHandler(this.showStatusMonitorHandler);
}
diff --git a/vite/src/pipedal/svg/ic_sidechain_open_48.svg b/vite/src/pipedal/svg/ic_sidechain_open_48.svg
new file mode 100644
index 0000000..3a68ca5
--- /dev/null
+++ b/vite/src/pipedal/svg/ic_sidechain_open_48.svg
@@ -0,0 +1,17 @@
+
+
+
+