started working with the pointer events to drag - very laggy, may try something more simple for now

1 files changed, 18 insertions, 16 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 3fd062483..2420c126f 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -11,9 +11,10 @@ import { Upload } from '../../../../server/SharedMediaTypes';
 import { RecordingApi } from '../../../util/RecordingApi';
 import { DashUploadUtils } from '../../../../server/DashUploadUtils';
 
-interface MediaSegment {
+export interface MediaSegment {
     videoChunks: any[],
-    endTime: number
+  endTime: number,
+  startTime: number
 }
 
 interface IRecordingViewProps {
@@ -70,6 +71,8 @@ export function RecordingView(props: IRecordingViewProps) {
                     inputPaths.push(name)
                   });
                 
+                console.log(videoFiles)
+                
                 
                 
                 // const inputListName = 'order.txt';
@@ -83,18 +86,18 @@ export function RecordingView(props: IRecordingViewProps) {
                 
                 // fs.unlinkSync(inputListName);
 
-                const combined = await DashUploadUtils.combineSegments(videoFiles, inputPaths)
-                console.log('combined', combined)
+                // const combined = await DashUploadUtils.combineSegments(videoFiles, inputPaths)
+                // console.log('combined', combined)
                 
                 // const outputFile = new File(['output.mp4'], 'output.mp4', { type: 'video/mp4', lastModified: Date.now() });
 
-                const data = await Networking.UploadFilesToServer(combined)
-                  const result = data[0].result
-                  if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                      props.setResult(result, trackScreen)
-                  } else {
-                      alert("video conversion failed");
-                  }
+                // const data = await Networking.UploadFilesToServer(combined)
+                //   const result = data[0].result
+                //   if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
+                //       props.setResult(result, trackScreen)
+                //   } else {
+                //       alert("video conversion failed");
+                //   }
                   
 
                 //   if (format.includes("x-matroska")) {
@@ -215,7 +218,7 @@ export function RecordingView(props: IRecordingViewProps) {
                   // if we have a last portion
                   if (videoChunks.length > 1) {
                         // append the current portion to the video pieces
-                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
+                        setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }])
                   }
 
                   // reset the temporary chunks
@@ -228,7 +231,7 @@ export function RecordingView(props: IRecordingViewProps) {
             // recording paused
             videoRecorder.current.onpause = (event: any) => {
                   // append the current portion to the video pieces
-                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
+                  setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }])
 
                   // reset the temporary chunks
                   videoChunks = []
@@ -346,9 +349,8 @@ export function RecordingView(props: IRecordingViewProps) {
 
                               </div>
 
-                              <ProgressBar
-                                    progress={progress}
-                                    marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
+              <ProgressBar
+                videos={videos}
                               // playSegment={playSegment}
                               />
                         </div>