Add REMOVE button to Snapshot Edit dialog.

src/PiPedalModel.cpp

@@ -729,7 +729,12 @@ void PiPedalModel::SetSnapshot(int64_t selectedSnapshot)
                 }
             }
             pedalboardChanged = true;
+        } else if (selectedSnapshot == -1) 
+        {
+            this->pedalboard.selectedSnapshot(-1);
+            pedalboardChanged = true;
         }
+
     }
     if (pedalboardChanged)
     {
@@ -3505,6 +3510,10 @@ void PiPedalModel::SetChannelRouterSettings(int64_t clientId, ChannelRouterSetti
 }
 
 std::string PiPedalModel::Tone3000ThumbnailDirectory()
+{
+    return "/var/pipedal/audio_uploads/tone3000_thumbnails";
+}
+std::string PiPedalModel::OldTone3000ThumbnailDirectory()
 {
     return "/var/pipedal/tone3000_thumbnails";
 }

src/PiPedalModel.hpp

@@ -303,6 +303,7 @@ namespace pipedal
         Storage &GetStorage() { return storage; }
 
         virtual std::string Tone3000ThumbnailDirectory() override;
+        virtual std::string OldTone3000ThumbnailDirectory() override;
 
         bool GetHasWifi();
 

vite/src/pipedal/PiPedalModel.tsx

@@ -1802,9 +1802,7 @@ export class PiPedalModel //implements PiPedalModel
     setSnapshots(snapshots: (Snapshot | null)[], selectedSnapshot: number) {
         let pedalboard = this.pedalboard.get().clone();
         pedalboard.snapshots = snapshots;
-        if (selectedSnapshot !== -1) {
+        pedalboard.selectedSnapshot = selectedSnapshot;
-            pedalboard.selectedSnapshot = selectedSnapshot;
-        }
         this.pruneSnapshotValues(pedalboard);
 
         this.setModelPedalboard(pedalboard);

vite/src/pipedal/SnapshotButton.tsx

@@ -150,7 +150,8 @@ export default class SnapshotButton extends ResizeResponsiveComponent<SnapshotBu
                         if (!selected) ev.stopPropagation();
                     }}
 
-                    onClick={() => { if (snapshot) this.props.onSelectSnapshot(snapshotIndex); }}
+                    onClick={() => { 
+                        if (snapshot) this.props.onSelectSnapshot(snapshotIndex); }}
                 >
                     {/* select background mask*/}
                     <div style={{position: "absolute", left:0,top:0,right:0,bottom:0, visibility: this.props.selected ? "visible": "hidden",

vite/src/pipedal/SnapshotPanel.tsx

@@ -121,8 +121,7 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
     }
 
     getCollapseButtons() {
-        if (this.getPortraitOrientation())
+        if (this.getPortraitOrientation()) {
-        {
             return document.documentElement.clientWidth < 550;
         } else {
             return document.documentElement.clientWidth < 800;
@@ -188,21 +187,31 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
     }
     renderSnapshot(snapshot: Snapshot | null, index: number) {
         return (
-            <SnapshotButton key={"s"+index}
+            <SnapshotButton key={"s" + index}
                 snapshot={snapshot}
                 snapshotIndex={index}
                 collapseButtons={this.state.collapseButtons}
                 selected={this.state.selectedSnapshot === index}
                 largeText={this.state.largeText}
-                onEditSnapshot={(index)=>{this.onEditSnapshot(index)}}
+                onEditSnapshot={(index) => { this.onEditSnapshot(index) }}
-                onSaveSnapshot={(index)=>{ this.onSaveSnapshot(index); }}
+                onSaveSnapshot={(index) => { this.onSaveSnapshot(index); }}
-                onSelectSnapshot={(index)=>{this.model.selectSnapshot(index);}}
+                onSelectSnapshot={(index) => { this.model.selectSnapshot(index); }}
             />
         );
     }
 
 
-
+    handleRemoveSnapshot(snapshotId: number) {
+        let snapshots = Snapshot.cloneSnapshots(this.state.snapshots);
+        snapshots[snapshotId] = null;
+        this.setState({
+            snapshots: snapshots,
+            snapshotPropertiesDialogOpen: false,
+            selectedSnapshot: -1
+        });
+        this.model.setSnapshots(snapshots, -1);
+        this.model.selectSnapshot(-1);
+    }
 
     handleSnapshotPropertyOk(index: number, name: string, color: string, editing: boolean) {
         if (editing) {
@@ -286,6 +295,9 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
                             color={this.state.editColor}
                             editing={this.state.editing}
                             snapshotIndex={this.state.editId}
+                            onRemove={(snapshotId) => {
+                                this.handleRemoveSnapshot(snapshotId);
+                            }}
                             onClose={() => { this.setState({ snapshotPropertiesDialogOpen: false }); }}
                             onOk={(snapshotId, name, color, editing) => {
                                 this.handleSnapshotPropertyOk(snapshotId, name, color, editing);

vite/src/pipedal/SnapshotPropertiesDialog.tsx

@@ -36,7 +36,7 @@ import { colorKeys } from "./MaterialColors";
 import ResizeResponsiveComponent from './ResizeResponsiveComponent';
 import ColorDropdownButton, { DropdownAlignment } from './ColorDropdownButton';
 
-const snapshotColors = colorKeys.slice(0,100);
+const snapshotColors = colorKeys.slice(0, 100);
 const NBSP = "\u00A0";
 
 export interface SnapshotPropertiesDialogProps {
@@ -46,6 +46,7 @@ export interface SnapshotPropertiesDialogProps {
     snapshotIndex: number,
     color: string,
     onOk: (snapshotId: number, name: string, color: string, editing: boolean) => void,
+    onRemove: (snapshotid: number) => void,
     onClose: () => void
 };
 
@@ -54,6 +55,7 @@ export interface SnapshotPropertiesDialogState {
     color: string,
     nameErrorMessage: string,
     compactVertical: boolean,
+    showRemoveConfirm: boolean
 };
 
 export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<SnapshotPropertiesDialogProps, SnapshotPropertiesDialogState> {
@@ -72,21 +74,21 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
             color = snapshotColors[0];
         }
         let name = this.props.name;
-        if (name.length === 0 && !this.props.editing)
+        if (name.length === 0 && !this.props.editing) {
-        {
+            name = "Snapshot " + (this.props.snapshotIndex + 1);
-            name = "Snapshot " + (this.props.snapshotIndex+1);
         }
         return {
             name: name,
             color: color,
             nameErrorMessage: "",
-            compactVertical: this.getCompactVertical()
+            compactVertical: this.getCompactVertical(),
+            showRemoveConfirm: false
         };
     }
 
     onWindowSizeChanged(width: number, height: number): void {
-        super.onWindowSizeChanged(width,height);
+        super.onWindowSizeChanged(width, height);
-        this.setState({compactVertical: this.getCompactVertical() })
+        this.setState({ compactVertical: this.getCompactVertical() })
     }
 
     handleOk() {
@@ -102,6 +104,10 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
         }
     }
 
+    handleRemoveSnapshot() {
+        this.props.onRemove(this.props.snapshotIndex);
+    }
+
     render() {
         let props = this.props;
 
@@ -111,9 +117,9 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
 
         let okButtonText = this.props.editing ? "OK" : "Save";
         return (
-            <DialogEx maxWidth="sm" fullWidth={true} tag="snapshotProps" open={this.props.open} onClose={handleClose} 
+            <DialogEx maxWidth="sm" fullWidth={true} tag="snapshotProps" open={this.props.open} onClose={handleClose}
                 style={{ userSelect: "none" }} fullScreen={this.state.compactVertical}
-                onEnterKey={()=> { this.handleOk(); }}
+                onEnterKey={() => { this.handleOk(); }}
             >
                 <DialogTitle>
                     <div>
@@ -127,7 +133,7 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
                     </div>
 
                 </DialogTitle>
-                <DialogContent style={{paddingBottom: 0}}>
+                <DialogContent style={{ paddingBottom: 0 }}>
 
                     <TextField variant="standard" style={{ flexGrow: 1, flexBasis: 1 }}
                         autoComplete="off"
@@ -146,20 +152,47 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
                     />
                     <Typography variant="caption" color="textSecondary">Color</Typography>
                     <ColorDropdownButton aria-label="color" currentColor={this.state.color} dropdownAlignment={DropdownAlignment.SE}
-                          onColorChange={(newcolor) => {
+                        onColorChange={(newcolor) => {
-                            this.setState({color: newcolor});
+                            this.setState({ color: newcolor });
-                          }} />
+                        }} />
-                          
+
                 </DialogContent>
                 <DialogActions>
+                    <Button variant="dialogSecondary" onClick={() => { 
+                        this.setState({ showRemoveConfirm: true }); 
+                    }} >
+                        Remove
+                    </Button>
+                    <div style={{ flexGrow: 1 }} />
                     <Button variant="dialogSecondary" onClick={handleClose} >
                         Cancel
                     </Button>
-                    <Button variant="dialogPrimary" onClick={()=> {this.handleOk();}}  >
+                    <Button variant="dialogPrimary" onClick={() => { this.handleOk(); }}  >
                         {okButtonText}
                     </Button>
                 </DialogActions>
-            </DialogEx>
+                <DialogEx open={this.state.showRemoveConfirm} tag="cofirmRemove"
+                    onEnterKey={() => {
+                        this.setState({ showRemoveConfirm: false });
+                        this.handleRemoveSnapshot();
+                    }}
+                    onClose={() => { this.setState({ showRemoveConfirm: false }); }} >
+                        <DialogContent>
+                            <Typography variant="body1">Are you sure you want to remove this snapshot?</Typography>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button variant="dialogSecondary" onClick={() => { this.setState({ showRemoveConfirm: false }); }} >
+                                Cancel
+                            </Button>
+                            <Button variant="dialogPrimary" onClick={() => {
+                                this.setState({showRemoveConfirm: false });
+                                this.handleRemoveSnapshot();
+                            }}  >
+                                Remove
+                            </Button>
+                        </DialogActions>
+                </DialogEx>
+            </DialogEx >
         );
     }
 }