3 files changed, 39 insertions, 15 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 86358e838..1b17476f7 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -1,7 +1,7 @@
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { AudioField, VideoField } from "../../../../fields/URLField";
+import { VideoField } from "../../../../fields/URLField";
 import { Upload } from "../../../../server/SharedMediaTypes";
 import { ViewBoxBaseComponent } from "../../DocComponent";
 import { FieldView } from "../FieldView";
@@ -9,6 +9,8 @@ import { VideoBox } from "../VideoBox";
 import { RecordingView } from './RecordingView';
 import { DocumentType } from "../../../documents/DocumentTypes";
 
+import { RecordingApi } from "../../../util/RecordingApi";
+
 
 @observer
 export class RecordingBox extends ViewBoxBaseComponent() {
@@ -31,17 +33,19 @@ export class RecordingBox extends ViewBoxBaseComponent() {
 
       @action
       setResult = (info: Upload.FileInformation) => {
-            console.log("Setting result to " + info)
+            // console.log("Setting result to " + info)
             this.result = info
-            console.log(this.result.accessPaths.agnostic.client)
+            // console.log(this.result.accessPaths.agnostic.client)
             this.dataDoc.type = DocumentType.VID;
-            console.log(this.videoDuration)
+            // console.log(this.videoDuration)
             this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
 
             this.layoutDoc.layout = VideoBox.LayoutString(this.fieldKey);
             // this.dataDoc.nativeWidth = this.dataDoc.nativeHeight = undefined;
             // this.layoutDoc._fitWidth = undefined;
-            this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
+          this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
+          // stringify the presenation and store it
+            this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
       }
 
       render() {
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index d99492095..870ef87d7 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -8,7 +8,7 @@ import { IconContext } from "react-icons";
 import { Networking } from '../../../Network';
 import { Upload } from '../../../../server/SharedMediaTypes';
 
-import { RecordingApi } from '../../../apis/recording/RecordingApi';
+import { RecordingApi } from '../../../util/RecordingApi';
 
 
 enum RecordingStatus {
@@ -57,11 +57,11 @@ export function RecordingView(props: IRecordingViewProps) {
                   height: 720,
             },
             // audio: true,
-            // audio: {
-            //       echoCancellation: true,
-            //       noiseSuppression: true,
-            //       sampleRate: 44100
-            // }
+            audio: {
+                  echoCancellation: true,
+                  noiseSuppression: true,
+                  sampleRate: 44100
+            }
       }
 
       useEffect(() => {
@@ -159,7 +159,10 @@ export function RecordingView(props: IRecordingViewProps) {
             // }
 
             videoRecorder.current.onstart = (event: any) => {
-                  setRecording(true);
+                setRecording(true);
+                // TODO: update names
+                // RecordingApi.Instance.clear();
+                RecordingApi.Instance.start();
             }
 
             videoRecorder.current.onstop = () => {
@@ -172,7 +175,8 @@ export function RecordingView(props: IRecordingViewProps) {
                   // reset the temporary chunks
                   videoChunks = []
                   setRecording(false);
-                  setFinished(true);
+                setFinished(true);
+                RecordingApi.Instance.pause();
             }
 
             // recording paused
@@ -182,12 +186,14 @@ export function RecordingView(props: IRecordingViewProps) {
 
                   // reset the temporary chunks
                   videoChunks = []
-                  setRecording(false);
+                setRecording(false);
+                RecordingApi.Instance.pause();
             }
 
             videoRecorder.current.onresume = async (event: any) => {
                   await startShowingStream();
-                  setRecording(true);
+                setRecording(true);
+                RecordingApi.Instance.resume();
             }
 
             videoRecorder.current.start(200)
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index e57cb1abe..7364a64d9 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -28,6 +28,7 @@ import { AnchorMenu } from "../pdf/AnchorMenu";
 import { StyleProp } from "../StyleProvider";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./VideoBox.scss";
+import { RecordingApi } from "../../util/RecordingApi";
 const path = require('path');
 
 
@@ -117,6 +118,12 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return field?.url.href ?? vfield?.url.href ?? "";
     }
 
+    // returns the presentation data if it exists, null otherwise
+    @computed get presentation() {
+        const data = this.dataDoc[this.fieldKey + '-presentation'];
+        return data ? JSON.parse(data) : null;
+    }
+
 
     @computed private get timeline() { return this._stackedTimeline; }
     private get transition() { return this._clicking ? "left 0.5s, width 0.5s, height 0.5s" : ""; } // css transition for hiding/showing timeline
@@ -147,6 +154,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // plays video
     @action public Play = (update: boolean = true) => {
+        // if presentation isn't null, call followmovements on the recording api
+        if (this.presentation) {
+            const err = RecordingApi.Instance.followMovements(this.presentation);
+            if (err) console.log(err);
+        }
+
+
         this._playing = true;
         const eleTime = this.player?.currentTime || 0;
         if (this.timeline) {