1 files changed, 29 insertions, 18 deletions

diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts
index 4bbaa9a79..48ea12fd9 100644
--- a/src/client/util/RecordingApi.ts
+++ b/src/client/util/RecordingApi.ts
@@ -61,7 +61,7 @@ export class RecordingApi {
         this.tabChangeDisposeFunc = null;
 
         // for now, set playFFView
-        this.playFFView = null;
+        // this.playFFView = null;
         this.timers = null;
     }
 
@@ -232,19 +232,11 @@ 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;
-
-    public setPlayFFView = (view: CollectionFreeFormView): void => {
-        this.playFFView = view
-    }
+    private timers: NodeJS.Timeout[] | null; 
 
     // pausing movements will dispose all timers that are planned to replay the movements
     // play movemvents will recreate them when the user resumes the presentation
     public pauseMovements = (): undefined | Error => {
-        if (this.playFFView === null) {
-            // return new Error('[recordingApi.ts] pauseMovements() failed: no view')
-        }
 
         if (!this._isPlaying) {
             //return new Error('[recordingApi.ts] pauseMovements() failed: not playing')
@@ -257,21 +249,41 @@ export class RecordingApi {
         // this.videoBox = null;
     }
 
-    private videoBox: VideoBox | null = null;
+    private videoBoxDisposeFunc: IReactionDisposer | null = null;
+
+    setVideoBox = (videoBox: VideoBox) => {
+        console.log('setVideoBox', videoBox);
+        if (this.videoBoxDisposeFunc !== null) { console.warn('setVideoBox on already videoBox'); this.videoBoxDisposeFunc(); }
+        this.videoBoxDisposeFunc =
+            reaction(() => ({ playing: videoBox._playing, timeViewed: videoBox.player?.currentTime || 0 }),
+                ({ playing, timeViewed }) => 
+                    playing ? this.playMovements(videoBox.presentation, timeViewed) : this.pauseMovements()
+                );
+    }
+
+    removeVideoBox = () => {
+        if (this.videoBoxDisposeFunc == null) { console.warn('removeVideoBox on null videoBox'); return; }
+        this.videoBoxDisposeFunc();
+    }
+
 
     // by calling pause on the VideoBox, the pauseMovements will be called
-    public pauseVideoAndMovements = (): boolean => {
-        this.videoBox?.Pause()
+    public pauseVideoAndMovements = () => {
+        // this.videoBox?.Pause()
 
         this.pauseMovements()
-        return this.videoBox == null
+        // return this.videoBox == null
     }
 
+
+
     public _isPlaying = false;
 
     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')
+        console.log('playMovements', presentation, timeViewed, videoBox);
+
+        if (presentation.movements === null) { //|| this.playFFView === null) {
+            return new Error('[recordingApi.ts] followMovements() failed: no presentation data')
         }
         if (this._isPlaying) return;
 
@@ -279,13 +291,12 @@ export class RecordingApi {
         Doc.UserDoc().presentationMode = 'watching';
 
         // TODO: consider this bug at the end of the clip on seek
-        this.videoBox = videoBox || null;
+        // this.videoBox = videoBox || null;
 
         // only get the movements that are remaining in the video time left
         const filteredMovements = presentation.movements.filter(movement => movement.time > timeViewed * 1000)
 
         // helper to replay a movement
-        const document = this.playFFView
         let preScale = -1;
         const zoomAndPan = (movement: Movement, document: CollectionFreeFormView) => {
             const { panX, panY, scale } = movement;