cleaned up recentlyPlaying to allow clips to be turned on/off w/o navigating to them.

4 files changed, 48 insertions, 19 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 81dc3aafd..3966aecf6 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -38,7 +38,7 @@ declare class MediaRecorder {
     constructor(e: any); // whatever MediaRecorder has
 }
 
-enum media_state {
+export enum media_state {
     PendingRecording = 'pendingRecording',
     Recording = 'recording',
     Paused = 'paused',
@@ -201,8 +201,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // removes from currently playing display
     @action
     removeCurrentlyPlaying = () => {
-        if (CollectionStackedTimeline.CurrentlyPlaying) {
-            const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc);
+        const docView = this.props.DocumentView?.();
+        if (CollectionStackedTimeline.CurrentlyPlaying && docView) {
+            const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(docView);
             index !== -1 && CollectionStackedTimeline.CurrentlyPlaying.splice(index, 1);
         }
     };
@@ -210,11 +211,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // adds doc to currently playing display
     @action
     addCurrentlyPlaying = () => {
+        const docView = this.props.DocumentView?.();
         if (!CollectionStackedTimeline.CurrentlyPlaying) {
             CollectionStackedTimeline.CurrentlyPlaying = [];
         }
-        if (CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc) === -1) {
-            CollectionStackedTimeline.CurrentlyPlaying.push(this.layoutDoc);
+        if (docView && CollectionStackedTimeline.CurrentlyPlaying.indexOf(docView) === -1) {
+            CollectionStackedTimeline.CurrentlyPlaying.push(docView);
         }
     };
 
@@ -329,18 +331,28 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     };
 
-    // pause play back
+    IsPlaying = () => this.mediaState === media_state.Playing;
+    TogglePause = () => {
+        if (this.mediaState === media_state.Paused) this.Play();
+        else this.pause();
+    };
+    // pause playback without removing from the playback list to allow user to play it again.
     @action
-    Pause = () => {
+    pause = () => {
         if (this._ele) {
             this._ele.pause();
             this.mediaState = media_state.Paused;
 
             // if paused in the middle of playback, prevents restart on next play
             if (!this._finished) clearTimeout(this._play);
-            this.removeCurrentlyPlaying();
         }
     };
+    // pause playback and remove from playback list
+    @action
+    Pause = () => {
+        this.pause();
+        this.removeCurrentlyPlaying();
+    };
 
     // for dictation button, creates a text document for dictation
     onFile = (e: any) => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8257c9c49..912bdd8eb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -132,6 +132,8 @@ export interface DocComponentView {
     setKeyFrameEditing?: (set: boolean) => void; // whether the document is in keyframe editing mode (if it is, then all hidden documents that are not active at the keyframe time will still be shown)
     playFrom?: (time: number, endTime?: number) => void;
     Pause?: () => void;
+    IsPlaying?: () => boolean;
+    TogglePause?: (keep?: boolean) => void;
     setFocus?: () => void;
     componentUI?: (boundsLeft: number, boundsTop: number) => JSX.Element | null;
     incrementalRendering?: () => void;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index c26562e7c..1f2eee086 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -243,10 +243,20 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
+    IsPlaying = () => this._playing;
+    _keepCurrentlyPlaying = false;
+    TogglePause = () => {
+        if (!this._playing) this.Play();
+        else {
+            this._keepCurrentlyPlaying = true;
+            this.pause();
+            setTimeout(() => (this._keepCurrentlyPlaying = false));
+        }
+    };
+
     // pauses video
-    @action public Pause = (update: boolean = true) => {
+    @action public pause = (update: boolean = true) => {
         this._playing = false;
-        this.removeCurrentlyPlaying();
         try {
             update && this.player?.pause();
             update && this._audioPlayer?.pause();
@@ -264,6 +274,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
         this._playRegionTimer = undefined;
     };
+    @action Pause = (update: boolean = true) => {
+        this.pause(update);
+        !this._keepCurrentlyPlaying && this.removeCurrentlyPlaying();
+    };
 
     // toggles video full screen
     @action public FullScreen = () => {
@@ -700,23 +714,24 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         );
     };
 
-    // removes video from currently playing display
+    // removes from currently playing display
     @action
     removeCurrentlyPlaying = () => {
-        if (CollectionStackedTimeline.CurrentlyPlaying) {
-            const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc);
+        const docView = this.props.DocumentView?.();
+        if (CollectionStackedTimeline.CurrentlyPlaying && docView) {
+            const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(docView);
             index !== -1 && CollectionStackedTimeline.CurrentlyPlaying.splice(index, 1);
         }
     };
-
-    // adds video to currently playing display
+    // adds doc to currently playing display
     @action
     addCurrentlyPlaying = () => {
+        const docView = this.props.DocumentView?.();
         if (!CollectionStackedTimeline.CurrentlyPlaying) {
             CollectionStackedTimeline.CurrentlyPlaying = [];
         }
-        if (CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc) === -1) {
-            CollectionStackedTimeline.CurrentlyPlaying.push(this.layoutDoc);
+        if (docView && CollectionStackedTimeline.CurrentlyPlaying.indexOf(docView) === -1) {
+            CollectionStackedTimeline.CurrentlyPlaying.push(docView);
         }
     };
 
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 486c941e9..3dba6f2af 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -216,7 +216,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     nextSlide = (slideNum?: number) => {
         const nextSlideInd = slideNum ?? this.itemIndex + 1;
         let curSlideInd = nextSlideInd;
-        CollectionStackedTimeline.CurrentlyPlaying?.map((clip, i) => DocumentManager.Instance.getDocumentView(clip)?.ComponentView?.Pause?.());
+        CollectionStackedTimeline.CurrentlyPlaying?.map(clipView => clipView?.ComponentView?.Pause?.());
         this.clearSelectedArray();
         const doGroupWithUp =
             (nextSelected: number, force = false) =>
@@ -995,7 +995,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     //Regular click
     @action
     selectElement = async (doc: Doc, noNav = false) => {
-        CollectionStackedTimeline.CurrentlyPlaying?.map((clip, i) => DocumentManager.Instance.getDocumentView(clip)?.ComponentView?.Pause?.());
+        CollectionStackedTimeline.CurrentlyPlaying?.map((clip, i) => clip?.ComponentView?.Pause?.());
         if (noNav) {
             const index = this.childDocs.indexOf(doc);
             if (index >= 0 && index < this.childDocs.length) {