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

1 files changed, 28 insertions, 21 deletions

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.