small fix on recordingApi to work with segments. now tracks accurately

1 files changed, 16 insertions, 11 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 380ac050d..be9f342bb 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -14,7 +14,7 @@ export interface MediaSegment {
     videoChunks: any[],
     endTime: number,
   startTime: number,
-  presenation?: Presentation,
+  presentation?: Presentation,
 }
 
 interface IRecordingViewProps {
@@ -60,13 +60,14 @@ export function RecordingView(props: IRecordingViewProps) {
         }
     }
   
-  useEffect(() => console.info('progess', progress), [progress])
+  // useEffect(() => console.info('progress', progress), [progress])
 
 
     useEffect(() => {
       if (finished) {
         // make the total presentation that'll match the concatted video
-        const concatPres = trackScreen ? RecordingApi.Instance.concatPresentations(videos.map(v => v.presenation as Presentation)) : undefined;
+        const concatPres = RecordingApi.Instance.concatPresentations(videos.map(v => v.presentation as Presentation));
+        console.log('concatPres', concatPres);
 
             // this async function uses the server to create the concatted video and then sets the result to it's accessPaths
             (async () => {
@@ -91,7 +92,8 @@ export function RecordingView(props: IRecordingViewProps) {
     // check if the browser supports media devices on first load
     useEffect(() => { if (!navigator.mediaDevices) alert('This browser does not support getUserMedia.'); }, [])
 
-    useEffect(() => {
+  useEffect(() => {
+      console.log('recording useEffect', recording)
         let interval: any = null;
         if (recording) {
             interval = setInterval(() => {
@@ -136,23 +138,26 @@ export function RecordingView(props: IRecordingViewProps) {
 
         videoRecorder.current.onstart = (event: any) => {
             setRecording(true);
+            // trackScreen && RecordingApi.Instance.start();
             trackScreen && RecordingApi.Instance.start();
         }
 
       videoRecorder.current.onstop = () => {
-          RecordingApi.Instance.stop();
+          // RecordingApi.Instance.stop();
             // if we have a last portion
-          if (videoChunks.length > 1) {
+        if (videoChunks.length > 1) {
+          const presentation = RecordingApi.Instance.yieldPresentation().next().value || undefined
+          console.log('presenation yield', JSON.parse(JSON.stringify(presentation)))
                 // append the current portion to the video pieces
                   setVideos(videos => [...videos, {
                     videoChunks: videoChunks,
                     endTime: recordingTimerRef.current,
                     startTime: videos?.lastElement()?.endTime || 0,
                     // RecordingApi.stop() will return undefined if no track screen
-                    presenation: RecordingApi.Instance.getPresentation()
+                    presentation
                   }])
                   // now that we got the presentation data, we can clear for the next segment to be recorded
-                  RecordingApi.Instance.clear();
+                  // RecordingApi.Instance.clear();
             }
 
           // reset the temporary chunks
@@ -193,7 +198,7 @@ export function RecordingView(props: IRecordingViewProps) {
         setupMoveUpEvents({}, e, returnTrue, returnFalse, e => {
           if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
             record();
-            // trackScreen && RecordingApi.Instance.start();
+            // trackScreen &&
           }
           return true; // cancels propagation to documentView to avoid selecting it.
         }, false, false);
@@ -204,7 +209,7 @@ export function RecordingView(props: IRecordingViewProps) {
         setDoUndo(prev => !prev);
     }
 
-    const handleOnTimeUpdate = () => playing && setVideoProgressHelper(videoElementRef.current!.currentTime);
+  const handleOnTimeUpdate = () => { playing && setVideoProgressHelper(videoElementRef.current!.currentTime); };
 
     const millisecondToMinuteSecond = (milliseconds: number) => {
         const toTwoDigit = (digit: number) => {
@@ -221,7 +226,7 @@ export function RecordingView(props: IRecordingViewProps) {
                 <video id={`video-${props.id}`}
                     autoPlay
                     muted
-                    onTimeUpdate={handleOnTimeUpdate}
+                    onTimeUpdate={() => handleOnTimeUpdate()}
                     ref={videoElementRef}
                 />
                 <div className="recording-sign">