From 9024621c15962f3cdfccee6fc35294b44d4cf1ee Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@Michaels-MacBook-Pro-5.local>
Date: Thu, 9 Jun 2022 16:27:27 -0400
Subject: fix undo, add disabled ui while recording, create expanding-segment
 to fill the space while recording

---
 .../views/nodes/RecordingBox/RecordingView.tsx     | 40 +++++++++++++---------
 1 file changed, 24 insertions(+), 16 deletions(-)

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 40117c41c..e131420c3 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -31,7 +31,9 @@ export function RecordingView(props: IRecordingViewProps) {
       const recordingTimerRef = useRef<number>(0);
       const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second
       const [playing, setPlaying] = useState(false);
-      const [progress, setProgress] = useState(0);
+    const [progress, setProgress] = useState(0);
+    
+    const [doUndo, setDoUndo] = useState(false);
 
     const [videos, setVideos] = useState<MediaSegment[]>([]);
     const [orderVideos, setOrderVideos] = useState<boolean>(false);
@@ -225,11 +227,15 @@ export function RecordingView(props: IRecordingViewProps) {
             }
       }
 
-      const clearPrevious = () => {
-            const numVideos = videos.length
-            setRecordingTimer(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
-            setVideoProgressHelper(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
-            setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
+    const undoPrevious = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        console.log('undo previous', doUndo)
+        setDoUndo(prev => !prev);
+            // const numVideos = videos.length
+            // setRecordingTimer(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
+            // setVideoProgressHelper(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
+            // setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
+          
       }
 
       const handleOnTimeUpdate = () => {
@@ -247,7 +253,8 @@ export function RecordingView(props: IRecordingViewProps) {
             return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
       }
 
-      return (
+    // TODO: have the undo button only appear if there is something to undo
+    return (
             <div className="recording-container">
                   <div className="video-wrapper">
                         <video id={`video-${props.id}`}
@@ -271,10 +278,10 @@ 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" }}>
-                                                      <MdBackspace onClick={clearPrevious} />
-                                                </IconContext.Provider> */}
+                              <div className="options-wrapper video-edit-wrapper">
+                                                <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
+                                                      <MdBackspace onClick={undoPrevious} />
+                                                </IconContext.Provider>
                                                 <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
                                                       <FaCheckCircle onClick={stop} />
                                                 </IconContext.Provider>
@@ -293,11 +300,12 @@ export function RecordingView(props: IRecordingViewProps) {
                   </div>
                   
                                          <ProgressBar
-              videos={videos}
-              setVideos={setVideos}
-              orderVideos={orderVideos}
-              progress={progress}
-              recording={recording}
+                      videos={videos}
+                      setVideos={setVideos}
+                      orderVideos={orderVideos}
+                      progress={progress}
+                      recording={recording}
+                      doUndo={doUndo}
                               // playSegment={playSegment}
                               />
                   </div>
-- 
cgit v1.2.3-70-g09d2