Robin E. R. Davies
548 lines
28 KiB
TypeScript
548 lines
28 KiB
TypeScript
// Copyright (c) 2024 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 BankIcon from './svg/ic_bank.svg?react';
|
|
import Typography from '@mui/material/Typography';
|
|
import SaveIconOutline from '@mui/icons-material/Save';
|
|
import WithStyles from './WithStyles';
|
|
import { createStyles } from './WithStyles';
|
|
|
|
import { withStyles } from "tss-react/mui";
|
|
import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
|
|
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
import IconButtonEx from './IconButtonEx';
|
|
import SnapshotPanel from './SnapshotPanel';
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
|
//import ArrowLeftOutlined from '@mui/icons-material/ArrowLeft';
|
|
//import ArrowRightOutlined from '@mui/icons-material/ArrowRight';
|
|
import Select from '@mui/material/Select';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import { isDarkMode } from './DarkMode';
|
|
import { BankIndex } from './Banks';
|
|
import SnapshotEditor from './SnapshotEditor';
|
|
import { Snapshot } from './Pedalboard';
|
|
import JackStatusView from './JackStatusView';
|
|
import { IDialogStackable, popDialogStack, pushDialogStack } from './DialogStack';
|
|
import { css } from '@emotion/react';
|
|
|
|
|
|
const selectColor = isDarkMode() ? "#888" : "#FFFFFF";
|
|
|
|
const styles = (theme: Theme) => createStyles({
|
|
listIcon: css({
|
|
width: 24, height: 24,
|
|
opacity: 0.6, fill: theme.palette.text.primary
|
|
}),
|
|
frame: css({
|
|
position: "absolute", display: "flex", flexDirection: "column", flexWrap: "nowrap",
|
|
justifyContent: "flex-start", left: "0px", top: "0px", bottom: "0px", right: "0px", overflow: "hidden"
|
|
}),
|
|
select: css({ // fu fu fu.Overrides for white selector on dark background.
|
|
'&:before': {
|
|
borderColor: selectColor,
|
|
},
|
|
'&:after': {
|
|
borderColor: selectColor,
|
|
},
|
|
'&:hover:not(.Mui-disabled):before': {
|
|
borderColor: selectColor,
|
|
}
|
|
}),
|
|
select_icon: css({
|
|
fill: selectColor,
|
|
}),
|
|
});
|
|
|
|
|
|
interface PerformanceViewProps extends WithStyles<typeof styles> {
|
|
open: boolean,
|
|
onClose: () => void,
|
|
}
|
|
|
|
interface PerformanceViewState {
|
|
wrapSelects: boolean;
|
|
largeAppBar: boolean;
|
|
presets: PresetIndex;
|
|
banks: BankIndex;
|
|
showSnapshotEditor: boolean;
|
|
showStatusMonitor: boolean;
|
|
snapshotEditorIndex: number;
|
|
presetModified: boolean;
|
|
}
|
|
|
|
|
|
export const PerformanceView =
|
|
withStyles(
|
|
class extends ResizeResponsiveComponent<PerformanceViewProps, PerformanceViewState> implements IDialogStackable {
|
|
model: PiPedalModel;
|
|
|
|
constructor(props: PerformanceViewProps) {
|
|
super(props);
|
|
this.model = PiPedalModelFactory.getInstance();
|
|
// let pedalboard = this.model.pedalboard.get();
|
|
// let selectedPedal = pedalboard.getFirstSelectableItem();
|
|
|
|
this.state = {
|
|
presets: this.model.presets.get(),
|
|
banks: this.model.banks.get(),
|
|
wrapSelects: false,
|
|
largeAppBar: this.updateAppBarZoom(),
|
|
showSnapshotEditor: false,
|
|
showStatusMonitor: this.model.showStatusMonitor.get(),
|
|
snapshotEditorIndex: 0,
|
|
presetModified: this.model.presetChanged.get()
|
|
};
|
|
this.onPresetsChanged = this.onPresetsChanged.bind(this);
|
|
this.onBanksChanged = this.onBanksChanged.bind(this);
|
|
this.onPresetChangedChanged = this.onPresetChangedChanged.bind(this);
|
|
this.showStatusMonitorHandler = this.showStatusMonitorHandler.bind(this);
|
|
|
|
}
|
|
|
|
updateAppBarZoom() {
|
|
return this.windowSize.width > 700;
|
|
}
|
|
|
|
showStatusMonitorHandler() {
|
|
this.setState({
|
|
showStatusMonitor: this.model.showStatusMonitor.get()
|
|
});
|
|
}
|
|
|
|
getTag() { return "performView" }
|
|
isOpen() { return this.props.open }
|
|
onDialogStackClose() {
|
|
this.props.onClose();
|
|
}
|
|
|
|
|
|
private hasHooks: boolean = false;
|
|
|
|
updateHooks(): void {
|
|
let wantHooks = this.mounted && this.props.open;
|
|
|
|
if (wantHooks !== this.hasHooks) {
|
|
this.hasHooks = wantHooks;
|
|
|
|
if (this.hasHooks) {
|
|
|
|
pushDialogStack(this);
|
|
} else {
|
|
popDialogStack(this);
|
|
}
|
|
}
|
|
}
|
|
|
|
onWindowSizeChanged(width: number, height: number): void {
|
|
this.setState({
|
|
wrapSelects: width < 700,
|
|
largeAppBar: this.updateAppBarZoom(),
|
|
});
|
|
}
|
|
|
|
onPresetsChanged(newValue: PresetIndex) {
|
|
this.setState({ presets: this.model.presets.get() })
|
|
}
|
|
onBanksChanged(newValue: BankIndex) {
|
|
this.setState({ banks: this.model.banks.get() })
|
|
}
|
|
onPresetChangedChanged(newValue: boolean) {
|
|
this.setState({ presetModified: newValue });
|
|
}
|
|
|
|
private mounted: boolean = false;
|
|
componentDidMount(): void {
|
|
super.componentDidMount();
|
|
this.mounted = true;
|
|
this.model.presets.addOnChangedHandler(this.onPresetsChanged);
|
|
this.model.banks.addOnChangedHandler(this.onBanksChanged);
|
|
this.model.presetChanged.addOnChangedHandler(this.onPresetChangedChanged)
|
|
this.model.showStatusMonitor.addOnChangedHandler(this.showStatusMonitorHandler);
|
|
|
|
this.setState({
|
|
presets: this.model.presets.get(),
|
|
banks: this.model.banks.get(),
|
|
presetModified: this.model.presetChanged.get()
|
|
|
|
});
|
|
|
|
this.updateHooks();
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount(): void {
|
|
this.model.presetChanged.removeOnChangedHandler(this.onPresetChangedChanged)
|
|
this.model.presets.removeOnChangedHandler(this.onPresetsChanged);
|
|
this.model.banks.removeOnChangedHandler(this.onBanksChanged);
|
|
this.model.banks.removeOnChangedHandler(this.showStatusMonitorHandler);
|
|
|
|
|
|
this.mounted = false;
|
|
this.updateHooks();
|
|
|
|
super.componentWillUnmount();
|
|
|
|
}
|
|
handlePresetSelectClose(event: any): void {
|
|
let value = event.currentTarget.getAttribute("data-value");
|
|
if (value && value.length > 0) {
|
|
this.model.loadPreset(parseInt(value));
|
|
}
|
|
}
|
|
|
|
handleBankSelectClose(event: any): void {
|
|
let value = event.currentTarget.getAttribute("data-value");
|
|
if (value && value.length > 0) {
|
|
this.model.openBank(parseInt(value));
|
|
}
|
|
}
|
|
handleOnEdit(index: number): boolean {
|
|
// load it so we can edit it.
|
|
this.model.selectSnapshot(index);
|
|
this.setState({
|
|
showSnapshotEditor: true,
|
|
snapshotEditorIndex: index
|
|
});
|
|
return true;
|
|
}
|
|
handleSnapshotEditOk(index: number, name: string, color: string, newSnapshots: (Snapshot | null)[]) {
|
|
// results have been sent to the server. we would perform a short-cut commit to our local state, to avoid laggy display updates.
|
|
// but we don't actually have that in our state.
|
|
|
|
}
|
|
|
|
handlePreviousBank() {
|
|
this.model.previousBank();
|
|
}
|
|
|
|
handleNextBank() {
|
|
this.model.nextBank();
|
|
}
|
|
handlePreviousPreset() {
|
|
this.model.previousPreset();
|
|
}
|
|
handleNextPreset() {
|
|
this.model.nextPreset();
|
|
}
|
|
|
|
render() {
|
|
const classes = withStyles.getClasses(this.props);
|
|
let presets = this.state.presets;
|
|
let banks = this.state.banks;
|
|
let appBarIconSize: "large" | undefined = this.state.largeAppBar ? undefined : "large";
|
|
return (
|
|
<div className={classes.frame} style={{ overflow: "clip", height: "100%" }} >
|
|
<div className={classes.frame} style={{ overflow: "clip", height: "100%" }} >
|
|
<div id="select-plugin-dialog-title"
|
|
style={{
|
|
position: "static", flex: "0 0 auto", height: undefined,
|
|
display: this.state.showSnapshotEditor ? "none" : undefined,
|
|
background: "transparent"
|
|
}}
|
|
>
|
|
{this.state.largeAppBar ? (
|
|
<div style={{
|
|
display: "flex", flexFlow: "row nowrap", alignContent: "center",
|
|
paddingTop: 3, paddingBottom: 3, paddingRight: 8, paddingLeft: 8,
|
|
alignItems: "center", justifyContent: "space-between"
|
|
|
|
}}>
|
|
<IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
|
|
onClick={() => { this.props.onClose(); }}
|
|
style={{
|
|
position: "relative", top: 3,
|
|
flex: "0 0 auto"
|
|
}} >
|
|
<ArrowBackIcon fontSize="large" />
|
|
</IconButtonEx>
|
|
|
|
{/********* PRESETS *******************/}
|
|
<div style={{
|
|
flex: "2 2 auto", display: "flex", flexFlow: "row nowrap", alignItems: "center", marginLeft: 24
|
|
|
|
}}>
|
|
<IconButtonEx tooltip="Previous preset"
|
|
aria-label="previous-preset"
|
|
onClick={() => { this.handlePreviousPreset(); }}
|
|
color="inherit"
|
|
style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }}
|
|
>
|
|
<ArrowBackIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
|
|
</IconButtonEx>
|
|
<Select variant="standard"
|
|
className={classes.select}
|
|
style={{
|
|
flex: "1 1 1px", width: "100%", color: "#FFFFFF",
|
|
fontSize: (this.state.largeAppBar ? "2.0rem" : undefined),
|
|
}} disabled={false}
|
|
displayEmpty
|
|
onClose={(e) => this.handlePresetSelectClose(e)}
|
|
value={presets.selectedInstanceId === 0 ? '' : presets.selectedInstanceId}
|
|
|
|
inputProps={{
|
|
classes: { icon: classes.select_icon },
|
|
'aria-label': "Select preset"
|
|
}
|
|
}
|
|
>
|
|
{
|
|
presets.presets.map((preset) => {
|
|
let name = preset.name;
|
|
if (this.state.presets.selectedInstanceId === preset.instanceId && this.state.presetModified) {
|
|
name += "*";
|
|
}
|
|
return (
|
|
<MenuItem key={preset.instanceId} value={preset.instanceId} >
|
|
{name}
|
|
</MenuItem>
|
|
);
|
|
})
|
|
}
|
|
</Select>
|
|
|
|
<IconButtonEx tooltip="Next preset"
|
|
aria-label="next-preset"
|
|
onClick={() => { this.handleNextPreset(); }}
|
|
color="inherit"
|
|
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
|
|
>
|
|
<ArrowForwardIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
|
|
</IconButtonEx>
|
|
|
|
<IconButtonEx tooltip="Save preset"
|
|
aria-label="save-preset"
|
|
onClick={() => { this.model.saveCurrentPreset(); }}
|
|
size="medium"
|
|
color="inherit"
|
|
style={{ flexShrink: 0, visibility: this.state.presetModified ? "visible" : "hidden", marginRight: 16 }}
|
|
>
|
|
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" fontSize={appBarIconSize} />
|
|
</IconButtonEx>
|
|
</div>
|
|
{/********* BANKS *******************/}
|
|
|
|
<div style={{
|
|
flex: "1 1 auto", display: "flex", flexFlow: "row nowrap", maxWidth: 500, marginRight: 16
|
|
}}>
|
|
<Select variant="standard"
|
|
className={classes.select}
|
|
renderValue={(selected) => {
|
|
let entry = banks.entries.find(e => e.instanceId === selected);
|
|
return <div style={{
|
|
display: "flex", flexFlow: "row nowrap", gap: 4,
|
|
alignItems: "center", justifyContent: "stretch",
|
|
}}>
|
|
<BankIcon className={classes.listIcon} style={{ flex: "0 0 auto", width: 20, height: 20 }} />
|
|
<Typography noWrap style={{ flex: "1 1 auto", textAlign: "left" }}
|
|
variant="body2"
|
|
>
|
|
{entry ? entry.name : "-"}
|
|
</Typography>
|
|
</div>;
|
|
}}
|
|
style={{
|
|
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
|
|
fontSize: "1.0rem",
|
|
}} disabled={false}
|
|
displayEmpty
|
|
onClose={(e) => this.handleBankSelectClose(e)}
|
|
value={banks.selectedBank === 0 ? undefined : banks.selectedBank}
|
|
inputProps={{
|
|
classes: { icon: classes.select_icon },
|
|
'aria-label': "Select preset"
|
|
}}
|
|
>
|
|
{
|
|
banks.entries.map((entry) => {
|
|
return (
|
|
<MenuItem key={entry.instanceId} value={entry.instanceId} >
|
|
{entry.name}
|
|
</MenuItem>
|
|
);
|
|
})
|
|
}
|
|
</Select>
|
|
{/** spacer */}
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
) : (
|
|
|
|
<div style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "min-content min-content auto min-content min-content",
|
|
}}>
|
|
<IconButtonEx tooltip="Back" aria-label="menu" color="inherit"
|
|
onClick={() => { this.props.onClose(); }}
|
|
style={{
|
|
position: "relative", top: 3,
|
|
flex: "0 0 auto"
|
|
}} >
|
|
<ArrowBackIcon fontSize="medium" />
|
|
</IconButtonEx>
|
|
|
|
<div/>
|
|
{/********* BANKS *******************/}
|
|
<Select variant="standard"
|
|
className={classes.select}
|
|
renderValue={(selected) => {
|
|
let entry = banks.entries.find(e => e.instanceId === selected);
|
|
return <div style={{
|
|
display: "flex", flexFlow: "row nowrap", gap: 4,
|
|
alignItems: "center", justifyContent: "stretch",
|
|
}}>
|
|
<BankIcon className={classes.listIcon} style={{ flex: "0 0 auto", width: 20, height: 20 }} />
|
|
<Typography noWrap style={{ flex: "1 1 auto", textAlign: "left" }}
|
|
variant="body2"
|
|
>
|
|
{entry ? entry.name : "-"}
|
|
</Typography>
|
|
</div>;
|
|
}}
|
|
style={{
|
|
flex: "1 1 1px", width: "100%", position: "relative", top: 0, color: "#FFFFFF",
|
|
fontSize: "1.0rem",
|
|
}} disabled={false}
|
|
displayEmpty
|
|
onClose={(e) => this.handleBankSelectClose(e)}
|
|
value={banks.selectedBank === 0 ? undefined : banks.selectedBank}
|
|
inputProps={{
|
|
classes: { icon: classes.select_icon },
|
|
'aria-label': "Select preset"
|
|
}}
|
|
>
|
|
{
|
|
banks.entries.map((entry) => {
|
|
return (
|
|
<MenuItem key={entry.instanceId} value={entry.instanceId} >
|
|
{entry.name}
|
|
</MenuItem>
|
|
);
|
|
})
|
|
}
|
|
</Select>
|
|
|
|
<div/>
|
|
|
|
|
|
<div/>
|
|
|
|
{/**** 2nd row ****/}
|
|
<div/>
|
|
{/********* PRESETS *******************/}
|
|
|
|
<IconButtonEx tooltip="Previous preset"
|
|
aria-label="previous-preset"
|
|
onClick={() => { this.handlePreviousPreset(); }}
|
|
color="inherit"
|
|
style={{ borderTopRightRadius: "3px", borderBottomRightRadius: "3px", marginRight: 4 }}
|
|
>
|
|
|
|
<ArrowBackIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
|
|
</IconButtonEx>
|
|
<Select variant="standard"
|
|
className={classes.select}
|
|
style={{
|
|
flex: "1 1 1px", width: "100%", color: "#FFFFFF",
|
|
fontSize: (this.state.largeAppBar ? "2.0rem" : undefined),
|
|
}} disabled={false}
|
|
displayEmpty
|
|
onClose={(e) => this.handlePresetSelectClose(e)}
|
|
value={presets.selectedInstanceId === 0 ? '' : presets.selectedInstanceId}
|
|
|
|
inputProps={{
|
|
classes: { icon: classes.select_icon },
|
|
'aria-label': "Select preset"
|
|
}
|
|
}
|
|
>
|
|
{
|
|
presets.presets.map((preset) => {
|
|
let name = preset.name;
|
|
if (this.state.presets.selectedInstanceId === preset.instanceId && this.state.presetModified) {
|
|
name += "*";
|
|
}
|
|
return (
|
|
<MenuItem key={preset.instanceId} value={preset.instanceId} >
|
|
{name}
|
|
</MenuItem>
|
|
);
|
|
})
|
|
}
|
|
</Select>
|
|
|
|
<IconButtonEx tooltip="Next preset"
|
|
aria-label="next-preset"
|
|
onClick={() => { this.handleNextPreset(); }}
|
|
color="inherit"
|
|
style={{ borderTopLeftRadius: "3px", borderBottomLeftRadius: "3px", marginLeft: 4 }}
|
|
>
|
|
<ArrowForwardIosIcon style={{ opacity: 0.75 }} fontSize={appBarIconSize} />
|
|
</IconButtonEx>
|
|
|
|
<IconButtonEx tooltip="Save preset"
|
|
aria-label="save-preset"
|
|
onClick={() => { this.model.saveCurrentPreset(); }}
|
|
size="medium"
|
|
color="inherit"
|
|
style={{ flexShrink: 0, visibility: this.state.presetModified ? "visible" : "hidden" }}
|
|
>
|
|
<SaveIconOutline style={{ opacity: 0.75 }} color="inherit" fontSize={appBarIconSize} />
|
|
</IconButtonEx>
|
|
|
|
</div>
|
|
|
|
)}
|
|
</div >
|
|
<div style={{ flex: "1 0 auto", display: "flex", marginTop: 16, marginBottom: 20 }}>
|
|
<SnapshotPanel onEdit={(index) => { return this.handleOnEdit(index); }} />
|
|
</div>
|
|
|
|
|
|
{!this.state.showSnapshotEditor && this.state.showStatusMonitor && (
|
|
<JackStatusView />
|
|
)}
|
|
</div>
|
|
{this.state.showSnapshotEditor && (
|
|
<SnapshotEditor snapshotIndex={this.state.snapshotEditorIndex}
|
|
onClose={() => {
|
|
this.setState({ showSnapshotEditor: false });
|
|
}}
|
|
onOk={(index, name, color, newSnapshots) => {
|
|
this.setState({ showSnapshotEditor: false });
|
|
this.handleSnapshotEditOk(index, name, color, newSnapshots);
|
|
}}
|
|
/>
|
|
)}
|
|
</div >
|
|
)
|
|
}
|
|
},
|
|
styles
|
|
);
|
|
|