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

2 files changed, 25 insertions, 7 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) => {
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index aea7f56b5..a5c2dc85c 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -34,7 +34,7 @@ export function RecordingView(props: IRecordingViewProps) {
       const [progress, setProgress] = useState(0);
 
     const [videos, setVideos] = useState<MediaSegment[]>([]);
-    // const [order, setOrder] = useState<number[]>([]);
+    const [orderVideos, setOrderVideos] = useState<boolean>(false);
       const videoRecorder = useRef<MediaRecorder | null>(null);
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
@@ -57,13 +57,14 @@ export function RecordingView(props: IRecordingViewProps) {
 
     useEffect(() => {
           
-        console.log('in finish useEffect')
+        console.log('in videos useEffect')
 
           if (finished) {
               (async () => {
                 const inputPaths: string[] = [];
                 const videoFiles: File[] = []
-                  videos.forEach(async (vid, i) => {
+                videos.forEach(async (vid, i) => {
+                    console.log(vid)
                     const videoFile = new File(vid.videoChunks, `segvideo${i}.mkv`, { type: vid.videoChunks[0].type, lastModified: Date.now() });
                     videoFiles.push(videoFile);
                     
@@ -71,7 +72,7 @@ export function RecordingView(props: IRecordingViewProps) {
                     inputPaths.push(name)
                   })
                 
-                  console.log(videoFiles)
+                  console.log(inputPaths)
                   
                   const data = await Networking.UploadSegmentsAndConcatenate(videoFiles)
                   console.log('data', data)
@@ -158,6 +159,17 @@ export function RecordingView(props: IRecordingViewProps) {
             }
 
 
+    }, [videos])
+  
+  useEffect(() => {
+          
+        console.log('in finish useEffect')
+
+    if (finished) {
+      setOrderVideos(true);
+    }
+
+
       }, [finished])
 
       useEffect(() => {
@@ -360,8 +372,9 @@ export function RecordingView(props: IRecordingViewProps) {
                   </div>
                   
                                          <ProgressBar
-                videos={videos}
-                setVideos={setVideos}
+              videos={videos}
+              setVideos={setVideos}
+              orderVideos={orderVideos}
                               // playSegment={playSegment}
                               />
                   </div>