got basic ordering to work for the videos that go to the server

1 files changed, 6 insertions, 1 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index 3314da355..a91656cbc 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -9,6 +9,7 @@ import { MediaSegment } from './RecordingView';
 interface ProgressBarProps {
   videos: MediaSegment[],
   setVideos: React.Dispatch<React.SetStateAction<MediaSegment[]>>,
+  orderVideos: boolean,
 }
 
 interface SegmentBox {
@@ -46,7 +47,7 @@ export function ProgressBar(props: ProgressBarProps) {
 
   useEffect(() => {
     const order = props.videos.length
-    if (order) {
+    if (order && !props.orderVideos) {
       const { endTime, startTime } = props.videos.lastElement();
       setOrdered(prevOrdered => {
         return [...prevOrdered, { endTime, startTime , order }];
@@ -59,6 +60,10 @@ export function ProgressBar(props: ProgressBarProps) {
     // }))
   }, [props.videos]);
 
+  useEffect(() => {
+    props.setVideos(vids => ordered.map((seg) => vids[seg.order - 1]));
+  }, [props.orderVideos]);
+
 
 
       // const handleClick = (e: React.MouseEvent) => {