Pause works with presentation now.

1 files changed, 49 insertions, 37 deletions

diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts
index e779a4ab1..ee427e5df 100644
--- a/src/client/util/RecordingApi.ts
+++ b/src/client/util/RecordingApi.ts
@@ -2,6 +2,7 @@ import { CollectionFreeFormView } from "../views/collections/collectionFreeForm"
 import { IReactionDisposer, observable, reaction } from "mobx";
 import { NumCast } from "../../fields/Types";
 import { Doc } from "../../fields/Doc";
+import { VideoBox } from "../views/nodes/VideoBox";
 
 type Movement = {
     time: number,
@@ -10,17 +11,15 @@ type Movement = {
 }
 
 type Presentation = {
-    movements: Array<Movement>
+    movements: Array<Movement> | null
     meta: Object,
-    startTime: number | null,
 }
 
 export class RecordingApi {
 
     private static NULL_PRESENTATION: Presentation = {
-        movements: [],
+        movements: null,
         meta: {},
-        startTime: null,
     }
 
     // instance variables
@@ -52,7 +51,7 @@ export class RecordingApi {
 
     // little helper :)
     private get isInitPresenation(): boolean {
-        return this.currentPresentation.startTime === null
+        return this.currentPresentation.movements === null
     }
 
     public start = (meta?: Object): Error | undefined => {
@@ -68,12 +67,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.startTime = startDate.getTime()
+        this.currentPresentation.movements = []
         // (4) set isRecording true to allow trackMovements
         this.isRecording = true
     }
@@ -110,39 +109,35 @@ export class RecordingApi {
         // don't allow track movments
         this.isRecording = false
 
-        // set relativeStart to the pausedTimestamp
+        // set adjust absoluteStart to add the time difference
         const timestamp = new Date().getTime()
-        this.absoluteStart = timestamp
+        this.absoluteStart = timestamp - this.absoluteStart
     }
 
     public resume = () => {
-        const timestamp = new Date().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()')
-        }
-
-        // update absoluteStart to bridge the paused time
-        const absoluteTimePaused = timestamp - this.absoluteStart
-        this.absoluteStart = absoluteTimePaused
+        this.isRecording = true
+        // set absoluteStart to the pausedTimestamp
+        this.absoluteStart = new Date().getTime() - this.absoluteStart
     }
 
     private trackMovements = (panX: number, panY: number): Error | undefined => {
         // ensure we are recording
         if (!this.isRecording) {
-            console.error('[recordingApi.ts] trackMovements() failed: recording is paused()')
             return new Error('[recordingApi.ts] trackMovements()')
         }
+        // check to see if the presetation is init
+        if (this.isInitPresenation) {
+            return new Error('[recordingApi.ts] trackMovements(): no presentation')
+        }
 
         // get the time
-        const timestamp = new Date().getTime()
-
-        // make new movement struct
-        const movement: Movement = { time: timestamp, panX, panY }
+        const time = new Date().getTime() - this.absoluteStart
+        // make new movement object
+        console.log(time)
+        const movement: Movement = { time, panX, panY }
         
         // add that movement to the current presentation data's movement array
-        this.currentPresentation.movements.push(movement)
+        this.currentPresentation.movements && this.currentPresentation.movements.push(movement)
     }
 
     // instance variable for the FFView
@@ -172,6 +167,7 @@ export class RecordingApi {
     }
 
     // TODO: extract this into different class with pause and resume recording
+    // TODO: store the FFview with the movements
     private playFFView: CollectionFreeFormView | null;
     private timers: NodeJS.Timeout[] | null;
 
@@ -185,42 +181,58 @@ export class RecordingApi {
         }
 
         if (!this._isPlaying) {
-            return new Error('[recordingApi.ts] pauseMovements() failed: not playing')
+            //return new Error('[recordingApi.ts] pauseMovements() failed: not playing')
+            return
         }
+        this._isPlaying = false
         // TODO: set userdoc presentMode to browsing
-        //console.log('cleared timers', this.timers)
-        console.log(this.timers?.map(timer => clearTimeout(timer)))
-        console.log('[recordingApi.ts] pauseMovements()')
+        this.timers?.map(timer => clearTimeout(timer))
 
-        this._isPlaying = false
+        this.videoBox = null;
+    }
+    
+    private videoBox: VideoBox | null = null;
+
+    // by calling pause on the VideoBox, the pauseMovements will be called
+    public pauseVideoAndMovements = (): boolean => {
+        this.videoBox?.Pause()
+        return this.videoBox === null
     }
 
     private _isPlaying = false;
 
-    public playMovements = (presentation: Presentation, timeViewed: number = 0): undefined | Error => {
-        if (presentation.startTime === null || this.playFFView === null) {
+    public playMovements = (presentation: Presentation, timeViewed: number = 0, videoBox?: VideoBox): undefined | Error => {
+        if (presentation.movements === null || this.playFFView === null) {
             return new Error('[recordingApi.ts] followMovements() failed: no presentation data or no view')
         }
 
         if (this._isPlaying) {
-            return new Error('[recordingApi.ts] playMovements() failed: already playing')
+            //return new Error('[recordingApi.ts] playMovements() failed: already playing')
+            return
         }
         this._isPlaying = true;
+        // Doc.UserDoc().presentationMode = 'watching';
 
-        console.log(timeViewed)
+        // TODO: consider this bug at the end of the clip on seek
+        console.log(timeViewed, videoBox?.player?.currentTime)
+        this.videoBox = videoBox || null;
 
         const document = this.playFFView.Document
         const { movements } = presentation
         this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => {
             const { panX, panY, time } = movement
-            const absoluteTime = time - presentation.startTime - timeViewed*1000
-            if (absoluteTime < 0) return arr;
+
+            const timeDiff = time - timeViewed*1000
+            if (timeDiff < 0) return arr;
 
             // set the pan to what was stored
             arr.push(setTimeout(() => {
                 document._panX = panX;
                 document._panY = panY;
-            }, absoluteTime))
+                // if (movement === movements[movements.length - 1]) {
+                //     this._isPlaying = false;
+                // }
+            }, timeDiff))
             return arr;
         }, [])
     }