#119 Refresh available LV2 plugins whenever an LV2 plugin is installed.
This commit is contained in:
Robin Davies
+384
-372
@@ -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 (
|
||||
<div style={{
|
||||
colorScheme: isDarkMode() ? "dark": "light", // affects scrollbar color
|
||||
minHeight: 345, minWidth: 390,
|
||||
position: "absolute", width: "100%", height: "100%", background: "#F88", userSelect: "none",
|
||||
display: "flex", flexDirection: "column", flexWrap: "nowrap",
|
||||
overscrollBehavior: this.state.isDebug ? "auto" : "none"
|
||||
}}
|
||||
onContextMenu={(e) => {
|
||||
if (!this.model_.debug) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
}
|
||||
return (
|
||||
<div style={{
|
||||
colorScheme: isDarkMode() ? "dark" : "light", // affects scrollbar color
|
||||
minHeight: 345, minWidth: 390,
|
||||
position: "absolute", width: "100%", height: "100%", background: "#F88", userSelect: "none",
|
||||
display: "flex", flexDirection: "column", flexWrap: "nowrap",
|
||||
overscrollBehavior: this.state.isDebug ? "auto" : "none"
|
||||
}}
|
||||
>
|
||||
<CssBaseline />
|
||||
{(!this.state.tinyToolBar) ?
|
||||
(
|
||||
<AppBar position="absolute" >
|
||||
<Toolbar variant="dense" className={classes.toolBar} >
|
||||
<IconButton
|
||||
edge="start"
|
||||
aria-label="menu"
|
||||
color="inherit"
|
||||
onClick={() => { this.showDrawer() }}
|
||||
size="large">
|
||||
<MenuButton style={{opacity: 0.75}} />
|
||||
</IconButton>
|
||||
<div style={{ flex: "0 1 400px", minWidth: 100 }}>
|
||||
<PresetSelector />
|
||||
</div>
|
||||
<div style={{ flex: "2 2 30px" }} />
|
||||
{this.state.canFullScreen &&
|
||||
onContextMenu={(e) => {
|
||||
if (!this.model_.debug) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CssBaseline />
|
||||
{(!this.state.tinyToolBar) ?
|
||||
(
|
||||
<AppBar position="absolute" >
|
||||
<Toolbar variant="dense" className={classes.toolBar} >
|
||||
<IconButton
|
||||
edge="start"
|
||||
aria-label="menu"
|
||||
onClick={() => { this.toggleFullScreen(); }}
|
||||
color="inherit"
|
||||
onClick={() => { this.showDrawer() }}
|
||||
size="large">
|
||||
<MenuButton style={{ opacity: 0.75 }} />
|
||||
</IconButton>
|
||||
<div style={{ flex: "0 1 400px", minWidth: 100 }}>
|
||||
<PresetSelector />
|
||||
</div>
|
||||
<div style={{ flex: "2 2 30px" }} />
|
||||
{this.state.canFullScreen &&
|
||||
<IconButton
|
||||
aria-label="menu"
|
||||
onClick={() => { this.toggleFullScreen(); }}
|
||||
color="inherit"
|
||||
size="large">
|
||||
{this.state.isFullScreen ? (
|
||||
<FullscreenExitIcon style={{ opacity: 0.75 }} />
|
||||
) : (
|
||||
<FullscreenIcon style={{ opacity: 0.75 }} />
|
||||
|
||||
)}
|
||||
|
||||
</IconButton>
|
||||
}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
) : (
|
||||
<div className={classes.toolBarContent} >
|
||||
<IconButton
|
||||
style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
|
||||
aria-label="menu"
|
||||
onClick={() => { this.showDrawer() }}
|
||||
color="inherit"
|
||||
size="large">
|
||||
<MenuButton />
|
||||
</IconButton>
|
||||
{this.state.canFullScreen && (
|
||||
<IconButton
|
||||
style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
|
||||
aria-label="menu"
|
||||
color="inherit"
|
||||
onClick={() => { this.toggleFullScreen(); }}
|
||||
size="large">
|
||||
{this.state.isFullScreen ? (
|
||||
<FullscreenExitIcon style={{opacity: 0.75}} />
|
||||
<FullscreenExitIcon />
|
||||
) : (
|
||||
<FullscreenIcon style={{opacity: 0.75}} />
|
||||
<FullscreenIcon />
|
||||
|
||||
)}
|
||||
|
||||
</IconButton>
|
||||
}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
) : (
|
||||
<div className={classes.toolBarContent} >
|
||||
<IconButton
|
||||
style={{ position: "absolute", left: 12, top: 8, zIndex: 2 }}
|
||||
aria-label="menu"
|
||||
onClick={() => { this.showDrawer() }}
|
||||
color="inherit"
|
||||
size="large">
|
||||
<MenuButton />
|
||||
</IconButton>
|
||||
{this.state.canFullScreen && (
|
||||
<IconButton
|
||||
style={{ position: "absolute", right: 8, top: 8, zIndex: 2 }}
|
||||
aria-label="menu"
|
||||
color="inherit"
|
||||
onClick={() => { this.toggleFullScreen(); }}
|
||||
size="large">
|
||||
{this.state.isFullScreen ? (
|
||||
<FullscreenExitIcon />
|
||||
) : (
|
||||
<FullscreenIcon />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<TemporaryDrawer position='left' title="PiPedal"
|
||||
is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(); }} >
|
||||
<ListSubheader className="listSubheader" component="div" id="xnested-list-subheader" style={{ background: "rgba(12,12,12,0.0)" }}>
|
||||
<Typography variant="caption" style={{ position: "relative", top: 15 }}>Banks</Typography></ListSubheader>
|
||||
|
||||
)}
|
||||
<List >
|
||||
{
|
||||
shortBankList.map((bank) => {
|
||||
return (
|
||||
<ListItem button key={'bank' + bank.instanceId} selected={bank.instanceId === this.state.banks.selectedBank}
|
||||
onClick={() => this.onOpenBank(bank.instanceId)}
|
||||
>
|
||||
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<TemporaryDrawer position='left' title="PiPedal"
|
||||
is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(); }} >
|
||||
<ListSubheader className="listSubheader" component="div" id="xnested-list-subheader" style={{background: "rgba(12,12,12,0.0)"}}>
|
||||
<Typography variant="caption" style={{position: "relative", top: 15}}>Banks</Typography></ListSubheader>
|
||||
<ListItemText primary={bank.name} />
|
||||
</ListItem>
|
||||
|
||||
<List >
|
||||
{
|
||||
shortBankList.map((bank) => {
|
||||
return (
|
||||
<ListItem button key={'bank' + bank.instanceId} selected={bank.instanceId === this.state.banks.selectedBank}
|
||||
onClick={() => this.onOpenBank(bank.instanceId)}
|
||||
);
|
||||
})
|
||||
}
|
||||
{
|
||||
showBankSelectDialog && (
|
||||
<ListItem button key={'bankDOTDOTDOT'} selected={false}
|
||||
onClick={() => this.handleDrawerSelectBank()}
|
||||
>
|
||||
|
||||
<ListItemText primary={bank.name} />
|
||||
<ListItemText primary={"..."} />
|
||||
</ListItem>
|
||||
|
||||
);
|
||||
|
||||
)
|
||||
}
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key='RenameBank' onClick={() => { this.handleDrawerRenameBank() }}>
|
||||
<ListItemIcon >
|
||||
<RenameOutlineIcon color='inherit' className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Rename Bank' />
|
||||
</ListItem>
|
||||
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
|
||||
<ListItemIcon>
|
||||
<SaveBankAsIcon color="inherit" className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Save As New Bank' />
|
||||
</ListItem>
|
||||
<ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
|
||||
<ListItemIcon>
|
||||
<EditBanksIcon color="inherit" className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Manage Banks...' />
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key='Settings' onClick={() => { this.handleDrawerSettingsClick() }}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon color="inherit" className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Settings' />
|
||||
</ListItem>
|
||||
<ListItem button key='About' onClick={() => { this.handleDrawerAboutClick() }}>
|
||||
<ListItemIcon>
|
||||
<HelpOutlineIcon color="inherit" className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='About' />
|
||||
</ListItem>
|
||||
<ListItem button key='Donations' onClick={() => { this.handleDrawerDonationClick() }}>
|
||||
<ListItemIcon >
|
||||
<VolunteerActivismIcon className={classes.menuIcon} color="inherit" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Donations' />
|
||||
</ListItem>
|
||||
</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} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<BankDialog show={this.state.bankDialogOpen} isEditDialog={this.state.editBankDialogOpen} onDialogClose={() => this.setState({ bankDialogOpen: false })} />
|
||||
<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()}
|
||||
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);
|
||||
}
|
||||
}
|
||||
{
|
||||
showBankSelectDialog && (
|
||||
<ListItem button key={'bankDOTDOTDOT'} selected={false}
|
||||
onClick={() => this.handleDrawerSelectBank()}
|
||||
>
|
||||
|
||||
<ListItemText primary={"..."} />
|
||||
</ListItem>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key='RenameBank' onClick={() => { this.handleDrawerRenameBank() }}>
|
||||
<ListItemIcon >
|
||||
<RenameOutlineIcon color='inherit' className={classes.menuIcon} />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Rename Bank' />
|
||||
</ListItem>
|
||||
<ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
|
||||
<ListItemIcon>
|
||||
<SaveBankAsIcon color="inherit" className={classes.menuIcon}/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Save As New Bank' />
|
||||
</ListItem>
|
||||
<ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
|
||||
<ListItemIcon>
|
||||
<EditBanksIcon color="inherit" className={classes.menuIcon}/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Manage Banks...' />
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button key='Settings' onClick={() => { this.handleDrawerSettingsClick() }}>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon color="inherit" className={classes.menuIcon}/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Settings' />
|
||||
</ListItem>
|
||||
<ListItem button key='About' onClick={() => { this.handleDrawerAboutClick() }}>
|
||||
<ListItemIcon>
|
||||
<HelpOutlineIcon color="inherit" className={classes.menuIcon}/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='About' />
|
||||
</ListItem>
|
||||
<ListItem button key='Donations' onClick={() => { this.handleDrawerDonationClick() }}>
|
||||
<ListItemIcon >
|
||||
<VolunteerActivismIcon className={classes.menuIcon} color="inherit" />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Donations' />
|
||||
</ListItem>
|
||||
</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} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<BankDialog show={this.state.bankDialogOpen} isEditDialog={this.state.editBankDialogOpen} onDialogClose={() => this.setState({ bankDialogOpen: false })} />
|
||||
<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()}
|
||||
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); }
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
|
||||
<ZoomedUiControl
|
||||
dialogOpen={this.state.zoomedControlOpen}
|
||||
controlInfo={this.state.zoomedControlInfo}
|
||||
onDialogClose={() => { this.setState({ zoomedControlOpen: false }); }}
|
||||
onDialogClosed={() => { this.model_.zoomedUiControl.set(undefined); }
|
||||
}
|
||||
/>
|
||||
<DialogEx
|
||||
tag="Alert"
|
||||
open={this.state.alertDialogOpen}
|
||||
onClose={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>
|
||||
{this.state.showStatusMonitor && (<JackStatusView />)}
|
||||
|
||||
<div className={classes.errorContent} style={{
|
||||
display: (this.state.displayState === State.Reconnecting || this.state.displayState === State.ApplyingChanges)
|
||||
? "block" : "none"
|
||||
}}
|
||||
>
|
||||
<div className={classes.errorContentMask} />
|
||||
|
||||
<div className={classes.loadingBox}>
|
||||
<div className={classes.loadingBoxItem}>
|
||||
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
|
||||
</div>
|
||||
<Typography noWrap variant="body2" className={classes.progressText}>
|
||||
{this.state.displayState === State.ApplyingChanges ? "Applying\u00A0changes..." : "Reconnecting..."}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Error ? "flex" : "none" }}
|
||||
onMouseDown={preventDefault} onKeyDown={preventDefault}
|
||||
>
|
||||
<div className={classes.errorContentMask} />
|
||||
<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}>
|
||||
Error: {this.state.errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "left" }}>
|
||||
<Button variant='contained' color="primary" component='button'
|
||||
onClick={() => this.handleReload()} >
|
||||
Reload
|
||||
/>
|
||||
<DialogEx
|
||||
tag="Alert"
|
||||
open={this.state.alertDialogOpen}
|
||||
onClose={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>
|
||||
{this.state.showStatusMonitor && (<JackStatusView />)}
|
||||
|
||||
<div className={classes.errorContent} style={{
|
||||
display: (
|
||||
this.state.displayState === State.Reconnecting
|
||||
|| this.state.displayState === State.ApplyingChanges
|
||||
|| this.state.displayState === State.ReloadingPlugins)
|
||||
? "block" : "none"
|
||||
}}
|
||||
>
|
||||
<div className={classes.errorContentMask} />
|
||||
|
||||
<div className={classes.loadingBox}>
|
||||
<div className={classes.loadingBoxItem}>
|
||||
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
|
||||
</div>
|
||||
<Typography noWrap variant="body2" className={classes.progressText}>
|
||||
{this.getReloadingMessage()}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Error ? "flex" : "none" }}
|
||||
onMouseDown={preventDefault} onKeyDown={preventDefault}
|
||||
>
|
||||
<div className={classes.errorContentMask} />
|
||||
<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}>
|
||||
Error: {this.state.errorMessage}
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ paddingTop: 50, paddingLeft: 36, textAlign: "left" }}>
|
||||
<Button variant='contained' color="primary" component='button'
|
||||
onClick={() => this.handleReload()} >
|
||||
Reload
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ flex: "5 5 auto", height: 20 }} > </div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style={{ flex: "5 5 auto", height: 20 }} > </div>
|
||||
|
||||
</div>
|
||||
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Loading ? "block" : "none" }}>
|
||||
<div className={classes.errorContentMask} />
|
||||
<div className={classes.loadingBox}>
|
||||
<div className={classes.loadingBoxItem}>
|
||||
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
|
||||
<div className={classes.errorContent} style={{ display: this.state.displayState === State.Loading ? "block" : "none" }}>
|
||||
<div className={classes.errorContentMask} />
|
||||
<div className={classes.loadingBox}>
|
||||
<div className={classes.loadingBoxItem}>
|
||||
<CircularProgress color="inherit" className={classes.loadingBoxItem} />
|
||||
</div>
|
||||
<Typography noWrap variant="body2" className={classes.loadingBoxItem}>
|
||||
Loading...
|
||||
</Typography>
|
||||
</div>
|
||||
<Typography noWrap variant="body2" className={classes.loadingBoxItem}>
|
||||
Loading...
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@@ -42,6 +42,7 @@ import SearchFilter from './SearchFilter';
|
||||
import { FixedSizeGrid } from 'react-window';
|
||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
import StarBorderIcon from '@mui/icons-material/StarBorder';
|
||||
import StarIcon from '@mui/icons-material/Star';
|
||||
import { createStyles, Theme } from '@mui/material/styles';
|
||||
import { WithStyles, withStyles } from '@mui/styles';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
@@ -172,8 +173,9 @@ type PluginGridState = {
|
||||
grid_cell_width: number,
|
||||
grid_cell_columns: number,
|
||||
minimumItemWidth: number,
|
||||
favoritesList: FavoritesList
|
||||
gridItems: UiPlugin[];
|
||||
favoritesList: FavoritesList,
|
||||
uiPlugins: UiPlugin[]
|
||||
//gridItems: UiPlugin[];
|
||||
|
||||
|
||||
}
|
||||
@@ -207,7 +209,7 @@ export const LoadPluginDialog =
|
||||
grid_cell_columns: this.getCellColumns(window.innerWidth),
|
||||
minimumItemWidth: props.minimumItemWidth ? props.minimumItemWidth : 220,
|
||||
favoritesList: this.model.favorites.get(),
|
||||
gridItems: this.getFilteredPlugins("", filterType_, this.model.favorites.get())
|
||||
uiPlugins: this.model.ui_plugins.get()
|
||||
|
||||
};
|
||||
|
||||
@@ -217,11 +219,12 @@ export const LoadPluginDialog =
|
||||
this.handleSearchStringReady = this.handleSearchStringReady.bind(this);
|
||||
this.handleKeyPress = this.handleKeyPress.bind(this);
|
||||
this.handleFavoritesChanged = this.handleFavoritesChanged.bind(this);
|
||||
this.handlePluginsChanged = this.handlePluginsChanged.bind(this);
|
||||
|
||||
this.requestScrollTo();
|
||||
}
|
||||
|
||||
nominal_column_width: number = 250;
|
||||
nominal_column_width: number = 350;
|
||||
margin_reserve: number = 30;
|
||||
|
||||
getCellColumns(width: number) {
|
||||
@@ -280,23 +283,31 @@ export const LoadPluginDialog =
|
||||
this.setState(
|
||||
{
|
||||
favoritesList: favorites,
|
||||
gridItems: this.getFilteredPlugins(null, null, favorites)
|
||||
});
|
||||
}
|
||||
handlePluginsChanged(plugins: UiPlugin[]) {
|
||||
this.setState(
|
||||
{
|
||||
uiPlugins: plugins
|
||||
}
|
||||
);
|
||||
}
|
||||
componentDidMount() {
|
||||
super.componentDidMount();
|
||||
this.updateWindowSize();
|
||||
window.addEventListener('resize', this.updateWindowSize);
|
||||
|
||||
this.model.favorites.addOnChangedHandler(this.handleFavoritesChanged);
|
||||
let favorites = this.model.favorites.get();
|
||||
this.model.ui_plugins.addOnChangedHandler(this.handlePluginsChanged);
|
||||
|
||||
this.setState({
|
||||
favoritesList: favorites,
|
||||
gridItems: this.getFilteredPlugins(null, null, favorites)
|
||||
favoritesList: this.model.favorites.get(),
|
||||
uiPlugins: this.model.ui_plugins.get()
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.model.ui_plugins.removeOnChangedHandler(this.handlePluginsChanged);
|
||||
this.model.favorites.removeOnChangedHandler(this.handleFavoritesChanged);
|
||||
super.componentWillUnmount();
|
||||
window.removeEventListener('resize', this.updateWindowSize);
|
||||
@@ -310,7 +321,6 @@ export const LoadPluginDialog =
|
||||
this.setState({
|
||||
search_string: "",
|
||||
search_collapsed: true,
|
||||
gridItems: this.getFilteredPlugins("", null, null)
|
||||
});
|
||||
}
|
||||
this.requestScrollTo();
|
||||
@@ -331,7 +341,6 @@ export const LoadPluginDialog =
|
||||
this.requestScrollTo();
|
||||
this.setState({
|
||||
filterType: filterValue,
|
||||
gridItems: this.getFilteredPlugins(null, filterValue, null)
|
||||
});
|
||||
}
|
||||
onClearFilter(): void {
|
||||
@@ -340,8 +349,7 @@ export const LoadPluginDialog =
|
||||
if (this.state.filterType !== value) {
|
||||
this.requestScrollTo();
|
||||
this.setState({
|
||||
filterType: value,
|
||||
gridItems: this.getFilteredPlugins(null, value, null)
|
||||
filterType: value
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -480,7 +488,7 @@ export const LoadPluginDialog =
|
||||
return result;
|
||||
|
||||
}
|
||||
getFilteredPlugins(searchString: string | null, filterType: PluginType | null, favoritesList: FavoritesList | null): UiPlugin[] {
|
||||
getFilteredPlugins(plugins: UiPlugin[], searchString: string | null, filterType: PluginType | null, favoritesList: FavoritesList | null): UiPlugin[] {
|
||||
try {
|
||||
if (searchString === null) {
|
||||
searchString = this.state.search_string;
|
||||
@@ -491,7 +499,6 @@ export const LoadPluginDialog =
|
||||
if (favoritesList === null) {
|
||||
favoritesList = this.state.favoritesList;
|
||||
}
|
||||
let plugins = this.model.ui_plugins.get();
|
||||
|
||||
let results: { score: number; plugin: UiPlugin }[] = [];
|
||||
let searchFilter = new SearchFilter(searchString);
|
||||
@@ -544,12 +551,14 @@ export const LoadPluginDialog =
|
||||
this.scrollToRequested = true;
|
||||
}
|
||||
|
||||
private cachedGridItems: UiPlugin[] = []; // retained for the scrollTo callback.
|
||||
|
||||
handleScrollToCallback(element: FixedSizeGrid): void {
|
||||
if (element) {
|
||||
if (this.scrollToRequested) {
|
||||
this.scrollToRequested = false;
|
||||
let position = -1;
|
||||
let gridItems = this.state.gridItems;
|
||||
let gridItems = this.cachedGridItems;
|
||||
for (let i = 0; i < gridItems.length; ++i) {
|
||||
if (this.state.selected_uri === gridItems[i].uri) {
|
||||
position = i;
|
||||
@@ -568,8 +577,7 @@ export const LoadPluginDialog =
|
||||
if (this.changedSearchString !== undefined) {
|
||||
this.requestScrollTo();
|
||||
this.setState({
|
||||
search_string: this.changedSearchString,
|
||||
gridItems: this.getFilteredPlugins(this.changedSearchString, null, null)
|
||||
search_string: this.changedSearchString
|
||||
});
|
||||
this.changedSearchString = undefined;
|
||||
}
|
||||
@@ -588,9 +596,8 @@ export const LoadPluginDialog =
|
||||
2000);
|
||||
|
||||
}
|
||||
renderItem(row: number, column: number): React.ReactNode {
|
||||
renderItem(gridItems: UiPlugin[], row: number, column: number): React.ReactNode {
|
||||
let item: number = (row) * this.gridColumnCount + (column);
|
||||
let gridItems = this.state.gridItems;
|
||||
if (item >= gridItems.length) {
|
||||
return (<div />);
|
||||
}
|
||||
@@ -621,7 +628,7 @@ export const LoadPluginDialog =
|
||||
{
|
||||
isFavorite && (
|
||||
<div style={{ flex: "0 0 auto" }}>
|
||||
<StarBorderIcon sx={{ color: "#C80", fontSize: 16, marginRight: "2px" }} />
|
||||
<StarIcon sx={{ color: "#C80", fontSize: 16, marginRight: "2px" }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -647,6 +654,7 @@ export const LoadPluginDialog =
|
||||
}
|
||||
gridColumnCount: number = 1;
|
||||
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
|
||||
@@ -701,8 +709,7 @@ export const LoadPluginDialog =
|
||||
this.requestScrollTo();
|
||||
this.setState({
|
||||
search_collapsed: true,
|
||||
search_string: "",
|
||||
gridItems: this.getFilteredPlugins("", null, null)
|
||||
search_string: ""
|
||||
});
|
||||
|
||||
} else {
|
||||
@@ -718,8 +725,7 @@ export const LoadPluginDialog =
|
||||
this.requestScrollTo();
|
||||
this.setState({
|
||||
search_collapsed: true,
|
||||
search_string: "",
|
||||
gridItems: this.getFilteredPlugins("", null, null)
|
||||
search_string: ""
|
||||
});
|
||||
|
||||
} else {
|
||||
@@ -764,7 +770,9 @@ export const LoadPluginDialog =
|
||||
}
|
||||
let width = arg.width ?? 1;
|
||||
let height = arg.height ?? 1;
|
||||
let gridItems = this.state.gridItems;
|
||||
let gridItems = this.getFilteredPlugins(
|
||||
this.state.uiPlugins, this.state.search_string, this.state.filterType, this.state.favoritesList);
|
||||
this.cachedGridItems = gridItems;
|
||||
|
||||
let scrollRef = (grid: FixedSizeGrid) => { this.handleScrollToCallback(grid); }
|
||||
|
||||
@@ -793,7 +801,7 @@ export const LoadPluginDialog =
|
||||
{(arg: { columnIndex: number, rowIndex: number, style: CSSProperties }) => (
|
||||
<div style={arg.style} >
|
||||
{
|
||||
this.renderItem(arg.rowIndex, arg.columnIndex)
|
||||
this.renderItem(gridItems, arg.rowIndex, arg.columnIndex)
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
@@ -837,11 +845,15 @@ export const LoadPluginDialog =
|
||||
color: isFavorite ? "#F80" : "#CCC", display: (this.state.selected_uri ? "block" : "block"),
|
||||
position: "relative"
|
||||
}}>
|
||||
<IconButton color="inherit" aria-label="Set as favorite"
|
||||
onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
|
||||
>
|
||||
<StarBorderIcon />
|
||||
</IconButton>
|
||||
{
|
||||
this.state.selected_uri !== "uri://two-play/pipedal/pedalboard#Empty" && (
|
||||
<IconButton color="inherit" aria-label="Set as favorite"
|
||||
onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
|
||||
>
|
||||
<StarBorderIcon />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.bottom} style={{ height: 64 }}>
|
||||
|
||||
+38
-19
@@ -48,7 +48,14 @@ export enum State {
|
||||
Error,
|
||||
Background,
|
||||
Reconnecting,
|
||||
ApplyingChanges
|
||||
ApplyingChanges,
|
||||
ReloadingPlugins
|
||||
};
|
||||
|
||||
export enum ReconnectReason {
|
||||
Disconnected,
|
||||
LoadingSettings,
|
||||
ReloadingPlugins,
|
||||
};
|
||||
|
||||
export type ControlValueChangedHandler = (key: string, value: number) => void;
|
||||
@@ -356,6 +363,7 @@ export class PiPedalModel //implements PiPedalModel
|
||||
lv2Path: string = "";
|
||||
webSocket?: PiPedalSocket;
|
||||
|
||||
|
||||
ui_plugins: ObservableProperty<UiPlugin[]>
|
||||
= new ObservableProperty<UiPlugin[]>([]);
|
||||
state: ObservableProperty<State> = new ObservableProperty<State>(State.Loading);
|
||||
@@ -426,13 +434,20 @@ export class PiPedalModel //implements PiPedalModel
|
||||
onSocketReconnecting(retry: number, maxRetries: number): void {
|
||||
if (this.visibilityState.get() === VisibilityState.Hidden) return;
|
||||
//if (retry !== 0) {
|
||||
if (this.restartExpected) {
|
||||
this.setState(State.ApplyingChanges);
|
||||
this.restartExpected = false;
|
||||
} else {
|
||||
switch (this.reconnectReason)
|
||||
{
|
||||
case ReconnectReason.Disconnected:
|
||||
default:
|
||||
this.setState(State.Reconnecting);
|
||||
break;
|
||||
case ReconnectReason.LoadingSettings:
|
||||
this.setState(State.ApplyingChanges);
|
||||
break;
|
||||
case ReconnectReason.ReloadingPlugins:
|
||||
this.setState(State.ReloadingPlugins);
|
||||
break;
|
||||
|
||||
}
|
||||
//}
|
||||
}
|
||||
|
||||
|
||||
@@ -602,10 +617,17 @@ export class PiPedalModel //implements PiPedalModel
|
||||
{
|
||||
this.showAlert(body as string);
|
||||
|
||||
} else {
|
||||
throw new PiPedalStateError("Unrecognized message received from server: " + message);
|
||||
}
|
||||
else if (message = "onLv2PluginsChanging")
|
||||
{
|
||||
this.onLv2PluginsChanging();
|
||||
}
|
||||
}
|
||||
onLv2PluginsChanging() : void {
|
||||
this.reconnectReason = ReconnectReason.ReloadingPlugins;
|
||||
// this.webSocket?.reconnect(); // let the server do it for us.
|
||||
|
||||
}
|
||||
setError(message: string): void {
|
||||
this.errorMessage.set(message);
|
||||
this.setState(State.Error);
|
||||
@@ -630,6 +652,11 @@ export class PiPedalModel //implements PiPedalModel
|
||||
}
|
||||
|
||||
|
||||
private reconnectReason: ReconnectReason = ReconnectReason.Disconnected;
|
||||
|
||||
isReloading(): boolean {
|
||||
return this.state.get() !== State.Ready;
|
||||
}
|
||||
|
||||
getWebSocket(): PiPedalSocket {
|
||||
if (this.webSocket === undefined) {
|
||||
@@ -654,7 +681,7 @@ export class PiPedalModel //implements PiPedalModel
|
||||
this.androidHost?.setDisconnected(false);
|
||||
}
|
||||
|
||||
this.restartExpected = false;
|
||||
this.reconnectReason = ReconnectReason.Disconnected;
|
||||
if (this.visibilityState.get() === VisibilityState.Hidden) return;
|
||||
|
||||
// reload state, but not configuration.
|
||||
@@ -1689,15 +1716,9 @@ export class PiPedalModel //implements PiPedalModel
|
||||
this.alertMessage.set(message);
|
||||
}
|
||||
|
||||
restartExpected: boolean = false;
|
||||
|
||||
expectRestart() {
|
||||
this.restartExpected = true;
|
||||
|
||||
|
||||
}
|
||||
setJackSettings(jackSettings: JackChannelSelection): void {
|
||||
this.expectRestart();
|
||||
this.reconnectReason = ReconnectReason.LoadingSettings;
|
||||
this.webSocket?.send("setJackSettings", jackSettings);
|
||||
}
|
||||
|
||||
@@ -2423,7 +2444,7 @@ export class PiPedalModel //implements PiPedalModel
|
||||
resolve();
|
||||
|
||||
});
|
||||
this.restartExpected = true;
|
||||
this.reconnectReason = ReconnectReason.LoadingSettings;
|
||||
this.webSocket?.reconnect(); // close immediately, and wait for recoonnect.
|
||||
return result;
|
||||
}
|
||||
@@ -2619,10 +2640,8 @@ export class PiPedalModel //implements PiPedalModel
|
||||
}
|
||||
}
|
||||
|
||||
reloadRequested: boolean = false;
|
||||
|
||||
reloadPage() {
|
||||
this.reloadRequested = true;
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
let url = window.location.href.split('#')[0];
|
||||
window.location.href = url;
|
||||
|
||||
Reference in New Issue
Block a user