FoolHen
326 lines
13 KiB
TypeScript
326 lines
13 KiB
TypeScript
/*
|
|
* 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 React, { SyntheticEvent } from 'react';
|
|
import { css } from '@emotion/react';
|
|
import DialogEx from './DialogEx';
|
|
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
|
|
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
|
|
import Typography from '@mui/material/Typography';
|
|
import { Theme } from '@mui/material/styles';
|
|
import WithStyles from './WithStyles';
|
|
import { createStyles } from './WithStyles';
|
|
|
|
import { withStyles } from "tss-react/mui";
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
import IconButtonEx from './IconButtonEx';
|
|
import MidiBinding from './MidiBinding';
|
|
import SystemMidiBindingView from './SystemMidiBindingView';
|
|
import Snackbar from '@mui/material/Snackbar';
|
|
|
|
const styles = (theme: Theme) => createStyles({
|
|
dialogAppBar: css({
|
|
position: 'relative',
|
|
top: 0, left: 0
|
|
}),
|
|
dialogTitle: css({
|
|
marginLeft: theme.spacing(2),
|
|
flex: "1 1 auto",
|
|
}),
|
|
pluginTable: css({
|
|
borderCollapse: "collapse",
|
|
width: "100%",
|
|
|
|
}),
|
|
pluginHead: css({
|
|
borderTop: "1pt #DDD solid", paddingLeft: 22, paddingRight: 22
|
|
}),
|
|
bindingTd: css({
|
|
verticalAlign: "top",
|
|
paddingLeft: 12, paddingBottom: 8
|
|
}),
|
|
nameTd: css({
|
|
paddingLeft: 16,
|
|
verticalAlign: "top",
|
|
paddingTop: 12
|
|
}),
|
|
plainRow: css({
|
|
borderWidth: "1px 0px 0px 0px", borderStyle: "solid", borderColor: "transparent"
|
|
}),
|
|
dividerRow: css({
|
|
borderWidth: "1px 0px 0px 0px", borderStyle: "solid", borderColor: theme.palette.divider
|
|
})
|
|
|
|
});
|
|
|
|
|
|
export interface SystemMidiBindingDialogProps extends WithStyles<typeof styles> {
|
|
open: boolean,
|
|
onClose: () => void
|
|
}
|
|
|
|
class BindingEntry {
|
|
constructor(
|
|
displayName: string,
|
|
instanceId: number,
|
|
midiBinding: MidiBinding,
|
|
) {
|
|
this.displayName = displayName;
|
|
this.instanceId = instanceId;
|
|
this.midiBinding = midiBinding;
|
|
}
|
|
displayName: string;
|
|
instanceId: number;
|
|
midiBinding: MidiBinding;
|
|
}
|
|
|
|
export interface SystemMidiBindingDialogState {
|
|
listenInstanceId: number;
|
|
listenSymbol: string;
|
|
listenSnackbarOpen: boolean;
|
|
systemMidiBindings: BindingEntry[];
|
|
|
|
}
|
|
|
|
export const SystemMidiBindingDialog =
|
|
withStyles(
|
|
class extends ResizeResponsiveComponent<SystemMidiBindingDialogProps, SystemMidiBindingDialogState> {
|
|
|
|
model: PiPedalModel;
|
|
|
|
constructor(props: SystemMidiBindingDialogProps) {
|
|
super(props);
|
|
this.model = PiPedalModelFactory.getInstance();
|
|
this.state = {
|
|
listenInstanceId: -2,
|
|
listenSymbol: "",
|
|
listenSnackbarOpen: false,
|
|
systemMidiBindings: this.createBindings()
|
|
};
|
|
this.handleClose = this.handleClose.bind(this);
|
|
this.onMidiBindingsChanged = this.onMidiBindingsChanged.bind(this);
|
|
}
|
|
|
|
createBindings(): BindingEntry[] {
|
|
let result: BindingEntry[] = [];
|
|
let listenInstanceId = 0;
|
|
for (var item of this.model.systemMidiBindings.get()) {
|
|
let displayName = "";
|
|
let found = true;
|
|
if (item.symbol === "nextBank") {
|
|
displayName = "Next Bank";
|
|
}
|
|
else if (item.symbol === "prevBank") {
|
|
displayName = "Previous Bank";
|
|
}
|
|
else if (item.symbol === "nextProgram") {
|
|
displayName = "Next Preset";
|
|
} else if (item.symbol === "prevProgram") {
|
|
displayName = "Previous Preset";
|
|
}
|
|
else if (item.symbol === "snapshot1") {
|
|
displayName = "Snapshot 1";
|
|
}
|
|
else if (item.symbol === "snapshot2") {
|
|
displayName = "Snapshot 2";
|
|
}
|
|
else if (item.symbol === "snapshot3") {
|
|
displayName = "Snapshot 3";
|
|
}
|
|
else if (item.symbol === "snapshot4") {
|
|
displayName = "Snapshot 4";
|
|
}
|
|
else if (item.symbol === "snapshot5") {
|
|
displayName = "Snapshot 5";
|
|
}
|
|
else if (item.symbol === "snapshot6") {
|
|
displayName = "Snapshot 6";
|
|
}
|
|
else if (item.symbol === "nextSnapshot") {
|
|
displayName = "Next Snapshot";
|
|
} else if (item.symbol === "prevSnapshot") {
|
|
displayName = "Previous Snapshot";
|
|
} else if (item.symbol === "startHotspot") {
|
|
displayName = "Enable Hotspot";
|
|
} else if (item.symbol === "stopHotspot") {
|
|
displayName = "Disable Hotspot";
|
|
} else if (item.symbol === "shutdown") {
|
|
displayName = "Shutdown";
|
|
} else if (item.symbol === "reboot") {
|
|
displayName = "Reboot";
|
|
} else {
|
|
found = false;
|
|
}
|
|
if (found) {
|
|
result.push(new BindingEntry(displayName, listenInstanceId, item));
|
|
++listenInstanceId;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
mounted: boolean = false;
|
|
|
|
hasHooks: boolean = false;
|
|
|
|
handleClose() {
|
|
this.props.onClose();
|
|
}
|
|
|
|
onWindowSizeChanged(width: number, height: number): void {
|
|
}
|
|
|
|
onMidiBindingsChanged() {
|
|
this.setState({ systemMidiBindings: this.createBindings() });
|
|
}
|
|
|
|
componentDidMount() {
|
|
super.componentDidMount();
|
|
this.mounted = true;
|
|
|
|
this.model.systemMidiBindings.addOnChangedHandler(this.onMidiBindingsChanged);
|
|
this.onMidiBindingsChanged();
|
|
}
|
|
componentWillUnmount() {
|
|
super.componentWillUnmount();
|
|
|
|
this.mounted = false;
|
|
this.model.systemMidiBindings.removeOnChangedHandler(this.onMidiBindingsChanged);
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
}
|
|
handleItemChanged(instanceId: number, newBinding: MidiBinding) {
|
|
this.model.setSystemMidiBinding(instanceId, newBinding);
|
|
}
|
|
generateTable(): React.ReactNode[] {
|
|
const classes = withStyles.getClasses(this.props);
|
|
let result: React.ReactNode[] = [];
|
|
|
|
let items = this.state.systemMidiBindings;
|
|
|
|
for (var item of items) {
|
|
let symbol = item.midiBinding.symbol;
|
|
let hasDivider = symbol === "snapshot1" || symbol === "stopHotspot" || symbol === "shotdown";
|
|
if (hasDivider) {
|
|
result.push(
|
|
<tr>
|
|
<td colSpan={2} className={classes.dividerRow}><div style={{ height: 1 }} /></td>
|
|
</tr>
|
|
);
|
|
}
|
|
result.push(
|
|
<tr key={item.instanceId} >
|
|
<td className={classes.nameTd}>
|
|
<Typography noWrap style={{ verticalAlign: "center", height: 48 }}>
|
|
{item.displayName}
|
|
</Typography>
|
|
</td>
|
|
<td className={classes.bindingTd}>
|
|
<SystemMidiBindingView instanceId={item.instanceId} midiBinding={item.midiBinding}
|
|
onChange={(instanceId: number, newItem: MidiBinding) => this.handleItemChanged(instanceId, newItem)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
|
|
return result;
|
|
}
|
|
|
|
supressDefault(e: SyntheticEvent) {
|
|
//e.preventDefault();
|
|
//e.stopPropagation();
|
|
}
|
|
|
|
render() {
|
|
let props = this.props;
|
|
let { open } = props;
|
|
|
|
const classes = withStyles.getClasses(this.props);
|
|
if (!open) {
|
|
return (<div />);
|
|
}
|
|
|
|
return (
|
|
<DialogEx tag="systemMidiBindings" open={open} fullWidth onClose={this.handleClose} aria-labelledby="Rename-dialog-title"
|
|
fullScreen={true}
|
|
style={{ userSelect: "none" }}
|
|
onEnterKey={() => { }}
|
|
>
|
|
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", width: "100%", height: "100%", overflow: "hidden" }}>
|
|
<div style={{ flex: "0 0 auto" }}>
|
|
<AppBar className={classes.dialogAppBar} >
|
|
<Toolbar>
|
|
<IconButtonEx
|
|
tooltip="Back"
|
|
edge="start"
|
|
color="inherit"
|
|
onClick={this.handleClose}
|
|
aria-label="back"
|
|
size="large">
|
|
<ArrowBackIcon />
|
|
</IconButtonEx>
|
|
<Typography variant="h6" className={classes.dialogTitle}>
|
|
System MIDI Bindings
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
</div>
|
|
<div style={{ overflow: "auto", flex: "1 1 auto", width: "100%" }}>
|
|
<table className={classes.pluginTable} >
|
|
<colgroup>
|
|
<col style={{ width: "auto" }} />
|
|
<col style={{ width: "100%" }} />
|
|
</colgroup>
|
|
|
|
<tbody>
|
|
{this.generateTable()}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<Snackbar
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
}}
|
|
open={this.state.listenSnackbarOpen}
|
|
autoHideDuration={1500}
|
|
onClose={() => this.setState({ listenSnackbarOpen: false })}
|
|
message="Listening for MIDI input"
|
|
/>
|
|
</DialogEx >
|
|
);
|
|
}
|
|
},
|
|
styles
|
|
);
|
|
|
|
|
|
export default SystemMidiBindingDialog; |