got the removing on the shift key to work.

2 files changed, 52 insertions, 29 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index effc3d8a8..7ceae6696 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -33,51 +33,71 @@ export function ProgressBar(props: ProgressBarProps) {
 
   const [dragged, setDragged] = useState<number>(-1);
 
+  const [totalTime, setTotalTime] = useState<number>(0);
+
+  // this holds the index of the videoc segment to be removed
+  const [removed, setRemoved] = useState<number>(-1);
+
   // const totalTime = useMemo(() => props.videos.lastElement().endTime, [props.videos])
 
-  const totalTime = () => props.videos.lastElement().endTime
+  // const totalTime = () => props.videos.lastElement().endTime
   // const memoTotal = useMemo(totalTime, [props.videos])
 
   useEffect(() => {
     const segmentsJSX = ordered.map((seg, i) =>
-        <div id={`segment-${i.toString()}`} className={ dragged === i ? 'segment-hide' : 'segment'} style={{ width: `${((seg.endTime - seg.startTime) / totalTime()) * 100}%` }}>{seg.order}</div>);
+        <div id={`segment-${i.toString()}`} className={ dragged === i ? 'segment-hide' : 'segment'} style={{ width: `${((seg.endTime - seg.startTime) / totalTime) * 100}%` }}>{seg.order}</div>);
       
     setSegments(segmentsJSX)
   }, [dragged, ordered])
 
   useEffect(() => {
+    // this useEffect fired when the videos are being rearragned to the order
+    // in this case, do nothing.
+    if (props.orderVideos) return;
+
     const order = props.videos.length
-    if (order && !props.orderVideos) {
+    // in this case, a new video is added
+    if (order && order > ordered.length) {
       const { endTime, startTime } = props.videos.lastElement();
+      // update total time
+      setTotalTime(prevTime => prevTime + (endTime - startTime));
+      // add the new segment to the ordered array
       setOrdered(prevOrdered => {
         return [...prevOrdered, { endTime, startTime , order }];
       });
     }
+
+    // in this case, a segment is removed
+    else if (order < ordered.length) {
+      // update the total time
+      setTotalTime(prevTime => prevTime - (ordered[removed].endTime - ordered[removed].startTime));
+      //remove the segment from the ordered array and decrement the order of the remaining segments 
+      // if they are greater than the removed segment's order 
+      const removedOrder = ordered[removed].order;
+      setOrdered(prevOrdered => 
+        prevOrdered.reduce((acc, seg, i) => {
+          (i !== removed) && acc.push({ ...seg, order: seg.order > removedOrder ? seg.order - 1 : seg.order });
+          return acc;
+        },[] as SegmentBox[])
+      );
+      // reset to default/nullish state
+      setRemoved(-1);
+    }
   }, [props.videos]);
 
   useEffect(() => {
     props.setVideos(vids => ordered.map((seg) => vids[seg.order - 1]));
   }, [props.orderVideos]);
 
+  useEffect(() => {
+    if (removed === -1) return;
 
+    console.log('removed', removed)
 
-      // const handleClick = (e: React.MouseEvent) => {
-      //       let progressbar = document.getElementById('progressbar')!
-      //       let bounds = progressbar!.getBoundingClientRect();
-      //       let x = e.clientX - bounds.left;
-      //       let percent = x / progressbar.clientWidth * 100
-
-      //       for (let i = 0; i < props.marks.length; i++) {
-      //             let start = i == 0 ? 0 : props.marks[i-1];
-      //             if (percent > start && percent < props.marks[i]) {
-      //                   props.playSegment(i)
-      //                   // console.log(i)
-      //                   // console.log(percent)
-      //                   // console.log(props.marks[i])
-      //                   break
-      //             }
-      //       }
-      // }
+    // update the videos array -> this will fire the useEffect above, where we update the orders & totalTime
+    const index = ordered[removed].order - 1;
+    props.setVideos(vids => vids.filter((vid, i) => i !== index));
+  }, [removed]);
   
   const updateLastHover = (segId: number): CurrentHover | null => {
     // get the segId of the segment that will become the new bounding area
@@ -102,16 +122,12 @@ export function ProgressBar(props: ProgressBarProps) {
     const progressBar = progressBarRef.current
     if (progressBar == null || clickedSegment.id === progressBar.id) return
 
-    console.log('pointer down')
     // if holding shift key, let's remove that segment
+    // TODO: think of a way to accomodate touch -> maybe if poiuntermove isn't fired after x secs?
     if (e.shiftKey) {
-      // TODO: fix this
-      const segId = parseInt(clickedSegment.id.split('-')[1])
-      const o = ordered[segId].order
-      setOrdered(prevOrdered => {
-        return prevOrdered.filter((seg, i) => i !== segId)
-      })
-
+      const segId = parseInt(clickedSegment.id.split('-')[1]);
+      console.log('removing segment', segId)
+      setRemoved(segId);
       return
     }
 
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 8c8728fc3..68d85855c 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -55,6 +55,7 @@ export function RecordingView(props: IRecordingViewProps) {
             }
       }
 
+
     useEffect(() => {
           
         // console.log('in videos useEffect', finished)
@@ -90,6 +91,12 @@ export function RecordingView(props: IRecordingViewProps) {
 
     }, [videos])
   
+    
+  // make useEffect for progess and log when it fires
+  useEffect(() => {
+    console.log('progress', progress)
+  }, [progress])
+  
   useEffect(() => {
 
     if (finished) {
@@ -198,7 +205,7 @@ export function RecordingView(props: IRecordingViewProps) {
   const stop = (e: React.MouseEvent) => {
         e.stopPropagation()
         if (videoRecorder.current) {
-                                      setFinished(true);
+          setFinished(true);
                   if (videoRecorder.current.state !== "inactive") {
                         videoRecorder.current.stop();
                         // recorder.current.stream.getTracks().forEach((track: any) => track.stop())