fix some bugs and start position. ready for demo :)

2 files changed, 60 insertions, 21 deletions

diff --git a/src/client/util/RecordingApi.ts b/src/client/util/RecordingApi.ts
index fec579486..7592199eb 100644
--- a/src/client/util/RecordingApi.ts
+++ b/src/client/util/RecordingApi.ts
@@ -199,18 +199,19 @@ export class RecordingApi {
         return this.videoBox === null
     }
 
-    private _isPlaying = false;
+    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')
         }
-
+        
         if (this._isPlaying) {
             //return new Error('[recordingApi.ts] playMovements() failed: already playing')
             return
         }
         this._isPlaying = true;
+        console.log('setWatching lol')
         Doc.UserDoc().presentationMode = 'watching';
 
         // TODO: consider this bug at the end of the clip on seek
@@ -219,24 +220,43 @@ export class RecordingApi {
 
         const document = this.playFFView.Document
         const { movements } = presentation
-        this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => {
-            const { panX, panY, time } = movement
 
+        const filteredMovements = movements.filter(movement => movement.time > timeViewed * 1000)
+        
+        document._panX = filteredMovements[0].panX;
+        document._panY = filteredMovements[0].panY;
+        
+        this.timers = filteredMovements.map(movement => {
+            const { panX, panY, time } = movement
             const timeDiff = time - timeViewed*1000
-            if (timeDiff < 0) return arr;
-
-            // set the pan to what was stored
-            arr.push(setTimeout(() => {
+            return setTimeout(() => {
                 document._panX = panX;
                 document._panY = panY;
                 if (movement === movements[movements.length - 1]) {
-                    this._isPlaying = false;
-                    Doc.UserDoc().presentationMode = 'none';
+                    // stuff for recording API
+                    RecordingApi.Instance._isPlaying = false;
                 }
-            }, timeDiff))
-            return arr;
+            }, timeDiff)
         }, [])
 
+        // this.timers = movements.reduce((arr: NodeJS.Timeout[], movement) => {
+        //     const { panX, panY, time } = movement
+
+        //     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;
+        //         if (movement === movements[movements.length - 1]) {
+        //             // stuff for recording API
+        //             RecordingApi.Instance._isPlaying = false;
+        //         }
+        //     }, timeDiff))
+        //     return arr;
+        // }, [])
+
     }
 
     // Unfinished code for tracing multiple free form views
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 8aecc2483..f449ae429 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -154,10 +154,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // plays video
     @action public Play = (update: boolean = true) => {
-        if (Doc.UserDoc().presentationMode === 'watching' && !this._playing) {
-            console.log('VideoBox : Play : presentation mode', this._playing);
-            return;
-        }
+        // if (Doc.UserDoc().presentationMode === 'watching' && !this._playing) {
+        //     console.log('VideoBox : Play : presentation mode', this._playing);
+        //     return;
+        // }
 
         // if presentation isn't null, call followmovements on the recording api
         if (this.presentation) {
@@ -198,11 +198,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
         this.player && (this.player.currentTime = time);
         this._audioPlayer && (this._audioPlayer.currentTime = time);
+        // TODO: revisit this and clean it
+        if ((this.player?.currentTime || -1) < this.rawDuration) {
+            this._finished = false;
+        }
     }
 
     // pauses video
     @action public Pause = (update: boolean = true) => {
         if (this.presentation) {
+            console.log('VideoBox : Pause');
             const err = RecordingApi.Instance.pauseMovements();
             err && console.log(err);
         }
@@ -347,6 +352,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // sets video element ref
     @action
     setVideoRef = (vref: HTMLVideoElement | null) => {
+        console.log("SEt video ref " +  vref)
         this._videoRef = vref;
         if (vref) {
             this._videoRef!.ontimeupdate = this.updateTimecode;
@@ -354,7 +360,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             // vref.onfullscreenchange = action((e) => this._fullScreen = vref.webkitDisplayingFullscreen);
             this._disposers.reactionDisposer?.();
             this._disposers.reactionDisposer = reaction(() => NumCast(this.layoutDoc._currentTimecode),
-                time => !this._playing && (vref.currentTime = time), { fireImmediately: true });
+                time => {
+                    !this._playing && (vref.currentTime = time);
+                    console.log("vref time = " + vref.currentTime)
+                }, { fireImmediately: true });
         }
     }
 
@@ -410,9 +419,12 @@ 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={() => this.Play()}
+                        onPlay={() => {
+                            // console.log("PLAY from CONTENT")
+                            //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.
@@ -472,7 +484,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
 
     // for play button
-    onPlayDown = () => this._playing ? this.Pause() : this.Play();
+
+    onPlayDown = () => {
+        console.log("PLAY DOWN");
+        this._playing ? this.Pause() : this.Play();
+    }
 
     // for fullscreen button
     onFullDown = (e: React.PointerEvent) => {
@@ -577,7 +593,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this._playRegionTimer = setTimeout(
                     () => {
                         // need to keep track of if end of clip is reached so on next play, clip restarts
-                        if (fullPlay) this._finished = true;
+                        if (fullPlay) {
+                            Doc.UserDoc().presentationMode = 'none';
+                            this._finished = true;
+                         }
                         // removes from currently playing if playback has reached end of range marker
                         else this.removeCurrentlyPlaying();
                         this.Pause();