From e9ae7c0482f1c9409d905bc6474bfd06abb01743 Mon Sep 17 00:00:00 2001
From: Michael <michael.foiani@gmail.com>
Date: Thu, 9 Jun 2022 11:54:02 -0400
Subject: got the progress to be smooth, but missing final animation

---
 .../views/nodes/RecordingBox/ProgressBar.tsx       | 52 ++++++++++++++++------
 1 file changed, 38 insertions(+), 14 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 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 => 
-- 
cgit v1.2.3-70-g09d2

