From 1241c614324124e61cd1c2b0f8159122ee36ffd8 Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-5.devices.brown.edu>
Date: Wed, 15 Jun 2022 17:16:40 -0400
Subject: think i got basic videoplayer good enough for demo. should meet with
 mehek to fix some bugs i found

---
 src/client/views/nodes/VideoBox.tsx | 58 +++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index a50f57617..794d363f1 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -150,6 +150,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
           if (this.presentation != null) {
             ReplayMovements.Instance.setVideoBox(this);  
           }
+
+          this._playing = false;
       }
 
       componentWillUnmount() {
@@ -165,15 +167,19 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
 
       // plays video
-      @action public Play = (update: boolean = true) => {
-            this._playing = true;
+    @action public Play = (update: boolean = true) => {
+        // BUGFIXES: only run if video is not already playing & dont set isplaying to true until that async call
+        if (this._playing) return;
+        // requires a promise for native videoplayer to be set to true
+        if (!this.player) this._playing = true;
             const eleTime = this.player?.currentTime || 0;
             if (this.timeline) {
                   let start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime;
 
                   if (this._finished) {
-                        // restarts video if reached end on previous play
-                        this._finished = false;
+                    // restarts video if reached end on previous play
+                      this._finished = false;
+                      console.log('trim start', this.timeline.trimStart);
                         start = this.timeline.trimStart;
                   }
 
@@ -200,6 +206,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
             this.player && (this.player.currentTime = time);
             this._audioPlayer && (this._audioPlayer.currentTime = time);
             // TODO: revisit this and clean it
+            console.log('seek', time);
             if ((this.player?.currentTime || -1) < this.rawDuration) {
                   this._finished = false;
             }
@@ -335,8 +342,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
       // updates video time
       @action
-      updateTimecode = () => {
-            this.player && (this.layoutDoc._currentTimecode = this.player.currentTime);
+      updateTimecode = (e? : any) => {
+          // BUGFIX: if seeking when paused, no longer finished
+          // ok this is constantly fired all the time
+        //   if (e && !this._playing && this.player && this.player.paused) {
+        //       console.log('updateTimecode: seeking when paused', e);
+        //       this.player.currentTime = e.target.currentTime;
+        //       this._finished = false;
+        //   }
+          this.player && (this.layoutDoc._currentTimecode = this.player.currentTime);
             try {
                   this._youtubePlayer && (this.layoutDoc._currentTimecode = this._youtubePlayer.getCurrentTime?.());
             } catch (e) {
@@ -491,7 +505,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
       // for play button
 
-      onPlayDown = () => {
+    onPlayDown = () => {
+          console.log('onPlayDown', this._playing);
             this._playing ? this.Pause() : this.Play();
       }
 
@@ -593,25 +608,32 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                   const start = Math.max(this.timeline?.trimStart ?? 0, seekTimeInSeconds);
                   const playRegionDuration = end - start;
                   // checks if times are within clip range
-                  if (seekTimeInSeconds >= 0 && (this.timeline?.trimStart || 0) <= end && seekTimeInSeconds <= (this.timeline?.trimEnd || this.rawDuration)) {
-                        this.player.currentTime = start;
-                        this._audioPlayer && (this._audioPlayer.currentTime = seekTimeInSeconds);
+                if (seekTimeInSeconds >= 0 && (this.timeline?.trimStart || 0) <= end && seekTimeInSeconds <= (this.timeline?.trimEnd || this.rawDuration)) {
+                    this.player.currentTime = start;
+                    this._audioPlayer && (this._audioPlayer.currentTime = seekTimeInSeconds);
+                    // BUGFIX: video.play is async, so we need to wait for it to finish
+                    console.log('playFrom');
                         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();
+                                    // need to keep track of if end of clip is reached so on next play, clip restarts
+                                    if (fullPlay) {
+                                        this._finished = true;
+                                        // if (this.player) {
+                                        //     this.player.currentTime = 0;
+                                        //     this.updateTimecode();
+                                        // }
+                                        
+                                    }
+                                    // removes from currently playing if playback has reached end of range marker
+                                    else this.removeCurrentlyPlaying();
+                                    this.Pause();
                                 }, playRegionDuration * 1000);
                         });
-                  } else {
+                } else {
                         this.Pause();
                   }
             }
-- 
cgit v1.2.3-70-g09d2