From bb8d6b6ad83bf20cdaf0f9a4b6665b3c1371cb95 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 9 Jun 2022 10:40:34 -0400
Subject: got the removing on the shift key to work.

---
 .../views/nodes/RecordingBox/ProgressBar.tsx       | 72 +++++++++++++---------
 1 file changed, 44 insertions(+), 28 deletions(-)

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

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
     }
 
-- 
cgit v1.2.3-70-g09d2

