shawn/op-pedal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Plugin favorites

Browse Source 
Fixes #40
This commit is contained in:
Robin Davies
2022-03-18 22:30:47 -04:00
parent 6359c1a7fa
commit 34b665ded5
12 changed files with 242 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/public/var/config.json
+1 -1
View File
@@ -1,5 +1,5 @@
{
"socket_server_port": 80,
"socket_server_port": 8080,
"socket_server_address": "*",
"debug": true,
"max_upload_size": 1048576,
react/src/LoadPluginDialog.tsx
+59 -11
View File
@@ -19,7 +19,7 @@
import React, { ReactNode, SyntheticEvent, CSSProperties } from 'react';
import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
import { PiPedalModel, PiPedalModelFactory, FavoritesList } from './PiPedalModel';
import { UiPlugin, PluginType } from './Lv2Plugin';
import ButtonBase from '@mui/material/ButtonBase';
import Button from '@mui/material/Button';
@@ -42,10 +42,10 @@ import SearchControl from './SearchControl';
import SearchFilter from './SearchFilter';
import { FixedSizeGrid } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
import Slide, {SlideProps} from '@mui/material/Slide';
import StarBorderIcon from '@mui/icons-material/StarBorder';
import Slide, { SlideProps } from '@mui/material/Slide';
import { createStyles, Theme } from '@mui/material/styles';
import { WithStyles, withStyles} from '@mui/styles';
import { WithStyles, withStyles } from '@mui/styles';
export type CloseEventHandler = () => void;
@@ -119,6 +119,9 @@ const pluginGridStyles = (theme: Theme) => createStyles({
paddingLeft: 16, whiteSpace: "nowrap"
},
favoriteDecoration: {
flex: "0 0 auto"
},
table: {
borderCollapse: "collapse",
},
@@ -167,6 +170,7 @@ type PluginGridState = {
grid_cell_width: number,
grid_cell_columns: number,
minimumItemWidth: number,
favoritesList: FavoritesList
}
@@ -203,7 +207,8 @@ export const LoadPluginDialog =
client_height: window.innerHeight,
grid_cell_width: this.getCellWidth(window.innerWidth),
grid_cell_columns: this.getCellColumns(window.innerWidth),
minimumItemWidth: props.minimumItemWidth ? props.minimumItemWidth : 220
minimumItemWidth: props.minimumItemWidth ? props.minimumItemWidth : 220,
favoritesList: this.model.favorites.get()
};
this.updateWindowSize = this.updateWindowSize.bind(this);
@@ -211,6 +216,7 @@ export const LoadPluginDialog =
this.handleOk = this.handleOk.bind(this);
this.handleSearchStringReady = this.handleSearchStringReady.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.handleFavoritesChanged = this.handleFavoritesChanged.bind(this);
}
nominal_column_width: number = 250;
@@ -264,12 +270,23 @@ export const LoadPluginDialog =
grid_cell_columns: this.getCellColumns(window.innerWidth)
});
}
handleFavoritesChanged() {
this.setState(
{
favoritesList: this.model.favorites.get()
});
}
componentDidMount() {
super.componentDidMount();
this.updateWindowSize();
window.addEventListener('resize', this.updateWindowSize);
this.model.favorites.addOnChangedHandler(this.handleFavoritesChanged);
this.setState({ favoritesList: this.model.favorites.get() });
}
componentWillUnmount() {
this.model.favorites.removeOnChangedHandler(this.handleFavoritesChanged);
super.componentWillUnmount();
window.removeEventListener('resize', this.updateWindowSize);
}
@@ -352,18 +369,17 @@ export const LoadPluginDialog =
let isDoubleClick = e.detail === 2;
// we have to synthesize double clicks because
// DOM rewrites interfere with natural double click.
if (isDoubleClick)
{
if (isDoubleClick) {
this.props.onOk(uri);
}
}
handleMouseEnter(e: SyntheticEvent, uri: string): void {
// this.setHoverUri(uri);
// this.setHoverUri(uri);
}
handleMouseLeave(e: SyntheticEvent, uri: string): void {
// this.setHoverUri("");
// this.setHoverUri("");
}
onInfoClicked(): void {
@@ -421,6 +437,9 @@ export const LoadPluginDialog =
let score = searchFilter.score(plugin.name, plugin.plugin_display_type, plugin.author_name);
if (score !== 0) {
if (this.state.favoritesList[plugin.uri]) {
score += 32768;
}
results.push({ score: score, plugin: plugin });
}
}
@@ -469,6 +488,7 @@ export const LoadPluginDialog =
let value = this.gridItems[item];
let classes = this.props.classes;
let isFavorite: boolean = this.state.favoritesList[value.uri] ?? false;
return (
<div key={value.uri}
onDoubleClick={(e) => { this.onDoubleClick(e, value.uri) }}
@@ -491,12 +511,19 @@ export const LoadPluginDialog =
</Typography>
</div>
<div className={classes.favoriteDecoration}>
<StarBorderIcon sx={{ color: "#C80", opacity: isFavorite ? 1 : 0 }} />
</div>
</div>
</ButtonBase>
</div>
);
}
setFavorite(pluginUri: string | undefined, isFavorite: boolean): void {
if (!pluginUri) return;
this.model.setFavorite(pluginUri, isFavorite);
}
gridItems: UiPlugin[] = [];
gridColumnCount: number = 1;
@@ -516,6 +543,7 @@ export const LoadPluginDialog =
this.gridItems = this.getFilteredPlugins();
let gridColumnCount = this.state.grid_cell_columns;
this.gridColumnCount = gridColumnCount;
let isFavorite = this.state.favoritesList[this.state.selected_uri ?? ""];
return (
<React.Fragment>
<Dialog
@@ -530,7 +558,7 @@ export const LoadPluginDialog =
aria-labelledby="select-plugin-dialog-title">
<div style={{ display: "flex", flexDirection: "column", flexWrap: "nowrap", height: "100%" }}>
<DialogTitle id="select-plugin-dialog-title" style={{ flex: "0 0 auto", padding: "0px", height: 54 }}>
<div style={{ display: "flex",flexDirection: "row", paddingTop: 3, paddingBottom: 3, flexWrap: "nowrap", width: "100%", alignItems: "center" }}>
<div style={{ display: "flex", flexDirection: "row", paddingTop: 3, paddingBottom: 3, flexWrap: "nowrap", width: "100%", alignItems: "center" }}>
<IconButton onClick={() => { this.cancel(); }} style={{ flex: "0 0 auto" }} >
<ArrowBackIcon />
</IconButton>
@@ -567,7 +595,7 @@ export const LoadPluginDialog =
key={this.state.filterType}
onChange={(e) => { this.onFilterChange(e); }}
style={{ flex: "0 0 160px" }}
>
>
{this.createFilterOptions()}
</Select>
<div style={{ flex: "0 0 auto", marginRight: 24, visibility: this.state.filterType === PluginType.Plugin ? "hidden" : "visible" }} >
@@ -625,6 +653,16 @@ export const LoadPluginDialog =
<Typography display='block' variant='body2' color="textPrimary" noWrap >
{this.info_string(selectedPlugin)}
</Typography>
<div style={{
color: isFavorite ? "#F80" : "#CCC", display: (this.state.selected_uri !== "" ? "block" : "none"),
position: "relative", top: -2
}}>
<IconButton color="inherit" aria-label="Set as favorite"
onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
>
<StarBorderIcon />
</IconButton>
</div>
</div>
<div style={{ position: "relative", float: "right", flex: "0 1 200px", width: 200, display: "flex", alignItems: "center" }}>
<Button onClick={this.handleCancel} style={{ width: 120 }} >Cancel</Button>
@@ -640,6 +678,16 @@ export const LoadPluginDialog =
<Typography display='block' variant='body2' color="textPrimary" noWrap >
{this.info_string(selectedPlugin)}
</Typography>
<div style={{
color: isFavorite ? "#F80" : "#CCC", display: (this.state.selected_uri ? "block" : "block"),
position: "relative", top: -5
}}>
<IconButton color="inherit" aria-label="Set as favorite"
onClick={() => { this.setFavorite(this.state.selected_uri, !isFavorite); }}
>
<StarBorderIcon />
</IconButton>
</div>
</div>
<div className={classes.bottom}>
<div style={{ flex: "1 1 1px" }} />
react/src/PiPedalModel.tsx
+72 -1
View File
@@ -299,6 +299,9 @@ interface ControlChangedBody {
value: number;
};
export interface FavoritesList {
[url: string]: boolean;
}
export interface PiPedalModel {
clientId: number;
@@ -319,6 +322,7 @@ export interface PiPedalModel {
jackServerSettings: ObservableProperty<JackServerSettings>;
wifiConfigSettings: ObservableProperty<WifiConfigSettings>;
governorSettings: ObservableProperty<GovernorSettings>;
favorites: ObservableProperty<FavoritesList>;
presets: ObservableProperty<PresetIndex>;
@@ -422,6 +426,8 @@ export interface PiPedalModel {
zoomUiControl(sourceElement: HTMLElement, instanceId: number, uiControl: UiControl): void;
clearZoomedControl(): void;
setFavorite(pluginUrl: string, isFavorite: boolean): void;
};
class PiPedalModelImpl implements PiPedalModel {
@@ -453,6 +459,8 @@ class PiPedalModelImpl implements PiPedalModel {
wifiConfigSettings: ObservableProperty<WifiConfigSettings> = new ObservableProperty<WifiConfigSettings>(new WifiConfigSettings());
governorSettings: ObservableProperty<GovernorSettings> = new ObservableProperty<GovernorSettings>(new GovernorSettings());
favorites: ObservableProperty<FavoritesList> = new ObservableProperty<FavoritesList>({});
presets: ObservableProperty<PresetIndex> = new ObservableProperty<PresetIndex>
(
@@ -496,6 +504,25 @@ class PiPedalModelImpl implements PiPedalModel {
if (this.visibilityState.get() === VisibilityState.Hidden) return;
this.onError(errorMessage);
}
compareFavorites(left: FavoritesList, right: FavoritesList): boolean
{
for (let key of Object.keys(left))
{
if (!right[key]) {
return false;
}
}
for (let key of Object.keys(right))
{
if (!left[key]) {
return false;
}
}
return true;
}
onSocketMessage(header: PiPedalMessageHeader, body?: any) {
if (this.visibilityState.get() === VisibilityState.Hidden) return;
@@ -512,7 +539,13 @@ class PiPedalModelImpl implements PiPedalModel {
if (header.replyTo) {
this.webSocket?.reply(header.replyTo, "onMonitorPortOutput", true);
}
} else if (message === "onFavoritesChanged")
{
let favorites = body as FavoritesList;
if (!this.compareFavorites(favorites,this.favorites.get()))
{
this.favorites.set(favorites);
}
} else if (message === "onChannelSelectionChanged") {
let channelSelectionBody = body as ChannelSelectionChangedBody;
let channelSelection = new JackChannelSelection().deserialize(channelSelectionBody.jackChannelSelection);
@@ -705,6 +738,10 @@ class PiPedalModelImpl implements PiPedalModel {
.then((data) => {
this.banks.set(new BankIndex().deserialize(data));
return this.getWebSocket().request<FavoritesList>("getFavorites");
})
.then((data)=> {
this.favorites.set(data);
this.setState(State.Ready);
})
@@ -839,6 +876,17 @@ class PiPedalModelImpl implements PiPedalModel {
})
.then((data) => {
this.banks.set(new BankIndex().deserialize(data));
if (this.webSocket)
{
// MUST not allow reconnect until at least one complete load has finished.
this.webSocket.canReconnect = true;
}
return this.getWebSocket().request<FavoritesList>("getFavorites");
})
.then((data)=> {
this.favorites.set(data);
if (this.webSocket)
{
// MUST not allow reconnect until at least one complete load has finished.
@@ -1891,6 +1939,29 @@ class PiPedalModelImpl implements PiPedalModel {
this.zoomedUiControl.set(undefined);
}
setFavorite(pluginUrl: string, isFavorite: boolean): void
{
let favorites = this.favorites.get();
let newFavorites: FavoritesList = {};
Object.assign(newFavorites,favorites);
if (isFavorite)
{
newFavorites[pluginUrl] = true;
} else {
if (newFavorites[pluginUrl])
{
delete newFavorites[pluginUrl];
}
}
this.favorites.set(newFavorites);
if (this.webSocket)
{
this.webSocket.send("setFavorites",newFavorites);
}
// stub: update server.
}
preloadImages(imageList: string): void {
let imageNames = imageList.split(';');
for (let i = 0; i < imageNames.length; ++i) {