shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beta-5

Browse Source
This commit is contained in:
Robin Davies
2022-04-30 09:06:40 -04:00
parent 179ff9c276
commit f0f075ae4e
16 changed files with 209 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/src/AppThemed.tsx
+14 -3
View File
@@ -264,6 +264,7 @@ type AppState = {
presetChanged: boolean;
banks: BankIndex;
bankDisplayItems: number;
showStatusMonitor: boolean;
};
interface AppProps extends WithStyles<typeof appStyles> {
}
@@ -309,7 +310,8 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
bankDialogOpen: false,
editBankDialogOpen: false,
zoomedControlOpen: false,
bankDisplayItems: 5
bankDisplayItems: 5,
showStatusMonitor: this.model_.showStatusMonitor.get()
};
@@ -319,6 +321,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
this.alertMessageChangedHandler = this.alertMessageChangedHandler.bind(this);
this.handleCloseAlert = this.handleCloseAlert.bind(this);
this.banksChangedHandler = this.banksChangedHandler.bind(this);
this.showStatusMonitorHandler = this.showStatusMonitorHandler.bind(this);
}
@@ -450,6 +453,11 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
handleCloseAlert(e?: any, reason?: any) {
this.model_.alertMessage.set("");
}
showStatusMonitorHandler() {
this.setState({
showStatusMonitor: this.model_.showStatusMonitor.get()
});
}
banksChangedHandler() {
this.setState({
banks: this.model_.banks.get()
@@ -484,6 +492,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
this.model_.pedalBoard.addOnChangedHandler(this.presetChangedHandler);
this.model_.alertMessage.addOnChangedHandler(this.alertMessageChangedHandler);
this.model_.banks.addOnChangedHandler(this.banksChangedHandler);
this.model_.showStatusMonitor.addOnChangedHandler(this.showStatusMonitorHandler);
this.alertMessageChangedHandler();
}
@@ -508,7 +517,8 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
this.model_.errorMessage.removeOnChangedHandler(this.errorChangeHandler_);
this.model_.state.removeOnChangedHandler(this.stateChangeHandler_);
this.model_.pedalBoard.removeOnChangedHandler(this.presetChangedHandler);
this.model_.banks.addOnChangedHandler(this.banksChangedHandler);
this.model_.banks.removeOnChangedHandler(this.banksChangedHandler);
this.model_.banks.removeOnChangedHandler(this.showStatusMonitorHandler);
}
@@ -814,7 +824,8 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
</Button>
</DialogActions>
</Dialog>
<JackStatusView />
{ this.state.showStatusMonitor && (<JackStatusView />) }
<div className={classes.errorContent} style={{
display: (this.state.displayState === State.Reconnecting || this.state.displayState === State.ApplyingChanges)
? "block" : "none"
react/src/PiPedalModel.tsx
+38 -23
View File
@@ -314,7 +314,8 @@ export interface PiPedalModel {
serverVersion?: PiPedalVersion;
errorMessage: ObservableProperty<string>;
alertMessage: ObservableProperty<string>;
showStatusMonitor: ObservableProperty<boolean>;
setShowStatusMonitor(show: boolean): void;
state: ObservableProperty<State>;
visibilityState: ObservableProperty<VisibilityState>;
@@ -458,6 +459,9 @@ class PiPedalModelImpl implements PiPedalModel {
errorMessage: ObservableProperty<string> = new ObservableProperty<string>("");
alertMessage: ObservableProperty<string> = new ObservableProperty<string>("");
showStatusMonitor: ObservableProperty<boolean> = new ObservableProperty<boolean>(true);
pedalBoard: ObservableProperty<PedalBoard> = new ObservableProperty<PedalBoard>(new PedalBoard());
plugin_classes: ObservableProperty<PluginClass> = new ObservableProperty<PluginClass>(new PluginClass());
jackConfiguration: ObservableProperty<JackConfiguration> = new ObservableProperty<JackConfiguration>(new JackConfiguration());
@@ -512,8 +516,7 @@ class PiPedalModelImpl implements PiPedalModel {
onSocketReconnecting(retry: number, maxRetries: number): void {
if (this.visibilityState.get() === VisibilityState.Hidden) return;
//if (retry !== 0) {
if (this.restartExpected)
{
if (this.restartExpected) {
this.setState(State.ApplyingChanges);
} else {
this.setState(State.Reconnecting);
@@ -563,6 +566,9 @@ class PiPedalModelImpl implements PiPedalModel {
if (!this.compareFavorites(favorites, this.favorites.get())) {
this.favorites.set(favorites);
}
} else if (message === "onShowStatusMonitorChanged") {
let value = body as boolean;
this.showStatusMonitor.set(value);
} else if (message === "onChannelSelectionChanged") {
let channelSelectionBody = body as ChannelSelectionChangedBody;
let channelSelection = new JackChannelSelection().deserialize(channelSelectionBody.jackChannelSelection);
@@ -655,7 +661,7 @@ class PiPedalModelImpl implements PiPedalModel {
}
} else {
throw new PiPedalStateError("Unrecognized message received from server.");
throw new PiPedalStateError("Unrecognized message received from server: " + message);
}
}
setError(message: string): void {
@@ -708,15 +714,13 @@ class PiPedalModelImpl implements PiPedalModel {
}
onSocketConnectionLost() {
if (this.isAndroidHosted())
{
if (this.isAndroidHosted()) {
this.androidHost?.setDisconnected(true);
}
}
onSocketReconnected() {
if (this.isAndroidHosted())
{
if (this.isAndroidHosted()) {
this.androidHost?.setDisconnected(false);
}
@@ -732,6 +736,11 @@ class PiPedalModelImpl implements PiPedalModel {
.then(data => {
this.pedalBoard.set(new PedalBoard().deserialize(data));
return this.getWebSocket().request<boolean>("getShowStatusMonitor");
})
.then(data => {
this.showStatusMonitor.set(data);
return this.getWebSocket().request<any>("getWifiConfigSettings");
})
.then(data => {
@@ -833,13 +842,13 @@ class PiPedalModelImpl implements PiPedalModel {
this.webSocket = new PiPedalSocket(
this.socketServerUrl,
{
onMessageReceived : this.onSocketMessage,
onMessageReceived: this.onSocketMessage,
onError: this.onSocketError,
onConnectionLost: this.onSocketConnectionLost,
onReconnect: this.onSocketReconnected,
onReconnect: this.onSocketReconnected,
onReconnecting: this.onSocketReconnecting
}
);
);
return this.webSocket.connect();
})
.then(() => {
@@ -856,6 +865,7 @@ class PiPedalModelImpl implements PiPedalModel {
})
.then((clientId) => {
this.clientId = clientId;
return this.getWebSocket().request<string>("imageList");
})
.then((data) => {
@@ -907,7 +917,11 @@ class PiPedalModelImpl implements PiPedalModel {
.then(data => {
this.governorSettings.set(new GovernorSettings().deserialize(data));
return this.getWebSocket().request<boolean>("getShowStatusMonitor");
})
.then(data => {
this.showStatusMonitor.set(data);
return this.getWebSocket().request<any>("getJackServerSettings");
})
.then(data => {
@@ -976,11 +990,10 @@ class PiPedalModelImpl implements PiPedalModel {
}
backgroundStateTimeout?: NodeJS.Timeout = undefined;
backgroundStateTimeout?: NodeJS.Timeout = undefined;
exitBackgroundState() {
if (this.backgroundStateTimeout)
{
if (this.backgroundStateTimeout) {
clearTimeout(this.backgroundStateTimeout);
this.backgroundStateTimeout = undefined;
return;
@@ -996,10 +1009,8 @@ class PiPedalModelImpl implements PiPedalModel {
// on Android, delay entering background state by 3 seconds,
// so that screen-flips don't trigger disconnects.
if (this.isAndroidHosted())
{
if (this.backgroundStateTimeout)
{
if (this.isAndroidHosted()) {
if (this.backgroundStateTimeout) {
clearTimeout(this.backgroundStateTimeout);
}
this.backgroundStateTimeout = setTimeout(() => {
@@ -1009,7 +1020,7 @@ class PiPedalModelImpl implements PiPedalModel {
} else {
this.enterBackgroundState_();
}
}
}
enterBackgroundState_() {
if (this.state.get() !== State.Background) {
console.log("Entering background state.");
@@ -1181,6 +1192,7 @@ class PiPedalModelImpl implements PiPedalModel {
}
}
setPedalBoardControlValue(instanceId: number, key: string, value: number): void {
this._setPedalBoardControlValue(instanceId, key, value, true);
}
@@ -1219,6 +1231,10 @@ class PiPedalModelImpl implements PiPedalModel {
}
setShowStatusMonitor(show: boolean): void {
this.webSocket?.send("setShowStatusMonitor", show);
}
loadPedalBoardPlugin(itemId: number, selectedUri: string): number {
let pedalBoard = this.pedalBoard.get();
if (pedalBoard === undefined) throw new PiPedalArgumentError("Can't clone an undefined object.");
@@ -1497,7 +1513,7 @@ class PiPedalModelImpl implements PiPedalModel {
expectRestart() {
this.restartExpected = true;
}
setJackSettings(jackSettings: JackChannelSelection): void {
@@ -2108,8 +2124,7 @@ class PiPedalModelImpl implements PiPedalModel {
isAndroidHosted(): boolean { return this.androidHost !== undefined; }
showAndroidDonationActivity(): void {
if (this.androidHost)
{
if (this.androidHost) {
this.androidHost.showSponsorship();
}
}
react/src/SettingsDialog.tsx
+46 -20
View File
@@ -18,6 +18,7 @@
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React, { SyntheticEvent, Component } from 'react';
import Switch from "@mui/material/Switch";
import OkCancelDialog from './OkCancelDialog';
import ListSelectDialog from './ListSelectDialog';
import IconButton from '@mui/material/IconButton';
@@ -56,6 +57,8 @@ interface SettingsDialogProps extends WithStyles<typeof styles> {
};
interface SettingsDialogState {
showStatusMonitor: boolean;
showStatusMonitorDialog: boolean;
jackConfiguration: JackConfiguration;
jackSettings: JackChannelSelection;
jackServerSettings: JackServerSettings;
@@ -153,6 +156,9 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
this.handleDialogClose = this.handleDialogClose.bind(this);
this.state = {
showStatusMonitor: this.model.showStatusMonitor.get(),
showStatusMonitorDialog: false,
jackServerSettings: this.model.jackServerSettings.get(),
jackConfiguration: this.model.jackConfiguration.get(),
jackStatus: undefined,
@@ -183,10 +189,15 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
this.handleWifiDirectConfigSettingsChanged = this.handleWifiDirectConfigSettingsChanged.bind(this);
this.handleGovernorSettingsChanged = this.handleGovernorSettingsChanged.bind(this);
this.handleConnectionStateChanged = this.handleConnectionStateChanged.bind(this);
this.handleShowStatusMonitorChanged = this.handleShowStatusMonitorChanged.bind(this);
}
handleShowStatusMonitorChanged(): void {
this.setState({ showStatusMonitor: this.model.showStatusMonitor.get() });
}
handleConnectionStateChanged(): void {
if (this.model.state.get() === State.Ready) {
this.setState({ isAndroidHosted: this.model.isAndroidHosted() });
@@ -290,6 +301,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
this.active = active;
if (active) {
this.model.state.addOnChangedHandler(this.handleConnectionStateChanged);
this.model.showStatusMonitor.addOnChangedHandler(this.handleShowStatusMonitorChanged);
this.model.jackSettings.addOnChangedHandler(this.handleJackSettingsChanged);
this.model.jackConfiguration.addOnChangedHandler(this.handleJackConfigurationChanged);
this.model.jackServerSettings.addOnChangedHandler(this.handleJackServerSettingsChanged);
@@ -312,6 +324,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
this.handleConnectionStateChanged();
this.handleJackConfigurationChanged();
this.handleJackSettingsChanged();
this.handleShowStatusMonitorChanged();
this.handleJackServerSettingsChanged();
this.handleWifiConfigSettingsChanged();
this.handleWifiDirectConfigSettingsChanged();
@@ -321,6 +334,8 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
clearInterval(this.timerHandle);
}
this.model.state.removeOnChangedHandler(this.handleConnectionStateChanged);
this.model.showStatusMonitor.removeOnChangedHandler(this.handleShowStatusMonitorChanged);
this.model.jackConfiguration.removeOnChangedHandler(this.handleJackConfigurationChanged);
this.model.jackSettings.removeOnChangedHandler(this.handleJackSettingsChanged);
this.model.jackServerSettings.removeOnChangedHandler(this.handleJackServerSettingsChanged);
@@ -436,7 +451,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
});
}
handleRestart() {
this.setState({showRestartOkDialog: true});
this.setState({ showRestartOkDialog: true });
}
handleRestartOk() {
this.setState({ restarting: true });
@@ -452,7 +467,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
}
handleShutdown() {
this.setState({ showShutdownOkDialog: true});
this.setState({ showShutdownOkDialog: true });
}
handleShutdownOk() {
this.setState({ shuttingDown: true });
@@ -525,7 +540,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
)
}
<Divider/>
<Divider />
<Typography className={classes.sectionHead} display="block" variant="caption" color="secondary">
AUDIO
</Typography>
@@ -592,7 +607,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
this.state.isAndroidHosted &&
(
<ButtonBase className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
onClick={() => this.model.chooseNewDevice() } >
onClick={() => this.model.chooseNewDevice()} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
@@ -606,7 +621,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
)
}
<ButtonBase
<ButtonBase
className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
onClick={() => this.handleShowWifiDirectConfigDialog()} >
<SelectHoverBackground selected={false} showHover={true} />
@@ -654,16 +669,28 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
</ButtonBase>
<ButtonBase
className={classes.setting} disabled={!this.state.wifiConfigSettings.valid}
onClick={() => { } } >
className={classes.setting}
onClick={() => { this.setState({ showStatusMonitorDialog: true }); }} >
<SelectHoverBackground selected={false} showHover={true} />
<div style={{ width: "100%" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Show status monitor on main screen.</Typography>
<Typography display="block" variant="caption" noWrap color="textSecondary">
Enabled
</Typography>
<div style={{
width: "100%", display: "flex", flexDirection: "row", flexWrap: "nowrap",
alignItems: "center", maxWidth: 400
}}>
<div style={{ flex: "1 1 auto" }}>
<Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
Show status monitor on main screen.</Typography>
</div>
<div style={{ flex: "0 0 auto" }}>
<Switch
checked={this.state.showStatusMonitor}
onChange={
(e) => { this.model.setShowStatusMonitor(e.target.checked); }
}
/>
</div>
</div>
</div>
</ButtonBase>
@@ -735,7 +762,6 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
>
</ListSelectDialog>
)
}
{
(this.state.showMidiSelectDialog) &&
@@ -756,15 +782,15 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
onClose={() => this.setState({ showWifiDirectConfigDialog: false })}
onOk={(wifiDirectConfigSettings: WifiDirectConfigSettings) => this.handleApplyWifiDirectConfig(wifiDirectConfigSettings)}
/>
<OkCancelDialog text="Are you sure you want to reboot?" okButtonText='Reboot'
<OkCancelDialog text="Are you sure you want to reboot?" okButtonText='Reboot'
open={this.state.showRestartOkDialog}
onOk={()=> { this.setState({showRestartOkDialog: false}); this.handleRestartOk();}}
onClose={()=> { this.setState({showRestartOkDialog: false}); } }
onOk={() => { this.setState({ showRestartOkDialog: false }); this.handleRestartOk(); }}
onClose={() => { this.setState({ showRestartOkDialog: false }); }}
/>
<OkCancelDialog text="Are you sure you want to shut down?" okButtonText='Shut down'
<OkCancelDialog text="Are you sure you want to shut down?" okButtonText='Shut down'
open={this.state.showShutdownOkDialog}
onOk={()=> { this.setState({showShutdownOkDialog: false}); this.handleShutdownOk();}}
onClose={()=> { this.setState({showShutdownOkDialog: false}); } }
onOk={() => { this.setState({ showShutdownOkDialog: false }); this.handleShutdownOk(); }}
onClose={() => { this.setState({ showShutdownOkDialog: false }); }}
/>
</DialogEx >