change to using mobx to see when videoBox is paused or played

2 files changed, 57 insertions, 39 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;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index cf3282d2f..ed9bcf29b 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -144,13 +144,23 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         this.layoutDoc._height = NumCast(this.layoutDoc._width) / youtubeaspect;
                   }
             }
-            this.player && this.setPlayheadTime(0);
+          this.player && this.setPlayheadTime(0);
+          
+          // if presentation data exists, pass it to the recordingPi
+          if (this.presentation != null) {
+            RecordingApi.Instance.setVideoBox(this);  
+          }
       }
 
       componentWillUnmount() {
-            this.removeCurrentlyPlaying();
-            this.Pause();
-            Object.keys(this._disposers).forEach(d => this._disposers[d]?.());
+        this.removeCurrentlyPlaying();
+        this.Pause();
+          Object.keys(this._disposers).forEach(d => this._disposers[d]?.());
+          
+          // dispose the recordingApi's observer
+          if (this.presentation != null) {
+            RecordingApi.Instance.removeVideoBox();  
+          }
       }
 
 
@@ -162,13 +172,13 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             // }
 
             // if presentation isn't null, call followmovements on the recording api
-            if (this.presentation) {
-                  console.log("presentation isn't null")
-                  const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this);
-                  err && console.log(err)
-            } else {
-                  console.log("presentation is null")
-            }
+            // if (this.presentation) {
+            //       console.log("presentation isn't null")
+            //       const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this);
+            //       err && console.log(err)
+            // } else {
+            //       console.log("presentation is null")
+            // }
 
             this._playing = true;
             const eleTime = this.player?.currentTime || 0;
@@ -211,11 +221,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
       // pauses video
       @action public Pause = (update: boolean = true) => {
-            if (this.presentation) {
-                  console.log('VideoBox : Pause');
-                  const err = RecordingApi.Instance.pauseMovements();
-                  err && console.log(err);
-            }
+            // if (this.presentation) {
+            //       console.log('VideoBox : Pause');
+            //       const err = RecordingApi.Instance.pauseMovements();
+            //       err && console.log(err);
+            // }
 
             this._playing = false;
             this.removeCurrentlyPlaying();
@@ -437,12 +447,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                               <video key="video" autoPlay={this._screenCapture} ref={this.setVideoRef} style={this._fullScreen ? this.fullScreenSize() : {}}
                                     onCanPlay={this.videoLoad}
                                     controls={VideoBox._nativeControls}
-                                    onPlay={() => {
-                                          // console.log("PLAY from CONTENT")
-                                          //this.Play()
-                                    }}
+                                    onPlay={() => this.Play()}
                                     onSeeked={this.updateTimecode}
-                                    // onPause={() => this.Pause() }
+                                    onPause={() => this.Pause() }
                                     onClick={e => e.preventDefault()}>
                                     <source src={field.url.href} type="video/mp4" />
                                     Not supported.