fixed playback loop to beginning and added click to go to currently playing

2 files changed, 37 insertions, 23 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index acd025fbd..67c8902f9 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -38,7 +38,7 @@ enum media_state {
 }
 @observer
 export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps, AudioDocument>(AudioDocument) {
-    @observable public static CurrentlyPlaying: AudioBox[];
+    @observable public static CurrentlyPlaying: Doc[];
 
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); }
     public static SetScrubTime = action((timeInMillisFrom1970: number) => {
@@ -63,6 +63,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     _stream: MediaStream | undefined;
     _play: any = null;
 
+    @observable _finished: boolean = false;
     @observable _volume: number = 1;
     @observable _muted: boolean = false;
     @observable _paused: boolean = false;
@@ -157,11 +158,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (!AudioBox.CurrentlyPlaying) {
             AudioBox.CurrentlyPlaying = [];
         }
-        if (AudioBox.CurrentlyPlaying.indexOf(this) == -1) {
-            AudioBox.CurrentlyPlaying.push(this);
+        if (AudioBox.CurrentlyPlaying.indexOf(this.Document) == -1) {
+            AudioBox.CurrentlyPlaying.push(this.Document);
         }
 
-        fullPlay = endTime ? fullPlay : true;
         clearTimeout(this._play); // abort any previous clip ending
         if (Number.isNaN(this._ele?.duration)) { // audio element isn't loaded yet... wait 1/2 second and try again
             setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500);
@@ -175,14 +175,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this.mediaState = media_state.Playing;
                 this._play = setTimeout(
                     () => {
-                        this.Pause(false);
-                        if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
+                        if (fullPlay) this._finished = true;
                         // removes from currently playing if playback has reached end of range marker
                         else this.removeCurrentlyPlaying();
+                        this.Pause();
                     },
                     (end - start) * 1000);
             } else {
-                this.Pause(false);
+                this.Pause();
             }
         }
     }
@@ -190,7 +190,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // removes from currently playing display
     @action
     removeCurrentlyPlaying = () => {
-        AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this), 1);
+        AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1);
     }
 
     // update the recording time
@@ -277,20 +277,26 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
 
     // for play button
     Play = (e?: any) => {
+        e?.stopPropagation?.();
+
         if (this.timeline && this._ele) {
             const eleTime = this._ele.currentTime;
-            const start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime;
+            let start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime;
+            if (this._finished) {
+                this._finished = false;
+                start = this.timeline.trimStart;
+            }
             this.playFrom(start, this.timeline.trimEnd, true);
-            e?.stopPropagation?.();
         }
     }
 
     // pause play back
     @action
-    Pause = (timeoutClear: boolean = true) => {
+    Pause = () => {
         this._ele?.pause();
         this.mediaState = media_state.Paused;
-        if (timeoutClear) clearTimeout(this._play); // prevents jump back to beginning when manually paused
+        if (!this._finished) clearTimeout(this._play);
+        AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1);
     }
 
     // creates a text document for dictation
@@ -318,7 +324,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // ref for updating time
     setRef = (e: HTMLAudioElement | null) => {
         e?.addEventListener("timeupdate", this.timecodeChanged);
-        e?.addEventListener("ended", () => this.Pause(false));
+        e?.addEventListener("ended", () => { this._finished = true; this.Pause() });
         this._ele = e;
     }
 
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index ec6519abd..fbefa02bc 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -76,6 +76,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @observable _playTimer?: NodeJS.Timeout = undefined;
     @observable _fullScreen = false;
     @observable _playing = false;
+    @observable _finished: boolean = false;
 
     @computed get links() { return DocListCast(this.dataDoc.links); }
     @computed get heightPercent() { return NumCast(this.layoutDoc._timelineHeightPercent, 100); }
@@ -120,15 +121,21 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @action public Play = (update: boolean = true) => {
         this._playing = true;
         const eleTime = this.player?.currentTime || 0;
-        const start = eleTime >= (this.timeline?.trimEnd || 0) ? this.timeline?.trimStart || 0 : eleTime;
-        try {
-            this._audioPlayer && this.player && (this._audioPlayer.currentTime = this.player?.currentTime);
-            update && this.player && this.playFrom(start, undefined, true);
-            update && this._audioPlayer?.play();
-            update && this._youtubePlayer?.playVideo();
-            this._youtubePlayer && !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 5));
-        } catch (e) {
-            console.log("Video Play Exception:", e);
+        if (this.timeline) {
+            let start = eleTime >= this.timeline.trimEnd || eleTime <= this.timeline.trimStart ? this.timeline.trimStart : eleTime;
+            if (this._finished) {
+                this._finished = false;
+                start = this.timeline.trimStart;
+            }
+            try {
+                this._audioPlayer && this.player && (this._audioPlayer.currentTime = this.player?.currentTime);
+                update && this.player && this.playFrom(start, undefined, true);
+                update && this._audioPlayer?.play();
+                update && this._youtubePlayer?.playVideo();
+                this._youtubePlayer && !this._playTimer && (this._playTimer = setInterval(this.updateTimecode, 5));
+            } catch (e) {
+                console.log("Video Play Exception:", e);
+            }
         }
         this.updateTimecode();
     }
@@ -157,6 +164,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this._youtubePlayer && SelectionManager.DeselectAll(); // if we don't deselect the player, then we get an annoying YouTube spinner I guess telling us we're paused.
         this._playTimer = undefined;
         this.updateTimecode();
+        if (!this._finished) clearTimeout(this._playRegionTimer);;
     }
 
     @action public FullScreen = () => {
@@ -407,7 +415,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this._playing = true;
                 this._playRegionTimer = setTimeout(
                     () => {
-                        if (fullPlay) this.setPlayheadTime(this.timeline?.trimStart || 0);
+                        if (fullPlay) this._finished = true;
                         this.Pause();
                     }, this._playRegionDuration * 1000);
             } else {