collapses audio controls when node is resized, preliminary setup for currently playing audio "mini player"

3 files changed, 52 insertions, 18 deletions

diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 18a715edf..35b7fb5e9 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -12,6 +12,7 @@ import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../.
 import { DragManager } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
 import { Colors, Shadows } from '../../global/globalEnums';
+import { AudioBox } from '../../nodes/AudioBox';
 import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { DocumentView } from '../../nodes/DocumentView';
 import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup';
@@ -219,6 +220,14 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                     </Tooltip>
 
                 </span> : null}
+                {/* TODO: add small player for single clip, dropdown sort of expandable menu for multiple clips
+                            add onclick show audio similar to follow link behavior
+                            add button to close out audio from currently playing */}
+                {AudioBox.CurrentlyPlaying && AudioBox.CurrentlyPlaying.length != 0 && StrCast(this.layoutDoc.title) === "docked buttons" ? <span className="bottomPopup-background">
+                    <span className="bottomPopup-text">
+                        Currently listening to: {AudioBox.CurrentlyPlaying.map((clip) => clip.dataDoc.title + ", ")}
+                    </span>
+                </span> : null}
             </div>
         </div>;
     }
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 681a6b022..76043bfd4 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -86,7 +86,7 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: space-between;
+    align-items: center;
     background: $dark-gray;
     width: 100%;
     height: 100%;
@@ -159,7 +159,6 @@
         .controls-left {
             display: flex;
             flex-direction: row;
-            width: 100px;
         }
 
         .controls-right {
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index dbcd8c8b8..acd025fbd 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -38,6 +38,8 @@ enum media_state {
 }
 @observer
 export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps, AudioDocument>(AudioDocument) {
+    @observable public static CurrentlyPlaying: AudioBox[];
+
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); }
     public static SetScrubTime = action((timeInMillisFrom1970: number) => {
         AudioBox._scrubTime = 0;
@@ -70,6 +72,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // mehek: not 100% sure but i think due to the order in which things are loaded this is necessary ^^
     // if you get rid of it and set the value to 0 the timeline and waveform will set their bounds incorrectly
 
+    @computed get miniPlayer() { return this.props.PanelHeight() < 50 }
     @computed get links() { return DocListCast(this.dataDoc.links); }
     @computed get pauseTime() { return this._pauseEnd - this._pauseStart; } // total time paused to update the correct time
     @computed get mediaState() { return this.layoutDoc.mediaState as media_state; }
@@ -150,6 +153,14 @@ 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) == -1) {
+            AudioBox.CurrentlyPlaying.push(this);
+        }
+
         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
@@ -166,6 +177,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     () => {
                         this.Pause(false);
                         if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
+                        // removes from currently playing if playback has reached end of range marker
+                        else this.removeCurrentlyPlaying();
                     },
                     (end - start) * 1000);
             } else {
@@ -174,6 +187,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         }
     }
 
+    // removes from currently playing display
+    @action
+    removeCurrentlyPlaying = () => {
+        AudioBox.CurrentlyPlaying.splice(AudioBox.CurrentlyPlaying.indexOf(this), 1);
+    }
+
     // update the recording time
     updateRecordTime = () => {
         if (this.mediaState === media_state.Recording) {
@@ -447,7 +466,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     }
 
     @computed get playbackControls() {
-        return <div className="audiobox-file" style={{ pointerEvents: this._isAnyChildContentActive || this.props.isContentActive() ? "all" : "none", }}>
+        return <div className="audiobox-file" style={{
+            pointerEvents: this._isAnyChildContentActive || this.props.isContentActive() ? "all" : "none",
+            flexDirection: this.miniPlayer ? "row" : "column",
+            justifyContent: this.miniPlayer ? "flex-start" : "space-between"
+        }}>
             <div className="audiobox-controls">
                 <div className="controls-left">
                     <div className="audiobox-button"
@@ -456,11 +479,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         <FontAwesomeIcon icon={this.mediaState === media_state.Paused ? "play" : "pause"} size={"1x"} />
                     </div>
 
-                    <div className="audiobox-button"
-                        title={this.timeline?.IsTrimming !== TrimScope.None ? "finish" : "trim"}
-                        onPointerDown={this.onClipPointerDown}>
-                        <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} size={"1x"} />
-                    </div>
+                    {!this.miniPlayer &&
+                        <div className="audiobox-button"
+                            title={this.timeline?.IsTrimming !== TrimScope.None ? "finish" : "trim"}
+                            onPointerDown={this.onClipPointerDown}>
+                            <FontAwesomeIcon icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} size={"1x"} />
+                        </div>}
                 </div>
                 <div className="controls-right">
                     <div className="audiobox-button"
@@ -468,7 +492,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                         onPointerDown={this.toggleMute}>
                         <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} />
                     </div>
-                    <input type="range" step="0.1" min="0" max="1" value={this._volume}
+                    <input type="range" step="0.1" min="0" max="1" value={this._muted ? 0 : this._volume}
                         className="toolbar-slider" id="volume-slider"
                         onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.setVolume(Number(e.target.value)) }}
@@ -476,7 +500,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 </div>
             </div>
 
-            <div className="audiobox-playback">
+            <div className="audiobox-playback" style={{ width: this.miniPlayer ? 0 : "100%" }}>
                 <div className="audiobox-timeline">
                     {this.renderTimeline}
                 </div>
@@ -488,14 +512,16 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="timecode-current">
                     {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))}
                 </div>
-                <div className="bottom-controls-middle">
-                    <FontAwesomeIcon icon="search-plus" />
-                    <input type="range" step="0.1" min="1" max="5" value={this.timeline?._zoomFactor}
-                        className="toolbar-slider" id="zoom-slider"
-                        onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
-                    />
-                </div>
+                {!this.miniPlayer &&
+                    <div className="bottom-controls-middle">
+                        <FontAwesomeIcon icon="search-plus" />
+                        <input type="range" step="0.1" min="1" max="5" value={this.timeline?._zoomFactor}
+                            className="toolbar-slider" id="zoom-slider"
+                            onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
+                        />
+                    </div>}
+
                 <div className="timecode-duration">
                     {this.timeline && formatTime(Math.round(this.timeline.clipDuration))}
                 </div>