got the progress bar to move while recording, but it is a tad slow

2 files changed, 33 insertions, 10 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index 7ceae6696..ce231ba62 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -10,6 +10,8 @@ interface ProgressBarProps {
   videos: MediaSegment[],
   setVideos: React.Dispatch<React.SetStateAction<MediaSegment[]>>,
   orderVideos: boolean,
+  progress: number,
+  recording: boolean,
 }
 
 interface SegmentBox {
@@ -33,7 +35,11 @@ export function ProgressBar(props: ProgressBarProps) {
 
   const [dragged, setDragged] = useState<number>(-1);
 
-  const [totalTime, setTotalTime] = useState<number>(0);
+  // total length of the video, in seconds*100
+  // const [totalTime, setTotalTime] = useState<number>(0);
+
+  // length of the time removed from the video, in seconds*100
+  const [totalRemovedTime, setTotalRemovedTime] = useState<number>(0);
 
   // this holds the index of the videoc segment to be removed
   const [removed, setRemoved] = useState<number>(-1);
@@ -43,12 +49,31 @@ export function ProgressBar(props: ProgressBarProps) {
   // const totalTime = () => props.videos.lastElement().endTime
   // const memoTotal = useMemo(totalTime, [props.videos])
 
+  // useEffect that updates total time based on progress
+  useEffect(() => {
+    console.log("useEffect progress", props.progress, 'totalRemovedTime', totalRemovedTime)
+    // setTotalTime(prev => {
+    //   // progress is in seconds, prev is in deciseconds?
+    //   const toAdd = props.progress * 10 - prev
+    //   return prev + toAdd
+    // })
+    // setTotalTime(prev => props.progress * 10)
+  }, [props.progress])
+
   useEffect(() => {
+    console.log("useEffect recording", props.recording)
+  }, [props.recording])
+  
+
+  useEffect(() => {
+    console.log('rendering new segments')
+    const totalTime = props.progress*1000 - totalRemovedTime
     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>);
       
     setSegments(segmentsJSX)
-  }, [dragged, ordered])
+  }, [dragged, ordered, props.progress])
+
 
   useEffect(() => {
     // this useEffect fired when the videos are being rearragned to the order
@@ -60,7 +85,7 @@ export function ProgressBar(props: ProgressBarProps) {
     if (order && order > ordered.length) {
       const { endTime, startTime } = props.videos.lastElement();
       // update total time
-      setTotalTime(prevTime => prevTime + (endTime - startTime));
+      // setTotalTime(prevTime => prevTime + (endTime - startTime));
       // add the new segment to the ordered array
       setOrdered(prevOrdered => {
         return [...prevOrdered, { endTime, startTime , order }];
@@ -70,7 +95,9 @@ export function ProgressBar(props: ProgressBarProps) {
     // 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));
+      // setTotalTime(prevTime => prevTime - (ordered[removed].endTime - ordered[removed].startTime));
+      // update total removed time
+      setTotalRemovedTime(prevRemoved => prevRemoved + (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;
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 68d85855c..40117c41c 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -91,12 +91,6 @@ export function RecordingView(props: IRecordingViewProps) {
 
     }, [videos])
   
-    
-  // make useEffect for progess and log when it fires
-  useEffect(() => {
-    console.log('progress', progress)
-  }, [progress])
-  
   useEffect(() => {
 
     if (finished) {
@@ -302,6 +296,8 @@ export function RecordingView(props: IRecordingViewProps) {
               videos={videos}
               setVideos={setVideos}
               orderVideos={orderVideos}
+              progress={progress}
+              recording={recording}
                               // playSegment={playSegment}
                               />
                   </div>