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

2 files changed, 22 insertions, 13 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index 81f753e44..131d5c837 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -10,6 +10,7 @@ interface ProgressBarProps {
     progress: number,
     recording: boolean,
     doUndo: boolean,
+    setCanUndo?: React.Dispatch<React.SetStateAction<boolean>>,
 }
 
 interface SegmentBox {
@@ -41,6 +42,8 @@ export function ProgressBar(props: ProgressBarProps) {
     // this holds the index of the videoc segment to be removed
     const [removed, setRemoved] = useState<number>(-1);
 
+    useEffect(() => props.setCanUndo?.(undoStack.length > 0), [undoStack.length]);
+
 
     // abstracted for other uses - brings back the most recently deleted segment
     const handleUndo = () => {
@@ -142,7 +145,7 @@ export function ProgressBar(props: ProgressBarProps) {
         setRemoved(-1);
     }, [removed]);
 
-    const updateLastHover = (segId: number): CurrentHover | null => {
+    const updateCurrentHover = (segId: number): CurrentHover | null => {
         // get the segId of the segment that will become the new bounding area
         const rect = progressBarRef.current?.children[segId].getBoundingClientRect()
         if (rect == null) return null
@@ -169,9 +172,9 @@ export function ProgressBar(props: ProgressBarProps) {
         if (progressBar == null || clickedSegment.id === progressBar.id) return
 
         // if holding shift key, let's remove that segment
-        // TODO: think of a way to accomodate touch -> maybe if pointerup isn't fired after x secs? or if dragged into a trash bin or smthn
         if (e.shiftKey) {
             const segId = parseInt(clickedSegment.id.split('-')[1]);
+            console.log('removing segment shift', segId);
             setRemoved(segId);
             return
         }
@@ -193,7 +196,7 @@ export function ProgressBar(props: ProgressBarProps) {
 
         // this is the logic for storing the lower X bound and upper X bound
         // to know whether a swap is needed between two segments
-        let lastHover: CurrentHover = {
+        let currentHover: CurrentHover = {
             index: segId,
             minX: rect.x,
             maxX: rect.x + rect.width,
@@ -216,19 +219,23 @@ export function ProgressBar(props: ProgressBarProps) {
             followCursor(event, detchedSegment);
 
             const curX = event.clientX;
-            if (curX < lastHover.minX && lastHover.index > 0) {
-                swapSegments(lastHover.index, lastHover.index - 1)
-                lastHover = updateLastHover(lastHover.index - 1) ?? lastHover
+            if (curX < currentHover.minX && currentHover.index > 0) {
+                swapSegments(currentHover.index, currentHover.index - 1)
+                currentHover = updateCurrentHover(currentHover.index - 1) ?? currentHover
             }
-            else if (curX > lastHover.maxX && lastHover.index < segments.length - 1) {
-                swapSegments(lastHover.index, lastHover.index + 1)
-                lastHover = updateLastHover(lastHover.index + 1) ?? lastHover
+            else if (curX > currentHover.maxX && currentHover.index < segments.length - 1) {
+                swapSegments(currentHover.index, currentHover.index + 1)
+                currentHover = updateCurrentHover(currentHover.index + 1) ?? currentHover
             }
         }
 
         const placeSegmentandCleanup = (event?: PointerEvent): void => {
             event?.stopPropagation();
             event?.preventDefault();
+            // if they put the segment outside of the bounds, remove it
+            if (event && (event.clientX < 0 || event.clientX > document.body.clientWidth || event.clientY < 0 || event.clientY > document.body.clientHeight))
+                setRemoved(currentHover.index);
+            
             // remove the update event listener for pointermove
             progressBar.removeEventListener('pointermove', updateSegmentOrder);
             // remove the floating segment from the DOM
@@ -238,9 +245,8 @@ export function ProgressBar(props: ProgressBarProps) {
             setDragged(-1);
         }
 
-
-        progressBar.addEventListener('pointermove', updateSegmentOrder)
-        progressBar.addEventListener('pointerup', placeSegmentandCleanup, { once: true })
+        progressBar.addEventListener('pointermove', updateSegmentOrder);
+        progressBar.addEventListener('pointerup', placeSegmentandCleanup, { once: true });
     }
 
     const swapSegments = (oldIndex: number, newIndex: number) => {
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>