From fd43ece4b97073b81553b5e8a8394d4404011005 Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-3.devices.brown.edu>
Date: Thu, 21 Apr 2022 12:01:04 -0400
Subject: Adapting code

---
 src/client/apis/recording/recordingApi.tsx | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/client/apis/recording/recordingApi.tsx')

diff --git a/src/client/apis/recording/recordingApi.tsx b/src/client/apis/recording/recordingApi.tsx
index 55714f03b..97d4e2e7e 100644
--- a/src/client/apis/recording/recordingApi.tsx
+++ b/src/client/apis/recording/recordingApi.tsx
@@ -148,4 +148,6 @@ export function RecordingApi() {
         })
     }
 
+    return (<></>)
+
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 0af393318adafa885d66c0fc43ffbf23f91e3c73 Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-3.devices.brown.edu>
Date: Thu, 21 Apr 2022 16:48:51 -0400
Subject: Integrate with jenny's videobox api

---
 src/client/apis/recording/RecordingApi.ts          | 153 +++++++++++++++++++++
 src/client/apis/recording/recordingApi.tsx         | 153 ---------------------
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  27 +---
 .../views/nodes/RecordingBox/RecordingView.tsx     |  18 +--
 4 files changed, 167 insertions(+), 184 deletions(-)
 create mode 100644 src/client/apis/recording/RecordingApi.ts
 delete mode 100644 src/client/apis/recording/recordingApi.tsx

(limited to 'src/client/apis/recording/recordingApi.tsx')

diff --git a/src/client/apis/recording/RecordingApi.ts b/src/client/apis/recording/RecordingApi.ts
new file mode 100644
index 000000000..64243e443
--- /dev/null
+++ b/src/client/apis/recording/RecordingApi.ts
@@ -0,0 +1,153 @@
+import { CollectionFreeFormView } from "../../views/collections/collectionFreeForm";
+import React, { useState } from "react";
+
+export namespace RecordingApi {
+
+    type Movement = {
+        time: number,
+        panX: number,
+        panY: number,
+    }
+
+    export type Presentation = {
+        movements: Array<Movement>
+        meta: Object,
+        startDate: Date | null,
+    }
+
+    const NULL_PRESENTATION = {
+        movements: [],
+        meta: {},
+        startDate: null,
+    }
+
+    const [currentPresentation, setCurrentPresenation] = useState<Presentation>(NULL_PRESENTATION)
+    const [isRecording, setIsRecording] = useState(false)
+    const [absoluteStart, setAbsoluteStart] = useState<number>(-1)
+
+    export const initAndStart = (meta?: Object): Error | undefined => {
+        // check if already init a presentation
+        if (currentPresentation.startDate !== null) {
+            console.error('[recordingApi.ts] start() failed: current presentation data exists. please call clear() first.')
+            return new Error('[recordingApi.ts] start()')
+        }
+
+        // (1a) get start date for presenation
+        const startDate = new Date()
+        // (1b) set start timestamp to absolute timestamp
+        setAbsoluteStart(startDate.getTime())
+
+        // TODO: (2) assign meta content
+
+        // (3) assign init values to currentPresenation
+        setCurrentPresenation({ ...currentPresentation, startDate })
+
+        // (4) set isRecording true to allow trackMovements
+        setIsRecording(true)
+    }
+
+    export const clear = (): Error | undefined => {
+        // TODO: maybe archive the data?
+        if (isRecording) {
+            console.error('[recordingApi.ts] clear() failed: currently recording presentation. call pause() or finish() first')
+            return new Error('[recordingApi.ts] clear()')
+        }
+        // clear presenation data
+        setCurrentPresenation(NULL_PRESENTATION)
+
+        // set isRecording false
+        setIsRecording(false)
+
+        // default absoluteStart
+        setAbsoluteStart(-1)
+    }
+
+    export const pause = (): Error | undefined => {
+        if (currentPresentation.startDate === null) {
+            console.error('[recordingApi.ts] pause() failed: no presentation started. try calling init() first')
+            return new Error('[recordingApi.ts] pause()')
+        }
+        // don't allow track movments
+        setIsRecording(false)
+
+        // set relativeStart to the pausedTimestamp
+        const timestamp = new Date().getTime()
+        setAbsoluteStart(timestamp)
+    }
+
+    export const resume = () => {
+        if (currentPresentation.startDate === null) {
+            console.error('[recordingApi.ts] resume() failed: no presentation started. try calling init() first')
+            return new Error('[recordingApi.ts] resume()')
+        }
+
+        const timestamp = new Date().getTime()
+        const startTimestamp = currentPresentation.startDate?.getTime()
+        if (!startTimestamp) {
+            console.error('[recordingApi.ts] resume() failed: no presentation data. try calling init() first')
+            return new Error('[recordingApi.ts] pause()')
+        }
+
+        setAbsoluteStart(prevTime => { 
+            // const relativeUnpause = timestamp - absoluteStart
+            // const timePaused = relativeUnpause - prevTime
+            // return timePaused + absoluteStart
+            const absoluteTimePaused = timestamp - prevTime
+            return absoluteTimePaused
+        })
+    }
+
+    export const finish = (): Error | Presentation => {
+        if (currentPresentation.movements === null) {
+            console.error('[recordingApi.ts] finish() failed: no presentation data. try calling init() first')
+            return new Error('[recordingApi.ts] finish()')
+        }
+
+        // make copy and clear this class's data
+        // const returnCopy = { ...currentPresentation }
+        // clear()
+
+        // // return the copy
+        // return returnCopy
+
+        return currentPresentation
+    }
+
+    export const trackMovements = (panX: number, panY: number): Error | undefined => {
+        // ensure we are recording
+        if (!isRecording) {
+            console.error('[recordingApi.ts] pause() failed: recording is paused()')
+            return new Error('[recordingApi.ts] pause()')
+        }
+
+        // get the relative time
+        const timestamp = new Date().getTime()
+        const relativeTime = timestamp - absoluteStart
+
+        // make new movement struct
+        const movement: Movement = { time: relativeTime, panX, panY }
+        
+        // add that movement struct to the current presentation data
+        setCurrentPresenation(prevPres => {
+            const movements = [...prevPres.movements, movement]
+            return {...prevPres, movements}
+        })
+    }
+
+    // TOOD: need to pause all intervals if possible lol
+    // TODO: extract this into different class with pause and resume recording
+    export const followMovements = (presentation: Presentation, docView: CollectionFreeFormView): void => {
+        const document = docView.Document
+
+        const { movements } = presentation
+        movements.forEach(movement => {
+            const { panX, panY, time } = movement
+            // set the pan to what was stored
+            setTimeout(() => {
+                document._panX = panX;
+                document._panY = panY;
+            }, time)
+        })
+    }
+
+}
\ No newline at end of file
diff --git a/src/client/apis/recording/recordingApi.tsx b/src/client/apis/recording/recordingApi.tsx
deleted file mode 100644
index 97d4e2e7e..000000000
--- a/src/client/apis/recording/recordingApi.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { CollectionFreeFormView } from "../../views/collections/collectionFreeForm";
-import React, { useState } from "react";
-
-export function RecordingApi() {
-
-    type Movement = {
-        time: number,
-        panX: number,
-        panY: number,
-    }
-
-    type Presentation = {
-        movements: Array<Movement>
-        meta: Object,
-        startDate: Date | null,
-    }
-
-    const NULL_PRESENTATION = {
-        movements: [],
-        meta: {},
-        startDate: null,
-    }
-
-    const [currentPresentation, setCurrentPresenation] = useState<Presentation>(NULL_PRESENTATION)
-    const [isRecording, setIsRecording] = useState(false)
-    const [absoluteStart, setAbsoluteStart] = useState<number>(-1)
-
-    const initAndStart = (view: CollectionFreeFormView, meta?: Object): Error | undefined => {
-        // check if already init a presentation
-        if (currentPresentation.startDate !== null) {
-            console.error('[recordingApi.ts] start() failed: current presentation data exists. please call clear() first.')
-            return new Error('[recordingApi.ts] start()')
-        }
-
-        // (1a) get start date for presenation
-        const startDate = new Date()
-        // (1b) set start timestamp to absolute timestamp
-        setAbsoluteStart(startDate.getTime())
-
-        // TODO: (2) assign meta content
-
-        // (3) assign init values to currentPresenation
-        setCurrentPresenation({ ...currentPresentation, startDate })
-
-        // (4) set isRecording true to allow trackMovements
-        setIsRecording(true)
-    }
-
-    const clear = (): Error | undefined => {
-        // TODO: maybe archive the data?
-        if (isRecording) {
-            console.error('[recordingApi.ts] clear() failed: currently recording presentation. call pause() or finish() first')
-            return new Error('[recordingApi.ts] clear()')
-        }
-        // clear presenation data
-        setCurrentPresenation(NULL_PRESENTATION)
-
-        // clear isRecording
-        setIsRecording(false)
-
-        // clear absoluteStart
-        setAbsoluteStart(-1)
-    }
-
-    const pause = (): Error | undefined => {
-        if (currentPresentation.startDate === null) {
-            console.error('[recordingApi.ts] pause() failed: no presentation started. try calling init() first')
-            return new Error('[recordingApi.ts] pause(): no presenation')
-        }
-        // don't allow track movments
-        setIsRecording(false)
-
-        // set relativeStart to the pausedTimestamp
-        const timestamp = new Date().getTime()
-        setAbsoluteStart(timestamp)
-    }
-
-    const resume = () => {
-        if (currentPresentation.startDate === null) {
-            console.error('[recordingApi.ts] resume() failed: no presentation started. try calling init() first')
-            return new Error('[recordingApi.ts] resume()')
-        }
-
-        const timestamp = new Date().getTime()
-        const startTimestamp = currentPresentation.startDate?.getTime()
-        if (!startTimestamp) {
-            console.error('[recordingApi.ts] resume() failed: no presentation data. try calling init() first')
-            return new Error('[recordingApi.ts] pause()')
-        }
-
-        setAbsoluteStart(prevTime => { 
-            // const relativeUnpause = timestamp - absoluteStart
-            // const timePaused = relativeUnpause - prevTime
-            // return timePaused + absoluteStart
-            const absoluteTimePaused = timestamp - prevTime
-            return absoluteTimePaused
-        })
-    }
-
-    const finish = (): Error | Presentation => {
-        if (currentPresentation.movements === null) {
-            console.error('[recordingApi.ts] finish() failed: no presentation data. try calling init() first')
-            return new Error('[recordingApi.ts] finish()')
-        }
-
-        // make copy and clear this class's data
-        const returnCopy = { ...currentPresentation }
-        clear()
-
-        // return the copy
-        return returnCopy
-    }
-
-    const trackMovements = (panX: number, panY: number): Error | undefined => {
-        // ensure we are recording
-        if (!isRecording) {
-             console.error('[recordingApi.ts] pause() failed: recording is paused()')
-            return new Error('[recordingApi.ts] pause()')
-        }
-
-        // get the relative time
-        const timestamp = new Date().getTime()
-        const relativeTime = timestamp - absoluteStart
-
-        // make new movement struct
-        const movement: Movement = { time: relativeTime, panX, panY }
-        
-        // add that movement struct to the current presentation data
-        setCurrentPresenation(prevPres => {
-            const movements = [...prevPres.movements, movement]
-            return {...prevPres, movements}
-        })
-    }
-
-    // TOOD: need to pause all intervals if possible lol
-    // TODO: extract this into different class with pause and resume recording
-    const followMovements = (presentation: Presentation, docView: CollectionFreeFormView): void => {
-        const document = docView.Document
-
-        const { movements } = presentation
-        movements.forEach(movement => {
-            const { panX, panY, time } = movement
-            // set the pan to what was stored
-            setTimeout(() => {
-                document._panX = panX;
-                document._panY = panY;
-            }, time)
-        })
-    }
-
-    return (<></>)
-
-}
\ No newline at end of file
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
-- 
cgit v1.2.3-70-g09d2

