2 files changed, 13 insertions, 18 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 6fe67b6db..a28677525 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -46,7 +46,7 @@ export class RecordingBox extends ViewBoxBaseComponent() {
             this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
             this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.client);
             this.dataDoc[this.fieldKey + "-recorded"] = true;
-            // stringify the presenation and store it
+            // stringify the presentation and store it
             presentation?.movements && (this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(presentation));
       }
 
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index ba9479f41..15883632a 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -60,7 +60,7 @@ export function RecordingView(props: IRecordingViewProps) {
     }
   }
 
-  useEffect(() => console.log('progress', progress), [progress])
+  // useEffect(() => console.debug('progress', progress), [progress])
 
   useEffect(() => {
     if (finished) {
@@ -93,8 +93,7 @@ export function RecordingView(props: IRecordingViewProps) {
   useEffect(() => {
     let interval: any = null;
     if (recording) {
-      interval = setTimeout(() => {
-        console.log('update interval')
+      interval = setInterval(() => {
         setRecordingTimer(unit => unit + 1);
       }, 10);
     } else if (!recording && recordingTimer !== 0) {
@@ -141,7 +140,6 @@ export function RecordingView(props: IRecordingViewProps) {
     }
 
     videoRecorder.current.onstop = () => {
-      // RecordingApi.Instance.stop();
       // if we have a last portion
       if (videoChunks.length > 1) {
         // append the current portion to the video pieces
@@ -150,9 +148,10 @@ export function RecordingView(props: IRecordingViewProps) {
           endTime: recordingTimerRef.current,
           startTime: videos?.lastElement()?.endTime || 0
         };
+
         // depending on if a presenation exists, add it to the video
-        const { done: presError, value: presentation } = RecordingApi.Instance.yieldPresentation().next();
-        setVideos(videos => [...videos, (!presError && trackScreen) ? { ...nextVideo, presentation } : nextVideo]);
+        const presentation = RecordingApi.Instance.yieldPresentation();
+        setVideos(videos => [...videos, (presentation != null && trackScreen) ? { ...nextVideo, presentation } : nextVideo]);
       }
 
       // reset the temporary chunks
@@ -175,8 +174,8 @@ export function RecordingView(props: IRecordingViewProps) {
     const stream = videoElementRef.current!.srcObject;
     stream instanceof MediaStream && stream.getTracks().forEach(track => track.stop());
 
-    // clear the recoringApi
-    RecordingApi.Instance.clear();
+    // finish/clear the recoringApi
+    RecordingApi.Instance.finish();
 
     // this will call upon progessbar to update videos to be in the correct order
     setFinished(true);
@@ -189,12 +188,10 @@ export function RecordingView(props: IRecordingViewProps) {
   }
 
   const start = (e: React.PointerEvent) => {
-    // the code to start or resume does not get triggered if we start dragging the button
     setupMoveUpEvents({}, e, returnTrue, returnFalse, e => {
-      if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
-        record();
-        // trackScreen &&
-      }
+      // start recording if not already recording
+      if (!videoRecorder.current || videoRecorder.current.state === "inactive") record();
+
       return true; // cancels propagation to documentView to avoid selecting it.
     }, false, false);
   }
@@ -204,9 +201,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) => {
@@ -223,7 +218,7 @@ export function RecordingView(props: IRecordingViewProps) {
         <video id={`video-${props.id}`}
           autoPlay
           muted
-          onTimeUpdate={handleOnTimeUpdate}
+          onTimeUpdate={() => handleOnTimeUpdate()}
           ref={videoElementRef}
         />
         <div className="recording-sign">