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;
-        }
         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;
@@ -202,7 +201,17 @@ export default class SnapshotPanel extends ResizeResponsiveComponent<SnapshotPan
     }
 
 
-
+    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

@@ -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,15 +74,15 @@ 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);
         }
         return {
             name: name,
             color: color,
             nameErrorMessage: "",
-            compactVertical: this.getCompactVertical()
+            compactVertical: this.getCompactVertical(),
+            showRemoveConfirm: false
         };
     }
 
@@ -102,6 +104,10 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
         }
     }
 
+    handleRemoveSnapshot() {
+        this.props.onRemove(this.props.snapshotIndex);
+    }
+
     render() {
         let props = this.props;
 
@@ -152,6 +158,12 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
 
                 </DialogContent>
                 <DialogActions>
+                    <Button variant="dialogSecondary" onClick={() => { 
+                        this.setState({ showRemoveConfirm: true }); 
+                    }} >
+                        Remove
+                    </Button>
+                    <div style={{ flexGrow: 1 }} />
                     <Button variant="dialogSecondary" onClick={handleClose} >
                         Cancel
                     </Button>
@@ -159,6 +171,27 @@ export default class SnapshotPropertiesDialog extends ResizeResponsiveComponent<
                         {okButtonText}
                     </Button>
                 </DialogActions>
+                <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 >
         );
     }