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

1 files changed, 19 insertions, 13 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;
     }