Toob Flanger, Stereo Reverb, bug fixes

- support state in factory presets.
- Use uncompressed json for settings files.
- Set current plugin preset name to last loaded plugin preset.
- Append plugins after  start node,  before end node fixed.
- Correctly release web socket when web app goes idle.
- Fit and finish issues.

react/src/AppThemed.tsx

@@ -139,7 +139,7 @@ const appStyles = (theme: Theme) => createStyles({
     loadingBox: {
         position: "relative",
         top: "20%",
-        width: "120px",
+        width: "240px",
         color: "#888",
         marginLeft: "auto",
         marginRight: "auto",

react/src/Pedalboard.tsx

@@ -69,6 +69,7 @@ export class PedalboardItem implements Deserializable<PedalboardItem> {
         this.vstState = input.vstState ?? "";
         this.stateUpdateCount = input.stateUpdateCount;
         this.lv2State = input.lv2State;
+        this.lilvPresetUri = input.lilvPresetUri;
         return this;
     }
     deserialize(input: any): PedalboardItem {
@@ -197,7 +198,8 @@ export class PedalboardItem implements Deserializable<PedalboardItem> {
     midiBindings: MidiBinding[] = [];
     vstState: string = "";
     stateUpdateCount: number = 0;
-    lv2State: [boolean,any] = [false,{}]
+    lv2State: [boolean,any] = [false,{}];
+    lilvPresetUri: string = "";
 };
 
 

react/src/PedalboardView.tsx

@@ -1131,11 +1131,9 @@ const PedalboardView =
                             } else {
                                 item.numberOfOutputs = bottomOutputs;
                             }
-                        } else if (splitter.getSplitType() === SplitType.Lr) {
-                            item.numberOfOutputs = (topOutputs !== 0 && bottomOutputs !== 0) ? 2: 0;
                         } else {
-                            item.numberOfOutputs = CalculateConnection(topOutputs,bottomOutputs);
-                        }
+                            item.numberOfOutputs = (topOutputs >= 1 || bottomOutputs >= 1) ? 2: 1;
+                        } 
                     } else if (item.isStart())
                     {
                         item.numberOfOutputs = Math.min(PiPedalModelFactory.getInstance().jackSettings.get().inputAudioPorts.length,2);

react/src/PiPedalModel.tsx

@@ -1513,6 +1513,15 @@ export class PiPedalModel //implements PiPedalModel
     }
     addPedalboardItem(instanceId: number, append: boolean): number {
         let pedalboard = this.pedalboard.get();
+        if (instanceId === Pedalboard.START_CONTROL && append)
+        {
+            instanceId = pedalboard.items[0].instanceId;
+            append = false;
+        } else if (instanceId === Pedalboard.END_CONTROL && !append)
+        {
+            instanceId = pedalboard.items[pedalboard.items.length-1].instanceId;
+            append = true;
+        }
         let newPedalboard = pedalboard.clone();
         this.updateVst3State(newPedalboard);
 
@@ -1529,6 +1538,18 @@ export class PiPedalModel //implements PiPedalModel
     }
     addPedalboardSplitItem(instanceId: number, append: boolean): number {
         let pedalboard = this.pedalboard.get();
+        
+        if (instanceId === Pedalboard.START_CONTROL && append)
+        {
+            instanceId = pedalboard.items[0].instanceId;
+            append = false;
+        } else if (instanceId === Pedalboard.END_CONTROL && !append)
+        {
+            instanceId = pedalboard.items[pedalboard.items.length-1].instanceId;
+            append = true;
+        }
+
+
         let newPedalboard = pedalboard.clone();
         this.updateVst3State(newPedalboard);
 

react/src/PiPedalSocket.tsx

@@ -214,7 +214,7 @@ class PiPedalSocket {
     enterBackgroundState()
     {
         this.isBackground = true;
-        this.socket?.close();
+        this.close();
 
     }
     exitBackgroundState()
@@ -261,7 +261,7 @@ class PiPedalSocket {
                 this.socket.onerror = null;
                 this.socket.onmessage = null;
                 this.socket.onopen = null;
-                this.socket?.close();
+                this.socket.close();
             }
         } catch  (ignored)
         {

react/src/PluginOutputControl.tsx

@@ -24,7 +24,7 @@ import createStyles from '@mui/styles/createStyles';
 import withStyles from '@mui/styles/withStyles';
 import { UiControl } from './Lv2Plugin';
 import Typography from '@mui/material/Typography';
-import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle } from './PiPedalModel';
+import { PiPedalModel, PiPedalModelFactory, MonitorPortHandle,State } from './PiPedalModel';
 
 
 
@@ -87,6 +87,16 @@ const PluginOutputControl =
                     value: 0
                 };
                 this.model = PiPedalModelFactory.getInstance();
+                this.onConnectionStateChanged = this.onConnectionStateChanged.bind(this);
+            }
+
+            private onConnectionStateChanged(state: State)
+            {
+                if (state === State.Ready)
+                {
+                    this.unsubscribe();
+                    this.subscribe();
+                }
             }
 
             private mounted: boolean = false;
@@ -95,16 +105,27 @@ const PluginOutputControl =
                     super.componentWillUnmount();
                 }
                 this.mounted = false;
+                this.model.state.removeOnChangedHandler(this.onConnectionStateChanged);
                 this.unsubscribe();
             }
             componentDidMount(): void {
                 this.mounted = true;
                 this.subscribe();
+                this.model.state.addOnChangedHandler(this.onConnectionStateChanged);
+
                 if (super.componentDidMount) {
                     super.componentDidMount();
                 }
             }
 
+            componentDidUpdate(prevProps: Readonly<PluginOutputControlProps>, prevState: Readonly<PluginOutputControlState>, snapshot?: any): void {
+                if (prevProps.instanceId !== this.props.instanceId)
+                {
+                    this.unsubscribe();
+                    this.subscribe();
+                }
+            }
+
             private VU_HEIGHT = 48-2;
             private animationHandle: number | undefined = undefined;
             
@@ -207,7 +228,7 @@ const PluginOutputControl =
                             <div style={{ flex: "1 1 auto", display: "flex", justifyContent: "center", alignItems: "center", flexFlow: "row nowrap" }}>
                                 <div style={{ width: 6, height: 48, background: "#000",  }}>
                                     <div style={{ height: 46, overflow: "hidden", position: "absolute", margin: 1 }}>
-                                        <div ref={this.vuRef} style={{ width: 4, height: 44, background: "#0C0", }} />
+                                        <div ref={this.vuRef} style={{ width: 4, height: 48, background: "#0C0", }} />
                                     </div>
                                 </div>
 

react/src/PluginPresetSelector.tsx

@@ -96,6 +96,19 @@ const PluginPresetSelector =
             {
                 this.handlePresetsMenuClose();
                 this.model.loadPluginPreset(this.props.instanceId,instanceId);
+                let presetName = this.getPresetName(instanceId);
+                this.setState({saveAsName: presetName});
+            }
+            getPresetName(instanceId: number)
+            {
+                for (let preset of this.state.presets.presets)
+                {
+                    if (preset.instanceId === instanceId)
+                    {
+                        return preset.label;
+                    }
+                }
+                return "";
             }
 
             handlePresetMenuClick(e: SyntheticEvent): void {

react/src/PluginPresetsDialog.tsx

@@ -85,7 +85,8 @@ const styles = (theme: Theme) => createStyles({
     },
     dialogTitle: {
         marginLeft: theme.spacing(2),
-        flex: 1,
+        textOverflow: "ellipsis",
+        flex: "1 1",
     },
     itemFrame: {
         display: "flex",
@@ -382,7 +383,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
                                         </IconButton>
 
                                     )}
-                                    <Typography variant="h6" className={classes.dialogTitle}>
+                                    <Typography noWrap variant="h6" className={classes.dialogTitle}>
                                         { title }
                                     </Typography>
                                     {(this.props.presets.getItem(this.state.selectedItem) != null)

react/src/PresetSelector.tsx

@@ -318,7 +318,7 @@ const PresetSelector =
                                     onChange={(e, extra) => this.handleChange(e, extra)}
                                     onClose={(e) => this.handleSelectClose(e)}
                                     displayEmpty
-                                    value={presets.selectedInstanceId}
+                                    value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
                                     inputProps={{
                                         classes: { icon: classes.icon },
                                         'aria-label': "Select preset"