diff --git a/react/public/img/fx_error.svg b/react/public/img/fx_error.svg new file mode 100644 index 0000000..37f8f1f --- /dev/null +++ b/react/public/img/fx_error.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/react/public/var/config.json b/react/public/var/config.json index 60e144f..2d62624 100644 --- a/react/public/var/config.json +++ b/react/public/var/config.json @@ -1,7 +1,7 @@ { "socket_server_port": 80, "socket_server_address": "*", - + "debug": true, "max_upload_size": 1048576, "ui_plugins": [ diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx index 9f53ca3..8d1bd41 100644 --- a/react/src/AppThemed.tsx +++ b/react/src/AppThemed.tsx @@ -476,7 +476,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent< // 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_.serverVersion.debug; + && !this.model_.debug; let overscrollBehavior = preventOverscroll ? "none" : "auto"; document.body.style.overscrollBehavior = overscrollBehavior; @@ -589,7 +589,7 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent< overscrollBehavior: this.state.isDebug ? "auto" : "none" }} onContextMenu={(e) => { - if (!this.model_.serverVersion?.debug ?? false) { + if (!this.model_.debug) { e.preventDefault(); e.stopPropagation(); } }} diff --git a/react/src/MainPage.tsx b/react/src/MainPage.tsx index 03042c0..834f411 100644 --- a/react/src/MainPage.tsx +++ b/react/src/MainPage.tsx @@ -30,6 +30,7 @@ import Button from '@mui/material/Button'; import InputIcon from '@mui/icons-material/Input'; import LoadPluginDialog from './LoadPluginDialog'; import Switch from '@mui/material/Switch'; +import Typography from '@mui/material/Typography'; import PedalBoardView from './PedalBoardView'; import { PiPedalStateError } from './PiPedalError'; @@ -314,6 +315,7 @@ export const MainPage = let author = ""; let pluginUri = ""; let presetsUri = ""; + let missing = false; if (pedalBoardItem) { if (pedalBoardItem.isEmpty()) { title = ""; @@ -321,8 +323,9 @@ export const MainPage = title = "Split"; } else { let uiPlugin = this.model.getUiPlugin(pedalBoardItem.uri); - if (uiPlugin == null) { - title = "Missing Plugin"; + if (!uiPlugin) { + missing = true; + title = pedalBoardItem?.pluginName ?? "Missing plugin"; } else { title = uiPlugin.name; author = uiPlugin.author_name; @@ -334,6 +337,23 @@ export const MainPage = } } let classes = this.props.classes; + if (missing) + { + return ( +
+
+ + {title} + +
+
+ ); + + } else { return (
); + } } @@ -370,6 +391,8 @@ export const MainPage = let canDelete = false; let canAdd = false; let instanceId = -1; + let missing = false; + let pluginUri = "#error"; if (pedalBoardItem) { canDelete = pedalBoard.canDeleteItem(pedalBoardItem.instanceId); @@ -379,11 +402,14 @@ export const MainPage = } else if (pedalBoardItem.isSplit()) { canAdd = true; } else { - uiPlugin = this.model.getUiPlugin(pedalBoardItem.uri); + pluginUri = pedalBoardItem.uri; + uiPlugin = this.model.getUiPlugin(pluginUri); canAdd = true; if (uiPlugin) { bypassVisible = true; bypassChecked = pedalBoardItem.isEnabled; + } else { + missing = true; } } } @@ -393,7 +419,7 @@ export const MainPage =
- { - GetControlView(pedalBoardItem) + missing ? ( +
+ Error: Plugin is not installed. + {pluginUri} +
+ + ): + ( + GetControlView(pedalBoardItem) + ) }
diff --git a/react/src/PedalBoardView.tsx b/react/src/PedalBoardView.tsx index 844ea2f..ea43750 100644 --- a/react/src/PedalBoardView.tsx +++ b/react/src/PedalBoardView.tsx @@ -59,6 +59,7 @@ const SVG_STEREO_STROKE_WIDTH = "6"; const EMPTY_ICON_URL = "img/fx_empty.svg"; +const ERROR_ICON_URL = "img/fx_error.svg"; const TERMINAL_ICON_URL = "img/fx_terminal.svg"; @@ -288,8 +289,8 @@ class PedalLayout { } else { // default to empty plugin. this.pluginType = PluginType.UtilityPlugin; - this.name = "#Missing"; - this.iconUrl = EMPTY_ICON_URL; + this.name = pedalItem.pluginName??"#error"; + this.iconUrl = ERROR_ICON_URL; this.inputs = 2; this.outputs = 2; } diff --git a/react/src/PiPedalModel.tsx b/react/src/PiPedalModel.tsx index ead41ae..7462950 100644 --- a/react/src/PiPedalModel.tsx +++ b/react/src/PiPedalModel.tsx @@ -303,6 +303,7 @@ interface ControlChangedBody { export interface PiPedalModel { clientId: number; countryCodes: Object; + debug: boolean; serverVersion?: PiPedalVersion; errorMessage: ObservableProperty; alertMessage: ObservableProperty; @@ -721,6 +722,7 @@ class PiPedalModelImpl implements PiPedalModel { } maxUploadSize: number = 512 * 1024; + debug: boolean = false; requestConfig(): Promise { const myRequest = new Request(this.varRequest('config.json')); @@ -734,6 +736,7 @@ class PiPedalModelImpl implements PiPedalModel { if (data.max_upload_size) { this.maxUploadSize = data.max_upload_size; } + this.debug = !!data.debug; let { socket_server_port, socket_server_address } = data; if ((!socket_server_address) || socket_server_address === "*") { socket_server_address = window.location.hostname;