add way to remove segments using touch going off screen, only show undo button when something is on undo stack

1 files changed, 4 insertions, 1 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 3f54a97ce..7cff54ff2 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -35,6 +35,8 @@ export function RecordingView(props: IRecordingViewProps) {
 
     // acts as a "refresh state" to tell progressBar when to undo
     const [doUndo, setDoUndo] = useState(false);
+    // whether an undo can occur or not
+    const [canUndo, setCanUndo] = useState(false);
 
     const [videos, setVideos] = useState<MediaSegment[]>([]);
     const [orderVideos, setOrderVideos] = useState<boolean>(false);
@@ -263,7 +265,7 @@ export function RecordingView(props: IRecordingViewProps) {
                         {!recording && (videos.length > 0 ?
 
                             <div className="options-wrapper video-edit-wrapper">
-                                <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
+                                <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons", style: {display: canUndo ? 'inherit' : 'none'} }}>
                                     <MdBackspace onClick={undoPrevious} />
                                 </IconContext.Provider>
                                 <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
@@ -290,6 +292,7 @@ export function RecordingView(props: IRecordingViewProps) {
                     progress={progress}
                     recording={recording}
                     doUndo={doUndo}
+                    setCanUndo={setCanUndo}
                 // playSegment={playSegment}
                 />
             </div>