got the progress to be smooth, but missing final animation

2 files changed, 42 insertions, 14 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index c7a190566..3ed7cee3e 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -45,6 +45,10 @@
   text-align: center;
 }
 
+.no-transition {
+  transition-duration: 0s;
+}
+
 .segment-hide {
     background-color: inherit;
     text-align: center;
diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index ce231ba62..54bfbc792 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -44,35 +44,57 @@ export function ProgressBar(props: ProgressBarProps) {
   // this holds the index of the videoc segment to be removed
   const [removed, setRemoved] = useState<number>(-1);
 
+  // const totalTime = useMemo(() => props.progress*1000 - totalRemovedTime, [props.progress, totalRemovedTime]);
+
   // const totalTime = useMemo(() => props.videos.lastElement().endTime, [props.videos])
 
   // 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 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)
+    segments.forEach((seg, i) => {
+      const htmlId = seg.props.id;
+      const segmentHtml = document.getElementById(htmlId);
+      segmentHtml?.classList.toggle('no-transition', props.recording);
+      console.log(segmentHtml)
+    });
   }, [props.recording])
   
 
   useEffect(() => {
-    console.log('rendering new segments')
-    const totalTime = props.progress*1000 - totalRemovedTime
+    console.log('useEffect dragged, ordered')
+    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>);
+      <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, props.progress])
+  }, [dragged, ordered]);
+
+  // to imporve performance, we only want to update the width, not re-render the whole thing
+  useEffect(() => {
+    // console.log('updating width on progress useEffect')
+    const totalTime = props.progress * 1000 - totalRemovedTime;
+    segments.forEach((seg, i) => {
+      const htmlId = seg.props.id;
+      const segmentHtml = document.getElementById(htmlId);
+      segmentHtml?.style.width = `${((ordered[i].endTime - ordered[i].startTime) / totalTime) * 100}%`;
+
+      // console.log('updating width on progress useEffect', htmlId, segmentHtml, segmentHtml?.style.width)
+    });
+  }, [props.progress]);
+      
 
 
   useEffect(() => {
@@ -96,9 +118,11 @@ export function ProgressBar(props: ProgressBarProps) {
     else if (order < ordered.length) {
       // update the total time
       // 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 
+
+      // 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 =>