fix the glitchy videoBox (i think), now a fairly smooth experience :)

2 files changed, 25 insertions, 19 deletions

diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts
index 4122908cc..6a5746c0b 100644
--- a/src/client/util/ReplayMovements.ts
+++ b/src/client/util/ReplayMovements.ts
@@ -35,6 +35,7 @@ export class ReplayMovements {
             // console.warn('[recordingApi.ts] pauseMovements(): already on paused');
             return;
         }
+        Doc.UserDoc().presentationMode = 'none';
 
         this.isPlaying = false
         // TODO: set userdoc presentMode to browsing
@@ -77,7 +78,6 @@ export class ReplayMovements {
 
     // should be called from interacting with the screen
     pauseFromInteraction = () => {
-        Doc.UserDoc().presentationMode = 'none';
         this.videoBox?.Pause();
 
         this.pauseMovements();
@@ -148,6 +148,7 @@ export class ReplayMovements {
 
     endPlayingPresentation = () => {
         this.isPlaying = false;
+        Doc.UserDoc().presentationMode = 'none';
     }
 
     public playMovements = (presentation: Presentation, docIdtoDoc: Map<string, Doc>, timeViewed: number = 0) => {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index c2da1f456..a50f57617 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -206,7 +206,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
       }
 
       // pauses video
-      @action public Pause = (update: boolean = true) => {
+    @action public Pause = (update: boolean = true) => {
+          if (!this._playing) return;
             this._playing = false;
             this.removeCurrentlyPlaying();
             try {
@@ -491,7 +492,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
       // for play button
 
       onPlayDown = () => {
-            console.log("PLAY DOWN");
             this._playing ? this.Pause() : this.Play();
       }
 
@@ -573,11 +573,16 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             docs.forEach(doc => doc._timecodeToHide = (doc._timecodeToShow = curTime) + 1);
             return this.addDocument(doc);
       }
+    
+    @action
+    private setPlaying = (b: boolean) => {
+        this._playing = b;
+    }
 
 
       // play back the audio from seekTimeInSeconds, fullPlay tells whether clip is being played to end vs link range
       @action
-      playFrom = (seekTimeInSeconds: number, endTime?: number, fullPlay: boolean = false) => {
+      playFrom = async (seekTimeInSeconds: number, endTime?: number, fullPlay: boolean = false) => {
             clearTimeout(this._playRegionTimer);
             if (Number.isNaN(this.player?.duration)) {
                   setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500);
@@ -591,21 +596,21 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                   if (seekTimeInSeconds >= 0 && (this.timeline?.trimStart || 0) <= end && seekTimeInSeconds <= (this.timeline?.trimEnd || this.rawDuration)) {
                         this.player.currentTime = start;
                         this._audioPlayer && (this._audioPlayer.currentTime = seekTimeInSeconds);
-                        this.player.play();
-                        this._audioPlayer?.play();
-                        this._playing = true;
-                        this.addCurrentlyPlaying();
-                        this._playRegionTimer = setTimeout(
-                              () => {
-                                    // need to keep track of if end of clip is reached so on next play, clip restarts
-                                    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();
-                              }, playRegionDuration * 1000);
+                        this.player.play().then(() => {
+                            this._audioPlayer?.play();
+                            this.setPlaying(true);
+                            this.addCurrentlyPlaying();
+                            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;
+                                        }
+                                        // removes from currently playing if playback has reached end of range marker
+                                        else this.removeCurrentlyPlaying();
+                                        this.Pause();
+                                }, playRegionDuration * 1000);
+                        });
                   } else {
                         this.Pause();
                   }