currently playing indicator complete

1 files changed, 22 insertions, 15 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 67c8902f9..c33a74325 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -21,7 +21,6 @@ import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent";
 import "./AudioBox.scss";
 import { FieldView, FieldViewProps } from "./FieldView";
-import { time, timeStamp } from "console";
 
 declare class MediaRecorder {
     constructor(e: any); // whatever MediaRecorder has
@@ -86,6 +85,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     get timeline() { return this._stackedTimeline.current; } // can't be computed since it's not observable
 
     componentWillUnmount() {
+        this.removeCurrentlyPlaying();
         this._dropDisposer?.();
         Object.values(this._disposers).forEach((disposer) => disposer?.());
         const ind = DocUtils.ActiveRecordings.indexOf(this);
@@ -99,7 +99,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (this.path) {
             this.mediaState = media_state.Paused;
             this.setPlayheadTime(NumCast(this.layoutDoc.clipStart));
-            this.timecodeChanged();
         } else {
             this.mediaState = undefined as any as media_state;
         }
@@ -154,14 +153,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // play back the audio from time
     @action
     playFrom = (seekTimeInSeconds: number, endTime?: number, fullPlay: boolean = false) => {
-        // IN PROGRESS: current attempt to make interface for keeping track of audio that is playing
-        if (!AudioBox.CurrentlyPlaying) {
-            AudioBox.CurrentlyPlaying = [];
-        }
-        if (AudioBox.CurrentlyPlaying.indexOf(this.Document) == -1) {
-            AudioBox.CurrentlyPlaying.push(this.Document);
-        }
-
         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);
@@ -173,6 +164,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this._ele.currentTime = start;
                 this._ele.play();
                 this.mediaState = media_state.Playing;
+                this.addCurrentlyPlaying();
                 this._play = setTimeout(
                     () => {
                         if (fullPlay) this._finished = true;
@@ -190,7 +182,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // removes from currently playing display
     @action
     removeCurrentlyPlaying = () => {
-        AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1);
+        if (AudioBox.CurrentlyPlaying) {
+            const index = AudioBox.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc);
+            index !== -1 && AudioBox.CurrentlyPlaying.splice(index, 1);
+        }
+    }
+
+    @action
+    addCurrentlyPlaying = () => {
+        if (!AudioBox.CurrentlyPlaying) {
+            AudioBox.CurrentlyPlaying = [];
+        }
+        if (AudioBox.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc) == -1) {
+            AudioBox.CurrentlyPlaying.push(this.layoutDoc.doc as Doc);
+        }
     }
 
     // update the recording time
@@ -293,10 +298,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // pause play back
     @action
     Pause = () => {
-        this._ele?.pause();
-        this.mediaState = media_state.Paused;
-        if (!this._finished) clearTimeout(this._play);
-        AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this.Document), 1);
+        if (this._ele) {
+            this._ele.pause();
+            this.mediaState = media_state.Paused;
+            if (!this._finished) clearTimeout(this._play);
+            this.removeCurrentlyPlaying();
+        }
     }
 
     // creates a text document for dictation