diff --git a/react/public/var/config.json b/react/public/var/config.json index f808ca9..04d3a08 100644 --- a/react/public/var/config.json +++ b/react/public/var/config.json @@ -1,5 +1,5 @@ { - "socket_server_port": 8080, + "socket_server_port": 80, "socket_server_address": "*", "debug": true, "max_upload_size": 536870912, diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx index 19965bc..56829fc 100644 --- a/react/src/AppThemed.tsx +++ b/react/src/AppThemed.tsx @@ -59,19 +59,19 @@ import { BankIndex, BankIndexEntry } from './Banks'; import RenameDialog from './RenameDialog'; import JackStatusView from './JackStatusView'; import { Theme } from '@mui/material/styles'; -import {isDarkMode} from './DarkMode'; +import { isDarkMode } from './DarkMode'; -import {ReactComponent as RenameOutlineIcon} from './svg/drive_file_rename_outline_black_24dp.svg'; -import {ReactComponent as SaveBankAsIcon} from './svg/ic_save_bank_as.svg'; -import {ReactComponent as EditBanksIcon} from './svg/ic_edit_banks.svg'; -import {ReactComponent as SettingsIcon} from './svg/ic_settings.svg'; -import {ReactComponent as HelpOutlineIcon} from './svg/ic_help_outline.svg'; +import { ReactComponent as RenameOutlineIcon } from './svg/drive_file_rename_outline_black_24dp.svg'; +import { ReactComponent as SaveBankAsIcon } from './svg/ic_save_bank_as.svg'; +import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg'; +import { ReactComponent as SettingsIcon } from './svg/ic_settings.svg'; +import { ReactComponent as HelpOutlineIcon } from './svg/ic_help_outline.svg'; import DialogEx from './DialogEx'; const appStyles = (theme: Theme) => createStyles({ "&": { // :root - colorScheme: (isDarkMode()? "dark": "light") + colorScheme: (isDarkMode() ? "dark" : "light") }, menuListItem: { color: "#FE8!important" as any, //theme.palette.text.primary, @@ -95,7 +95,7 @@ const appStyles = (theme: Theme) => createStyles({ top: "0px", width: "100%", height: "100%", - background: isDarkMode() ? "#222": "#DDD", + background: isDarkMode() ? "#222" : "#DDD", opacity: "0.95", justifyContent: "center", textAlign: "center", @@ -114,13 +114,13 @@ const appStyles = (theme: Theme) => createStyles({ top: "0px", width: "100%", height: "100%", - color: isDarkMode() ? "#CCC": "#444", + color: isDarkMode() ? "#CCC" : "#444", zIndex: 2000 }, errorContentMask: { position: "absolute", left: 0, top: 0, width: "100%", height: "100%", - background: isDarkMode()? "#121212": "#BBB", + background: isDarkMode() ? "#121212" : "#BBB", opacity: 0.95, zIndex: 1999 }, @@ -511,7 +511,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent< } private unmountListener(e: Event) { - if ((!this.model_.reloadRequested) && this.model_.state.get() === State.Ready && !this.model_.isAndroidHosted()) { + if (this.model_.state.get() === State.Ready && !this.model_.isAndroidHosted()) { e.preventDefault(); (e as any).returnValue = "Are you sure you want to leave this page?"; return "Are you sure you want to leave this page?"; @@ -521,7 +521,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent< componentDidMount() { super.componentDidMount(); - window.addEventListener("beforeunload",this.unmountListener); + window.addEventListener("beforeunload", this.unmountListener); this.model_.errorMessage.addOnChangedHandler(this.errorChangeHandler_); this.model_.state.addOnChangedHandler(this.stateChangeHandler_); @@ -533,417 +533,429 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent< } -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; + 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; -} + let overscrollBehavior = preventOverscroll ? "none" : "auto"; + document.body.style.overscrollBehavior = overscrollBehavior; + } } -componentDidUpdate() { -} + componentDidUpdate() { + } -componentWillUnmount() { - super.componentWillUnmount(); - window.removeEventListener("beforeunload",this.unmountListener); + componentWillUnmount() { + super.componentWillUnmount(); + window.removeEventListener("beforeunload", this.unmountListener); - 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_.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); -} + } + + 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; + 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(); -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 + displayState: newState, + canFullScreen: supportsFullScreen() && !this.model_.isAndroidHosted() }); - } - -} -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; - 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(); - } -} - } - -showDrawer() { - this.setState({ isDrawerOpen: true }) -} -hideDrawer() { - this.setState({ isDrawerOpen: false }) -} -shortBankList(banks: BankIndex): BankIndexEntry[] { - let n = this.state.bankDisplayItems; - let entries = banks.entries; - if (entries.length < n + 1) { // +1 for the .... entry. - return entries; - } - let result: BankIndexEntry[] = []; - let selectedIndex = -1; - for (let i = 0; i < entries.length; ++i) { - if (entries[i].instanceId === banks.selectedBank) { - selectedIndex = i; - break; + if (newState === State.Ready) { + if (this.model_.isOnboarding()) { + this.handleDisplayOnboarding(); + } } } - if (n > entries.length) n = entries.length; - if (selectedIndex > n) { - for (let i = 0; i < n - 1; ++i) { - result.push(entries[i]); + + showDrawer() { + this.setState({ isDrawerOpen: true }) + } + hideDrawer() { + this.setState({ isDrawerOpen: false }) + } + shortBankList(banks: BankIndex): BankIndexEntry[] { + let n = this.state.bankDisplayItems; + let entries = banks.entries; + if (entries.length < n + 1) { // +1 for the .... entry. + return entries; } - result.push(entries[selectedIndex]); - } else { - for (let i = 0; i < n; ++i) { - result.push(entries[i]); + let result: BankIndexEntry[] = []; + let selectedIndex = -1; + for (let i = 0; i < entries.length; ++i) { + if (entries[i].instanceId === banks.selectedBank) { + selectedIndex = i; + break; + } + } + if (n > entries.length) n = entries.length; + if (selectedIndex > n) { + for (let i = 0; i < n - 1; ++i) { + result.push(entries[i]); + } + result.push(entries[selectedIndex]); + } else { + for (let i = 0; i < n; ++i) { + result.push(entries[i]); + } + } + return result; + } + handleReload() { + if (this.model_.isAndroidHosted()) { + this.model_.chooseNewDevice(); + } else { + window.location.reload(); } } - 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..."; + default: + return "Reconnecting..."; + } } -} -render() { + render() { - const { classes } = this.props; + const { classes } = this.props; - let shortBankList = this.shortBankList(this.state.banks); - let showBankSelectDialog = shortBankList.length !== this.state.banks.entries.length; + let shortBankList = this.shortBankList(this.state.banks); + let showBankSelectDialog = shortBankList.length !== this.state.banks.entries.length; - return ( -
- Error: {this.state.errorMessage} -
-