updated to subtracting timestamps for better smoothness

2 files changed, 15 insertions, 14 deletions

diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts
index c4f76282c..ab7642a90 100644
--- a/src/client/util/RecordingApi.ts
+++ b/src/client/util/RecordingApi.ts
@@ -11,7 +11,7 @@ type Movement = {
 type Presentation = {
     movements: Array<Movement>
     meta: Object,
-    startDate: Date | null,
+    startTime: number | null,
 }
 
 export class RecordingApi {
@@ -19,7 +19,7 @@ export class RecordingApi {
     private static NULL_PRESENTATION: Presentation = {
         movements: [],
         meta: {},
-        startDate: null,
+        startTime: null,
     }
 
     // instance variables
@@ -50,7 +50,7 @@ export class RecordingApi {
 
     // little helper :)
     private get isInitPresenation(): boolean {
-        return this.currentPresentation.startDate === null
+        return this.currentPresentation.startTime === null
     }
 
     public start = (meta?: Object): Error | undefined => {
@@ -63,12 +63,12 @@ export class RecordingApi {
         // (1a) get start date for presenation
         const startDate = new Date()
         // (1b) set start timestamp to absolute timestamp
-        this.absoluteStart = startDate.getTime()
+        // this.absoluteStart = startDate.getTime()
 
         // (2) assign meta content if it exists
         this.currentPresentation.meta = meta || {}
         // (3) assign start date to currentPresenation
-        this.currentPresentation.startDate = startDate
+        this.currentPresentation.startTime = startDate.getTime()
         // (4) set isRecording true to allow trackMovements
         this.isRecording = true
     }
@@ -89,15 +89,15 @@ export class RecordingApi {
         // clear absoluteStart
         this.absoluteStart = -1
         // clear the disposeFunc
-        this.disposeFunc = null
+        this.removeRecordingFFView()
 
         return presCopy;
     }
 
     public pause = (): Error | undefined => {
-        if (this.currentPresentation.startDate === null) {
+        if (this.isInitPresenation) {
             console.error('[recordingApi.ts] pause() failed: no presentation started. try calling init() first')
-            return new Error('[recordingApi.ts] pause(): no presenation')
+            return new Error('[recordingApi.ts] pause(): no presentation')
         }
         // don't allow track movments
         this.isRecording = false
@@ -109,7 +109,7 @@ export class RecordingApi {
 
     public resume = () => {
         const timestamp = new Date().getTime()
-        const startTimestamp = this.currentPresentation.startDate?.getTime()
+        const startTimestamp = this.currentPresentation.startTime
         if (!startTimestamp) {
             console.error('[recordingApi.ts] resume() failed: no presentation data. try calling start() first')
             return new Error('[recordingApi.ts] pause()')
@@ -137,12 +137,11 @@ export class RecordingApi {
             return new Error('[recordingApi.ts] pause()')
         }
 
-        // get the relative time
+        // get the time
         const timestamp = new Date().getTime()
-        const relativeTime = timestamp - this.absoluteStart
 
         // make new movement struct
-        const movement: Movement = { time: relativeTime, panX, panY }
+        const movement: Movement = { time: timestamp, panX, panY }
         
         // add that movement to the current presentation data's movement array
         this.currentPresentation.movements.push(movement)
@@ -211,7 +210,7 @@ export class RecordingApi {
     }
 
     public followMovements = (presentation: Presentation): undefined | Error => {
-        if (presentation.startDate === null || this.playFFView === null) {
+        if (presentation.startTime === null || this.playFFView === null) {
             return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view')
         }
 
@@ -223,7 +222,7 @@ export class RecordingApi {
             setTimeout(() => {
                 document._panX = panX;
                 document._panY = panY;
-            }, time)
+            }, time - presentation.startTime)
         })
     }
     // Unfinished code for tracing multiple free form views
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 870ef87d7..51cc44941 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -176,6 +176,7 @@ export function RecordingView(props: IRecordingViewProps) {
                   videoChunks = []
                   setRecording(false);
                 setFinished(true);
+                console.log("finished recording")
                 RecordingApi.Instance.pause();
             }
 
@@ -187,6 +188,7 @@ export function RecordingView(props: IRecordingViewProps) {
                   // reset the temporary chunks
                   videoChunks = []
                 setRecording(false);
+                console.log("paused recording")
                 RecordingApi.Instance.pause();
             }