Robin E. R. Davies
1174 lines
45 KiB
TypeScript
1174 lines
45 KiB
TypeScript
// Copyright (c) 2022 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 './AppThemed.css';
|
|
//import {alpha} from '@mui/material/styles';
|
|
import AppBar from '@mui/material/AppBar';
|
|
|
|
import Modal from '@mui/material/Modal';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import Typography from '@mui/material/Typography';
|
|
import { withStyles } from "tss-react/mui";
|
|
import WithStyles from './WithStyles';
|
|
import { css } from '@emotion/react';
|
|
|
|
import IconButtonEx from './IconButtonEx';
|
|
import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism';
|
|
import MenuButton from '@mui/icons-material/Menu';
|
|
import { TemporaryDrawer } from './TemporaryDrawer';
|
|
import FullscreenIcon from '@mui/icons-material/Fullscreen';
|
|
import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
|
|
import List from '@mui/material/List';
|
|
import Divider from '@mui/material/Divider';
|
|
// import ListItem from '@mui/material/ListItem';
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
|
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
import { type OnChangedHandler } from './ObservableProperty';
|
|
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
|
|
import ResizeResponsiveComponent from './ResizeResponsiveComponent';
|
|
import Button from '@mui/material/Button';
|
|
import PresetSelector from './PresetSelector';
|
|
import SettingsDialog from './SettingsDialog';
|
|
import AboutDialog from './AboutDialog';
|
|
import BankDialog from './BankDialog';
|
|
|
|
import { PiPedalModelFactory, PiPedalModel, State, ZoomedControlInfo, wantsReloadingScreen } from './PiPedalModel';
|
|
import ZoomedUiControl from './ZoomedUiControl'
|
|
import MainPage from './MainPage';
|
|
import DialogContent from '@mui/material/DialogContent';
|
|
import DialogContentText from '@mui/material/DialogContentText';
|
|
import DialogActions from '@mui/material/DialogActions';
|
|
import ListSubheader from '@mui/material/ListSubheader';
|
|
import { BankIndex, BankIndexEntry } from './Banks';
|
|
import RenameDialog from './RenameDialog';
|
|
import JackStatusView from './JackStatusView';
|
|
import { type Theme } from '@mui/material/styles';
|
|
import { isDarkMode } from './DarkMode';
|
|
import UpdateDialog from './UpdateDialog';
|
|
|
|
import RenameOutlineIcon from './svg/drive_file_rename_outline_black_24dp.svg?react';
|
|
import SaveBankAsIcon from './svg/ic_save_bank_as.svg?react';
|
|
import EditBanksIcon from './svg/ic_edit_banks.svg?react';
|
|
import SettingsIcon from './svg/ic_settings.svg?react';
|
|
import HelpOutlineIcon from './svg/ic_help_outline.svg?react';
|
|
import FxAmplifierIcon from './svg/fx_amplifier.svg?react';
|
|
import { PerformanceView } from './PerformanceView';
|
|
|
|
import DialogEx from './DialogEx';
|
|
|
|
import { IDialogStackable, popDialogStack, pushDialogStack } from './DialogStack';
|
|
|
|
|
|
|
|
interface AppProps extends WithStyles<typeof appStyles> {
|
|
};
|
|
|
|
const appStyles = ((theme: Theme) => (
|
|
{
|
|
root: css({ // :root
|
|
colorScheme: (isDarkMode() ? "dark" : "light")
|
|
}),
|
|
menuListItem: css({
|
|
color: "#FE8!important", //theme.palette.text.primary,
|
|
fill: "#FE8!important", //theme.palette.text.primary,
|
|
}),
|
|
menuIcon: css({
|
|
fill: (theme.palette.text.primary + "!important"), //theme.palette.text.primary,
|
|
opacity: 0.6
|
|
}),
|
|
toolBar: css({
|
|
color: "white"
|
|
}),
|
|
listSubheader: css({
|
|
backgroundImage: "linear-gradient(255,255,255,0.15),rgba(255,255,255,0.15)"
|
|
}),
|
|
loadingContent: css({
|
|
display: "block",
|
|
position: "absolute",
|
|
minHeight: "10em",
|
|
left: "0px",
|
|
top: "0px",
|
|
width: "100%",
|
|
height: "100%",
|
|
opacity: "0.95",
|
|
justifyContent: "center",
|
|
textAlign: "center",
|
|
zIndex: 2010
|
|
}),
|
|
errorContent: css({
|
|
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
flexWrap: "nowrap",
|
|
alignItems: "center",
|
|
position: "fixed",
|
|
minHeight: "10em",
|
|
left: "0px",
|
|
top: "0px",
|
|
width: "100%",
|
|
height: "100%",
|
|
color: isDarkMode() ? "#CCC" : "#444",
|
|
zIndex: 2000
|
|
}),
|
|
errorContentMask: css({
|
|
position: "absolute", left: 0, top: 0,
|
|
width: "100%", height: "100%",
|
|
background: isDarkMode() ? "#121212" : "#BBB",
|
|
opacity: 0.95,
|
|
zIndex: 1999
|
|
}),
|
|
errorText: css({
|
|
marginTop: 0,
|
|
padding: 0,
|
|
marginBottom: 12,
|
|
fontWeight: 500,
|
|
fontSize: "13pt",
|
|
maxWidth: 250,
|
|
opacity: 1,
|
|
zIndex: 2010,
|
|
}),
|
|
progressText: css({
|
|
marginTop: 0,
|
|
fontWeight: 500,
|
|
fontSize: "13pt",
|
|
opacity: 1,
|
|
zIndex: 2010,
|
|
paddingTop: 12,
|
|
gravity: "center",
|
|
textAlign: "center"
|
|
}),
|
|
|
|
errorMessageBox: css({
|
|
flex: "0 0 auto",
|
|
width: 300,
|
|
marginLeft: "auto",
|
|
marginRight: "auto",
|
|
zIndex: 2010
|
|
|
|
|
|
}),
|
|
errorMessage: css({
|
|
color: theme.palette.text.secondary,
|
|
textAlign: "start",
|
|
zIndex: 2010
|
|
|
|
}),
|
|
loadingBox: css({
|
|
display: "flex",
|
|
flexFlow: "column nowrap",
|
|
position: "absolute",
|
|
top: "20%",
|
|
left: 0, right: 0,
|
|
color: isDarkMode() ? theme.palette.text.secondary : "#888",
|
|
// border: "3px solid #888",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
opacity: 0.8,
|
|
|
|
}),
|
|
loadingBoxItem: css({
|
|
display: "flex", flexFlow: "row nowrap",
|
|
alignItems: "center",
|
|
textAlign: "center",
|
|
|
|
}),
|
|
|
|
|
|
toolBarContent:
|
|
css({
|
|
position: "absolute", top: 0, width: "100%"
|
|
}),
|
|
|
|
toolBarSpacer:
|
|
css({
|
|
position: "relative", flex: "0 0 auto",
|
|
}),
|
|
|
|
|
|
mainFrame: css({
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
flexFlow: "column",
|
|
flex: "1 1 100%"
|
|
}),
|
|
|
|
toolbarSizingPosition: css({
|
|
flexGrow: 0,
|
|
flexShrink: 1,
|
|
width: "100%",
|
|
flexBasis: "auto"
|
|
}),
|
|
mainSizingPosition: css({
|
|
overflow: "hidden",
|
|
flex: "1 1 auto"
|
|
}),
|
|
|
|
heroContent: css({
|
|
backgroundColor: theme.mainBackground,
|
|
position: "relative",
|
|
height: "100%",
|
|
width: "100%"
|
|
}),
|
|
|
|
drawerItem: css({
|
|
width: 350,
|
|
}),
|
|
drawerItemFullWidth: css({
|
|
width: 'auto',
|
|
}),
|
|
|
|
}
|
|
));
|
|
|
|
|
|
|
|
|
|
function supportsFullScreen(): boolean {
|
|
let doc: any = window.document;
|
|
let docEl: any = doc.documentElement;
|
|
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullscreen || docEl.msRequestFullScreen;
|
|
return (!!requestFullScreen);
|
|
|
|
}
|
|
|
|
function setFullScreen(value: boolean) {
|
|
let doc: any = window.document;
|
|
let docEl: any = doc.documentElement;
|
|
|
|
if (docEl.requestFullscreen) // the latest offical api.
|
|
{
|
|
if (value) {
|
|
window.document.documentElement.requestFullscreen({ navigationUI: "hide" })
|
|
.then(() => { })
|
|
.catch((err) => {
|
|
alert(
|
|
`Unable to switch into fullscreen mode: ${err.message} (${err.name})`,
|
|
);
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullscreen || docEl.msRequestFullScreen;
|
|
var cancelFullScreen = docEl.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
|
|
|
|
if (value) {
|
|
requestFullScreen.call(docEl);
|
|
}
|
|
else {
|
|
cancelFullScreen.call(doc);
|
|
}
|
|
}
|
|
|
|
|
|
// function preventDefault(e: SyntheticEvent): void {
|
|
// e.stopPropagation();
|
|
// e.preventDefault();
|
|
// }
|
|
|
|
type AppState = {
|
|
zoomedControlInfo: ZoomedControlInfo | undefined;
|
|
|
|
isDrawerOpen: boolean;
|
|
errorMessage: string;
|
|
displayState: State;
|
|
|
|
performanceView: boolean;
|
|
|
|
canFullScreen: boolean;
|
|
isFullScreen: boolean;
|
|
tinyToolBar: boolean;
|
|
alertDialogOpen: boolean;
|
|
alertDialogMessage: string;
|
|
updateDialogOpen: boolean;
|
|
isSettingsDialogOpen: boolean;
|
|
onboarding: boolean;
|
|
isDebug: boolean;
|
|
|
|
renameBankDialogOpen: boolean;
|
|
saveBankAsDialogOpen: boolean;
|
|
|
|
aboutDialogOpen: boolean;
|
|
bankDialogOpen: boolean;
|
|
editBankDialogOpen: boolean;
|
|
zoomedControlOpen: boolean;
|
|
|
|
|
|
presetName: string;
|
|
presetChanged: boolean;
|
|
banks: BankIndex;
|
|
bankDisplayItems: number;
|
|
showStatusMonitor: boolean;
|
|
};
|
|
class MenuStackHandler implements IDialogStackable {
|
|
constructor(app: AppThemedBase) {
|
|
this.app = app;
|
|
}
|
|
getTag() {
|
|
return "Menu";
|
|
}
|
|
isOpen(): boolean {
|
|
return this.app.state.isDrawerOpen;
|
|
}
|
|
onDialogStackClose() {
|
|
this.app.menuStackHandler = null;
|
|
this.app.hideDrawer();
|
|
}
|
|
private app: AppThemedBase;
|
|
};
|
|
|
|
|
|
|
|
export
|
|
class AppThemedBase extends ResizeResponsiveComponent<AppProps, AppState> {
|
|
// Before the component mounts, we initialise our state
|
|
|
|
model_: PiPedalModel;
|
|
errorChangeHandler_: OnChangedHandler<string>;
|
|
stateChangeHandler_: OnChangedHandler<State>;
|
|
|
|
constructor(props: AppProps) {
|
|
super(props);
|
|
this.model_ = PiPedalModelFactory.getInstance();
|
|
|
|
|
|
this.state = {
|
|
performanceView: false,
|
|
zoomedControlInfo: this.model_.zoomedUiControl.get(),
|
|
isDrawerOpen: false,
|
|
errorMessage: this.model_.errorMessage.get(),
|
|
displayState: this.model_.state.get(),
|
|
canFullScreen: supportsFullScreen() && !this.model_.isAndroidHosted(),
|
|
isFullScreen: !!document.fullscreenElement,
|
|
tinyToolBar: false,
|
|
alertDialogOpen: false,
|
|
alertDialogMessage: "",
|
|
presetName: this.model_.presets.get().getSelectedText(),
|
|
isSettingsDialogOpen: false,
|
|
updateDialogOpen: false,
|
|
onboarding: false,
|
|
isDebug: true,
|
|
presetChanged: this.model_.presets.get().presetChanged,
|
|
banks: this.model_.banks.get(),
|
|
renameBankDialogOpen: false,
|
|
saveBankAsDialogOpen: false,
|
|
aboutDialogOpen: false,
|
|
bankDialogOpen: false,
|
|
editBankDialogOpen: false,
|
|
zoomedControlOpen: false,
|
|
bankDisplayItems: 5,
|
|
showStatusMonitor: this.model_.showStatusMonitor.get()
|
|
|
|
};
|
|
|
|
this.promptForUpdateHandler = this.promptForUpdateHandler.bind(this);
|
|
this.errorChangeHandler_ = this.setErrorMessage.bind(this);
|
|
this.beforeUnloadListener = this.beforeUnloadListener.bind(this);
|
|
this.unloadListener = this.unloadListener.bind(this);
|
|
this.stateChangeHandler_ = this.setDisplayState.bind(this);
|
|
this.presetChangedHandler = this.presetChangedHandler.bind(this);
|
|
this.alertMessageChangedHandler = this.alertMessageChangedHandler.bind(this);
|
|
this.handleCloseAlert = this.handleCloseAlert.bind(this);
|
|
this.banksChangedHandler = this.banksChangedHandler.bind(this);
|
|
this.showStatusMonitorHandler = this.showStatusMonitorHandler.bind(this);
|
|
this.handleZoomedUiControlChanged = this.handleZoomedUiControlChanged.bind(this);
|
|
}
|
|
|
|
showDrawer() {
|
|
if (!this.state.isDrawerOpen) {
|
|
this.setState({ isDrawerOpen: true })
|
|
this.pushOpenMenuState();
|
|
}
|
|
}
|
|
hideDrawer(loadingDialog: boolean = false) {
|
|
window.setTimeout(() => {
|
|
this.popOpenMenuState();
|
|
this.setState({ isDrawerOpen: false })
|
|
});
|
|
}
|
|
|
|
|
|
menuStackHandler: MenuStackHandler | null = null;
|
|
|
|
popOpenMenuState() {
|
|
if (this.menuStackHandler) {
|
|
let t = this.menuStackHandler;
|
|
this.menuStackHandler = null;
|
|
popDialogStack(t);
|
|
}
|
|
|
|
}
|
|
pushOpenMenuState() {
|
|
this.menuStackHandler = new MenuStackHandler(this);
|
|
pushDialogStack(this.menuStackHandler);
|
|
}
|
|
|
|
handleSpecificBank(bankId: number) {
|
|
|
|
this.model_.openBank(bankId)
|
|
.catch((error) => this.model_.showAlert(error.toString()));
|
|
|
|
}
|
|
|
|
handleSaveBankAsOk(newName: string) {
|
|
let currentName = this.model_.banks.get().getSelectedEntryName();
|
|
if (currentName === newName) {
|
|
this.setState({
|
|
renameBankDialogOpen: false,
|
|
saveBankAsDialogOpen: false
|
|
});
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.model_.banks.get().nameExists(newName)) {
|
|
this.model_.showAlert("A bank by that name already exists.");
|
|
return;
|
|
}
|
|
this.setState({
|
|
renameBankDialogOpen: false,
|
|
saveBankAsDialogOpen: false
|
|
});
|
|
this.model_.saveBankAs(this.model_.banks.get().selectedBank, newName)
|
|
.catch((error) => {
|
|
this.model_.showAlert(error.toString());
|
|
});
|
|
|
|
}
|
|
handleBankRenameOk(newName: string) {
|
|
let currentName = this.model_.banks.get().getSelectedEntryName();
|
|
if (currentName === newName) {
|
|
this.setState({
|
|
renameBankDialogOpen: false,
|
|
saveBankAsDialogOpen: false
|
|
});
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.model_.banks.get().nameExists(newName)) {
|
|
this.model_.showAlert("A bank by that name already exists.");
|
|
return;
|
|
}
|
|
this.setState({
|
|
renameBankDialogOpen: false
|
|
});
|
|
this.model_.renameBank(this.model_.banks.get().selectedBank, newName)
|
|
.catch((error) => {
|
|
this.model_.showAlert(error.toString());
|
|
});
|
|
|
|
}
|
|
handleSettingsDialogClose() {
|
|
this.setState({
|
|
isSettingsDialogOpen: false,
|
|
onboarding: false
|
|
});
|
|
}
|
|
handleDrawerSettingsClick() {
|
|
this.setState({
|
|
isDrawerOpen: false,
|
|
isSettingsDialogOpen: true,
|
|
onboarding: false
|
|
});
|
|
|
|
}
|
|
|
|
handleDisplayOnboarding() {
|
|
this.setState({
|
|
isDrawerOpen: false,
|
|
isSettingsDialogOpen: true,
|
|
onboarding: true
|
|
});
|
|
|
|
}
|
|
|
|
handleDrawerManageBanks() {
|
|
this.setState({
|
|
isDrawerOpen: false,
|
|
bankDialogOpen: true,
|
|
editBankDialogOpen: true
|
|
});
|
|
|
|
}
|
|
handleDrawerSelectBank() {
|
|
|
|
this.setState({
|
|
bankDialogOpen: true,
|
|
editBankDialogOpen: false
|
|
});
|
|
|
|
}
|
|
handleDrawerDonationClick() {
|
|
this.hideDrawer(false);
|
|
if (this.model_.isAndroidHosted()) {
|
|
this.model_.showAndroidDonationActivity();
|
|
} else {
|
|
if (window) {
|
|
window.open("https://github.com/sponsors/rerdavies", '_blank');
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
handleDrawerAboutClick() {
|
|
this.setState({
|
|
aboutDialogOpen: true
|
|
});
|
|
|
|
}
|
|
handleDrawerRenameBank() {
|
|
this.setState({
|
|
renameBankDialogOpen: true,
|
|
saveBankAsDialogOpen: false
|
|
});
|
|
|
|
}
|
|
handleDrawerSaveBankAs() {
|
|
this.setState({
|
|
renameBankDialogOpen: false,
|
|
saveBankAsDialogOpen: true
|
|
});
|
|
}
|
|
|
|
|
|
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()
|
|
});
|
|
}
|
|
presetChangedHandler() {
|
|
let presets = this.model_.presets.get();
|
|
|
|
this.setState({
|
|
presetName: presets.getSelectedText(),
|
|
presetChanged: presets.presetChanged
|
|
});
|
|
}
|
|
toggleFullScreen(): void {
|
|
setFullScreen(!this.state.isFullScreen);
|
|
this.setState({ isFullScreen: !this.state.isFullScreen });
|
|
}
|
|
|
|
private unloadListener(e: Event) {
|
|
this.model_.close();
|
|
return undefined;
|
|
}
|
|
|
|
private beforeUnloadListener(e: Event) {
|
|
this.model_.close();
|
|
return undefined;
|
|
}
|
|
promptForUpdateHandler(newValue: boolean) {
|
|
if (this.model_.enableAutoUpdate) {
|
|
if (this.state.updateDialogOpen !== newValue) {
|
|
this.setState({ updateDialogOpen: newValue });
|
|
}
|
|
}
|
|
}
|
|
componentDidMount() {
|
|
|
|
super.componentDidMount();
|
|
window.addEventListener("beforeunload", this.beforeUnloadListener);
|
|
window.addEventListener("unload", this.unloadListener);
|
|
|
|
this.model_.errorMessage.addOnChangedHandler(this.errorChangeHandler_);
|
|
this.model_.state.addOnChangedHandler(this.stateChangeHandler_);
|
|
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.model_.promptForUpdate.addOnChangedHandler(this.promptForUpdateHandler);
|
|
this.alertMessageChangedHandler();
|
|
|
|
this.model_.zoomedUiControl.addOnChangedHandler(
|
|
this.handleZoomedUiControlChanged
|
|
);
|
|
}
|
|
handleZoomedUiControlChanged() {
|
|
this.setState({
|
|
zoomedControlOpen: this.model_.zoomedUiControl.get() !== undefined,
|
|
zoomedControlInfo: this.model_.zoomedUiControl.get()
|
|
});
|
|
|
|
}
|
|
|
|
updateOverscroll(): void {
|
|
if (this.model_.serverVersion) {
|
|
// no pull-down refresh on android devices once we're ready (unless we're debug)
|
|
let preventOverscroll =
|
|
this.model_.state.get() === State.Ready
|
|
&& !this.model_.debug;
|
|
|
|
let overscrollBehavior = preventOverscroll ? "none" : "auto";
|
|
document.body.style.overscrollBehavior = overscrollBehavior;
|
|
}
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
super.componentWillUnmount();
|
|
|
|
this.model_.zoomedUiControl.removeOnChangedHandler(
|
|
this.handleZoomedUiControlChanged
|
|
);
|
|
|
|
window.removeEventListener("beforeunload", this.beforeUnloadListener);
|
|
|
|
this.model_.promptForUpdate.removeOnChangedHandler(this.promptForUpdateHandler);
|
|
this.model_.errorMessage.removeOnChangedHandler(this.errorChangeHandler_);
|
|
this.model_.state.removeOnChangedHandler(this.stateChangeHandler_);
|
|
this.model_.pedalboard.removeOnChangedHandler(this.presetChangedHandler);
|
|
this.model_.banks.removeOnChangedHandler(this.banksChangedHandler);
|
|
this.model_.banks.removeOnChangedHandler(this.showStatusMonitorHandler);
|
|
|
|
this.model_.close();
|
|
|
|
}
|
|
|
|
alertMessageChangedHandler() {
|
|
let message = this.model_.alertMessage.get();
|
|
if (message === "") {
|
|
this.setState({ alertDialogOpen: false });
|
|
// leave the message intact so the dialog can fade.
|
|
} else {
|
|
this.setState({
|
|
alertDialogOpen: true,
|
|
alertDialogMessage: message
|
|
});
|
|
}
|
|
|
|
}
|
|
updateResponsive() {
|
|
// functional, but disabled.
|
|
// let tinyToolBar_ = this.windowSize.height < 600;
|
|
// this.setState({ tinyToolBar: tinyToolBar_ });
|
|
|
|
let height = this.windowSize.height;
|
|
|
|
const ENTRY_HEIGHT = 48;
|
|
// ENTRY_HEIGHT*6 +K = 727 from observation.
|
|
const K = 450;
|
|
|
|
let bankEntries = Math.floor((height - K) / ENTRY_HEIGHT);
|
|
if (bankEntries < 1) bankEntries = 1;
|
|
if (bankEntries > 7) bankEntries = 7;
|
|
if (bankEntries === 2) bankEntries = 1;
|
|
|
|
this.setState({ bankDisplayItems: bankEntries });
|
|
|
|
}
|
|
onWindowSizeChanged(width: number, height: number): void {
|
|
super.onWindowSizeChanged(width, height);
|
|
this.updateResponsive();
|
|
}
|
|
|
|
|
|
setErrorMessage(message: string): void {
|
|
this.setState({ errorMessage: message });
|
|
}
|
|
|
|
|
|
setDisplayState(newState: State): void {
|
|
this.updateOverscroll();
|
|
|
|
this.setState({
|
|
displayState: newState,
|
|
canFullScreen: supportsFullScreen() && !this.model_.isAndroidHosted()
|
|
});
|
|
if (newState === State.Ready) {
|
|
if (this.model_.isOnboarding()) {
|
|
this.handleDisplayOnboarding();
|
|
}
|
|
}
|
|
}
|
|
|
|
shortBankList(banks: BankIndex): BankIndexEntry[] {
|
|
let nDisplayEntries = this.state.bankDisplayItems;
|
|
let entries = banks.entries;
|
|
let nListEntries = entries.length;
|
|
|
|
let result: BankIndexEntry[] = [];
|
|
|
|
if (nListEntries <= nDisplayEntries) {
|
|
for (let i = 0; i < nListEntries; ++i) {
|
|
result.push(entries[i]);
|
|
}
|
|
} else {
|
|
// a subset of the list CENTERED on the currently selected entry.
|
|
let selectedIndex = 0;
|
|
for (let i = 0; i < nListEntries; ++i) {
|
|
if (entries[i].instanceId === banks.selectedBank) {
|
|
selectedIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
let minN = selectedIndex - Math.floor(nDisplayEntries / 2);
|
|
if (minN < 0) minN = 0;
|
|
let maxN = minN + nDisplayEntries;
|
|
if (maxN > entries.length) {
|
|
maxN = entries.length;
|
|
}
|
|
for (let i = minN; i < maxN; ++i) {
|
|
result.push(entries[i]);
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
handleReload() {
|
|
if (this.model_.isAndroidHosted()) {
|
|
this.model_.chooseNewDevice();
|
|
} else {
|
|
window.location.reload();
|
|
}
|
|
}
|
|
getReloadingMessage(): string {
|
|
switch (this.state.displayState) {
|
|
case State.ApplyingChanges:
|
|
return "Applying\u00A0changes...";
|
|
case State.ReloadingPlugins:
|
|
return "Reloading\u00A0plugins...";
|
|
case State.DownloadingUpdate:
|
|
return "Downloading update...";
|
|
case State.InstallingUpdate:
|
|
return "Installing update....";
|
|
case State.HotspotChanging:
|
|
return "Network connection changing..."
|
|
default:
|
|
return "Reconnecting...";
|
|
}
|
|
}
|
|
render() {
|
|
|
|
const classes = withStyles.getClasses(this.props);
|
|
|
|
let shortBankList = this.shortBankList(this.state.banks);
|
|
let showBankSelectDialog = shortBankList.length !== this.state.banks.entries.length;
|
|
|
|
|
|
return (
|
|
<div style={{
|
|
colorScheme: isDarkMode() ? "dark" : "light", // affects scrollbar color
|
|
minHeight: 300, minWidth: 300,
|
|
position: "absolute", left: 0, top: 0, right: 0, bottom: 0,
|
|
overscrollBehavior: this.state.isDebug ? "auto" : "none"
|
|
}}
|
|
onContextMenu={(e) => {
|
|
if (!this.model_.debug) {
|
|
e.preventDefault(); e.stopPropagation();
|
|
} else {
|
|
if ((e.target as any).tagName === "IMG") {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{this.state.performanceView ? (
|
|
<PerformanceView open={this.state.performanceView}
|
|
onClose={() => { this.setState({ performanceView: false }); }}
|
|
/>
|
|
) : (
|
|
<div style={{
|
|
position: "absolute", width: "100%", height: "100%", userSelect: "none",
|
|
display: "flex", flexDirection: "column", flexWrap: "nowrap"
|
|
}}
|
|
>
|
|
|
|
|
|
{(!this.state.tinyToolBar) && !this.state.performanceView ?
|
|
(
|
|
<AppBar position="absolute" >
|
|
<Toolbar variant="dense" className={classes.toolBar} >
|
|
<IconButtonEx tooltip="Menu"
|
|
edge="start"
|
|
aria-label="menu"
|
|
color="inherit"
|
|
onClick={() => { this.showDrawer() }}
|
|
size="large">
|
|
<MenuButton style={{ opacity: 0.75 }} />
|
|
</IconButtonEx>
|
|
<div style={{ flex: "0 1 400px", minWidth: 100 }}>
|
|
<PresetSelector />
|
|
</div>
|
|
<div style={{ flex: "2 2 30px" }} />
|
|
{this.state.canFullScreen &&
|
|
<IconButtonEx
|
|
aria-label="maximise/minimise"
|
|
tooltip={this.state.isFullScreen ? "Exit full screen" : "Full screen"}
|
|
style={{ marginRight: 8, marginLeft: 8 }}
|
|
onClick={() => { this.toggleFullScreen(); }}
|
|
color="inherit"
|
|
size="large">
|
|
{this.state.isFullScreen ? (
|
|
<FullscreenExitIcon style={{ opacity: 0.75 }} />
|
|
) : (
|
|
<FullscreenIcon style={{ opacity: 0.75 }} />
|
|
|
|
)}
|
|
|
|
</IconButtonEx>
|
|
}
|
|
</Toolbar>
|
|
</AppBar>
|
|
) : (
|
|
<div className={classes.toolBarContent} >
|
|
<IconButtonEx
|
|
tooltip="Menu"
|
|
style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
|
|
aria-label="menu"
|
|
onClick={() => { this.showDrawer() }}
|
|
color="inherit"
|
|
size="large">
|
|
<MenuButton />
|
|
</IconButtonEx>
|
|
{this.state.canFullScreen && (
|
|
<IconButtonEx
|
|
tooltip={this.state.isFullScreen ? "Exit full screen" : "Full screen"}
|
|
style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
|
|
aria-label="menu"
|
|
color="inherit"
|
|
onClick={() => { this.toggleFullScreen(); }}
|
|
size="large">
|
|
{this.state.isFullScreen ? (
|
|
<FullscreenExitIcon />
|
|
) : (
|
|
<FullscreenIcon />
|
|
|
|
)}
|
|
|
|
</IconButtonEx>
|
|
)}
|
|
</div>
|
|
)}
|
|
<TemporaryDrawer position='left' title="PiPedal"
|
|
is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(false); }} >
|
|
|
|
<List>
|
|
<ListItemButton key='PerformanceView'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.setState({ performanceView: true });
|
|
}}>
|
|
<ListItemIcon >
|
|
<FxAmplifierIcon color='inherit' className={classes.menuIcon} style={{ width: 24, height: 24 }} />
|
|
</ListItemIcon>
|
|
<ListItemText primary='Performance View' />
|
|
</ListItemButton>
|
|
</List>
|
|
<Divider />
|
|
<ListSubheader className="listSubheader" component="div" id="xnested-list-subheader" style={{ lineHeight: "24px", height: 24, background: "rgba(12,12,12,0.0)" }}
|
|
disableSticky={true}
|
|
>
|
|
<Typography variant="caption" style={{}}>Banks</Typography></ListSubheader>
|
|
|
|
<List >
|
|
{
|
|
shortBankList.map((bank) => {
|
|
return (
|
|
<ListItemButton key={'bank' + bank.instanceId} selected={bank.instanceId === this.state.banks.selectedBank}
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(false);
|
|
this.handleSpecificBank(bank.instanceId);
|
|
}}
|
|
>
|
|
|
|
<ListItemText primary={bank.name} />
|
|
</ListItemButton>
|
|
|
|
);
|
|
})
|
|
}
|
|
{
|
|
showBankSelectDialog && (
|
|
<ListItemButton key={'bankDOTDOTDOT'} selected={false}
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.handleDrawerSelectBank();
|
|
}}
|
|
>
|
|
|
|
<ListItemText primary={"..."} />
|
|
</ListItemButton>
|
|
|
|
|
|
)
|
|
}
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
<ListItemButton key='RenameBank'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.handleDrawerRenameBank()
|
|
}}>
|
|
<ListItemIcon >
|
|
<RenameOutlineIcon color='inherit' className={classes.menuIcon} />
|
|
</ListItemIcon>
|
|
<ListItemText primary='Rename bank' />
|
|
</ListItemButton>
|
|
<ListItemButton key='SaveBank'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.handleDrawerSaveBankAs();
|
|
}} >
|
|
<ListItemIcon>
|
|
<SaveBankAsIcon color="inherit" className={classes.menuIcon} />
|
|
</ListItemIcon>
|
|
<ListItemText primary='Save as new bank' />
|
|
</ListItemButton>
|
|
<ListItemButton key='EditBanks'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.handleDrawerManageBanks();
|
|
}}>
|
|
<ListItemIcon>
|
|
<EditBanksIcon color="inherit" className={classes.menuIcon} />
|
|
</ListItemIcon>
|
|
<ListItemText primary='Manage banks...' />
|
|
</ListItemButton>
|
|
</List>
|
|
<Divider />
|
|
<List>
|
|
<ListItemButton key='Settings'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.handleDrawerSettingsClick()
|
|
}}>
|
|
<ListItemIcon>
|
|
<SettingsIcon color="inherit" className={classes.menuIcon} />
|
|
</ListItemIcon>
|
|
<ListItemText primary='Settings' />
|
|
</ListItemButton>
|
|
<ListItemButton key='About'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.hideDrawer(true);
|
|
this.handleDrawerAboutClick();
|
|
}}>
|
|
<ListItemIcon>
|
|
<HelpOutlineIcon color="inherit" className={classes.menuIcon} />
|
|
</ListItemIcon>
|
|
<ListItemText primary='About' />
|
|
</ListItemButton>
|
|
<ListItemButton key='Donations'
|
|
onClick={(ev: any) => {
|
|
ev.stopPropagation();
|
|
this.handleDrawerDonationClick();
|
|
}}>
|
|
<ListItemIcon >
|
|
<VolunteerActivismIcon className={classes.menuIcon} color="inherit" />
|
|
</ListItemIcon>
|
|
<ListItemText primary='Donations' />
|
|
</ListItemButton>
|
|
</List>
|
|
|
|
</TemporaryDrawer>
|
|
{!this.state.tinyToolBar && (
|
|
<Toolbar className={classes.toolBarSpacer} variant="dense"
|
|
/>
|
|
)}
|
|
<main className={classes.mainFrame} >
|
|
<div className={classes.mainSizingPosition}>
|
|
<div className={classes.heroContent}>
|
|
{(this.state.displayState !== State.Loading) &&
|
|
(
|
|
<MainPage hasTinyToolBar={this.state.tinyToolBar} enableStructureEditing={true} />
|
|
)
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
<BankDialog show={this.state.bankDialogOpen} isEditDialog={this.state.editBankDialogOpen} onDialogClose={() => this.setState({ bankDialogOpen: false })} />
|
|
{(this.state.aboutDialogOpen) &&
|
|
(
|
|
<AboutDialog open={this.state.aboutDialogOpen} onClose={() => this.setState({ aboutDialogOpen: false })} />
|
|
)}
|
|
<SettingsDialog
|
|
open={this.state.isSettingsDialogOpen}
|
|
onboarding={this.state.onboarding}
|
|
onClose={() => this.handleSettingsDialogClose()} />
|
|
<RenameDialog
|
|
open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
|
|
defaultName={this.model_.banks.get().getSelectedEntryName()}
|
|
title="Bank Name"
|
|
acceptActionName={this.state.renameBankDialogOpen ? "Rename" : "Save as"}
|
|
onClose={() => {
|
|
this.setState({
|
|
renameBankDialogOpen: false,
|
|
saveBankAsDialogOpen: false
|
|
})
|
|
}}
|
|
onOk={(text: string) => {
|
|
if (this.state.renameBankDialogOpen) {
|
|
this.handleBankRenameOk(text);
|
|
} else if (this.state.saveBankAsDialogOpen) {
|
|
this.handleSaveBankAsOk(text);
|
|
}
|
|
}
|
|
}
|
|
/>
|
|
|
|
<ZoomedUiControl
|
|
dialogOpen={this.state.zoomedControlOpen}
|
|
controlInfo={this.state.zoomedControlInfo}
|
|
onDialogClose={() => { this.setState({ zoomedControlOpen: false }); }}
|
|
onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); }
|
|
}
|
|
/>
|
|
<UpdateDialog open={this.state.updateDialogOpen} />
|
|
{this.state.showStatusMonitor && (<JackStatusView />)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
<DialogEx tag="Alert"
|
|
open={this.state.alertDialogOpen}
|
|
onClose={this.handleCloseAlert}
|
|
onEnterKey={this.handleCloseAlert}
|
|
aria-describedby="alert-dialog-description"
|
|
>
|
|
<DialogContent>
|
|
<DialogContentText id="alert-dialog-description">
|
|
<Typography variant="body2">
|
|
{
|
|
this.state.alertDialogMessage
|
|
}
|
|
</Typography>
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button variant="dialogPrimary" onClick={this.handleCloseAlert} color="primary" autoFocus>
|
|
OK
|
|
</Button>
|
|
</DialogActions>
|
|
</DialogEx>
|
|
|
|
|
|
<Modal open={this.state.displayState === State.Error}
|
|
aria-label="fatal-error"
|
|
aria-describedby="aria-error-text"
|
|
>
|
|
<div style={{
|
|
display: "flex", flexFlow: "column nowrap",
|
|
position: "absolute", top: 0, left: 0, right: 0, bottom: 0
|
|
}}
|
|
>
|
|
<div style={{
|
|
position: "absolute",
|
|
minHeight: "10em",
|
|
left: "0px",
|
|
top: "0px",
|
|
right: "0px",
|
|
bottom: "0px",
|
|
opacity: 0.8,
|
|
background:
|
|
isDarkMode() ? "#222" : "#EEE",
|
|
}} />
|
|
<div style={{ flex: "2 2 3px", height: 20 }} > </div>
|
|
<div className={classes.errorMessageBox} style={{ position: "relative" }} >
|
|
<div style={{ fontSize: "30px", position: "absolute", left: 0, top: 3, color: "#A00" }}>
|
|
<ErrorOutlineIcon color="inherit" fontSize="inherit" style={{ float: "left", marginRight: "12px" }} />
|
|
</div>
|
|
<div style={{ marginLeft: 40, marginTop: 3 }}>
|
|
<p className={classes.errorText} id="aria-error-text">
|
|
Error: {this.state.errorMessage}
|
|
</p>
|
|
</div>
|
|
<div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "start" }}>
|
|
<Button variant='contained' color="primary"
|
|
onClick={() => this.handleReload()} >
|
|
Reload
|
|
</Button>
|
|
|
|
</div>
|
|
</div>
|
|
<div style={{ flex: "5 5 auto", height: 20 }} > </div>
|
|
</div>
|
|
|
|
</Modal >
|
|
{/* Reloading mask */}
|
|
< Modal
|
|
open={wantsReloadingScreen(this.state.displayState) || this.state.displayState === State.Loading}
|
|
aria-label="loading"
|
|
aria-describedby="reloading-modal-description"
|
|
>
|
|
<div style={{ display: "flex", flexFlow: "column nowrap", alignItems: "center" }}>
|
|
<div style={{
|
|
position: "absolute",
|
|
minHeight: "10em",
|
|
left: "0px",
|
|
top: "0px",
|
|
right: "0px",
|
|
bottom: "0px",
|
|
opacity: 0.8,
|
|
background:
|
|
isDarkMode() ? "#222" : "#EEE",
|
|
|
|
}} />
|
|
<div className={classes.loadingBox}>
|
|
<div className={classes.loadingBoxItem}>
|
|
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
|
|
</div>
|
|
<Typography id="reloading-modal-description" display="block" noWrap variant="body2" className={classes.progressText}>
|
|
{
|
|
this.state.displayState === State.Loading ?
|
|
"Loading..."
|
|
: this.getReloadingMessage()
|
|
}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</Modal >
|
|
</div >
|
|
|
|
);
|
|
}
|
|
};
|
|
|
|
|
|
const AppThemed = withStyles(AppThemedBase, appStyles);
|
|
export default AppThemed;
|