2 files changed, 14 insertions, 31 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6db2269c4..239aacd4f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -51,6 +51,7 @@ import "./CollectionFreeFormView.scss";
 import { MarqueeView } from "./MarqueeView";
 import React = require("react");
 import e = require("connect-flash");
+import { RecordingApi } from "../../../apis/recording/RecordingApi";
 
 export const panZoomSchema = createSchema({
     _panX: "number",
@@ -959,36 +960,18 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     }
 
-
-    followMovements = (): void => {
-        // need the first for subtraction
-        let first = null;
-
-        this.storedMovements.forEach(movement => {
-            if (first === null) first = movement.time;
-
-            // set the pan to what was stored
-            setTimeout(() => {
-                this.Document._panX = movement.panX;
-                this.Document._panY = movement.panY;
-            }, movement.time - first)
-        })
-
-        // for now, clear the movements
-        this.storedMovements = []
-    }
-
     @action
     setPan(panX: number, panY: number, panTime: number = 0, clamp: boolean = false) {
         // if not presenting, just retrace the movements
         if (Doc.UserDoc()?.presentationMode === 'watching') {
-            this.followMovements()
-            return;
+            // RecordingApi.followMovements(presentation, this)
+            return
         }
 
         if (Doc.UserDoc()?.presentationMode === 'recording') {
             // store as many movments as possible
-            this.storedMovements.push({time: new Date().getTime(), panX, panY})
+            // this.storedMovements.push({time: new Date().getTime(), panX, panY})
+            const err = RecordingApi.trackMovements(panX, panY)
         }
 
         if (!this.isAnnotationOverlay && clamp) {
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 9be972d53..8c1ab9e2b 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -6,7 +6,7 @@ import { MdBackspace } from 'react-icons/md';
 import { FaCheckCircle } from 'react-icons/fa';
 import { IconContext } from "react-icons";
 
-import { RecordingApi } from '../../../apis/recording/recordingApi';
+import { RecordingApi } from '../../../apis/recording/RecordingApi';
 
 
 enum RecordingStatus {
@@ -39,8 +39,6 @@ export function RecordingView() {
       const videoElementRef = useRef<HTMLVideoElement | null>(null);
 
     const [finished, setFinished] = useState<Boolean>(false)
-    
-    const recordingApiRef = useRef<any | null>(null);
 
       
 
@@ -75,7 +73,11 @@ export function RecordingView() {
 
                   videoElementRef.current!.srcObject = null
                   videoElementRef.current!.src = blobUrl
-                  videoElementRef.current!.muted = false
+                videoElementRef.current!.muted = false
+                
+                // clear the recording api
+                const presentation = RecordingApi.finish()
+                RecordingApi.clear()
             }
             
 
@@ -202,7 +204,8 @@ export function RecordingView() {
       const pause = () => {
             if (recorder.current) {
                   if (recorder.current.state === "recording") {
-                        recorder.current.pause();
+                      recorder.current.pause();
+                      const err = RecordingApi.pause()
                   }
             }
       }
@@ -211,7 +214,7 @@ export function RecordingView() {
           console.log('[RecordingView.tsx] startOrResume')
             if (!recorder.current || recorder.current.state === "inactive") {
                 record();
-                recordingApiRef.current.startAndInit()
+                const err = RecordingApi.initAndStart()
             } else if (recorder.current.state === "paused") {
                   recorder.current.resume();
             }
@@ -325,9 +328,6 @@ export function RecordingView() {
                                           )}
                                     </button>  */}
                   </div>
-                  
-                  <RecordingApi ref={recordingApiRef}></RecordingApi>
-
                   </div>
             </div>)
 }
\ No newline at end of file