basic video UI and functionality complete

1 files changed, 13 insertions, 16 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index b9046b61e..eb7b9a773 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -37,7 +37,6 @@ enum media_state {
 }
 @observer
 export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps, AudioDocument>(AudioDocument) {
-    @observable public static CurrentlyPlaying: Doc[];
 
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); }
     public static SetScrubTime = action((timeInMillisFrom1970: number) => {
@@ -47,7 +46,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     public static Enabled = false;
     static topControlsHeight = 30; // width of playhead
     static bottomControlsHeight = 20; // height of timeline in percent of height of audioBox.
-    static zoomInterval = 0.1;
     @observable static _scrubTime = 0;
 
     _dropDisposer?: DragManager.DragDropDisposer;
@@ -182,19 +180,19 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     // removes from currently playing display
     @action
     removeCurrentlyPlaying = () => {
-        if (AudioBox.CurrentlyPlaying) {
-            const index = AudioBox.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc);
-            index !== -1 && AudioBox.CurrentlyPlaying.splice(index, 1);
+        if (CollectionStackedTimeline.CurrentlyPlaying) {
+            const index = CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc);
+            index !== -1 && CollectionStackedTimeline.CurrentlyPlaying.splice(index, 1);
         }
     }
 
     @action
     addCurrentlyPlaying = () => {
-        if (!AudioBox.CurrentlyPlaying) {
-            AudioBox.CurrentlyPlaying = [];
+        if (!CollectionStackedTimeline.CurrentlyPlaying) {
+            CollectionStackedTimeline.CurrentlyPlaying = [];
         }
-        if (AudioBox.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc) == -1) {
-            AudioBox.CurrentlyPlaying.push(this.layoutDoc.doc as Doc);
+        if (CollectionStackedTimeline.CurrentlyPlaying.indexOf(this.layoutDoc.doc as Doc) == -1) {
+            CollectionStackedTimeline.CurrentlyPlaying.push(this.layoutDoc.doc as Doc);
         }
     }
 
@@ -421,17 +419,16 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     @action
     setVolume = (volume: number) => {
         if (this._ele) {
-            if (this._muted) {
-                this._muted = false;
-            }
             this._volume = volume;
             this._ele.volume = volume;
+            if (this._muted) {
+                this.toggleMute();
+            }
         }
     }
 
     @action
-    toggleMute = (e: React.PointerEvent) => {
-        e.stopPropagation();
+    toggleMute = () => {
         if (this._ele) {
             this._muted = !this._muted;
             this._ele.muted = this._muted;
@@ -505,8 +502,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 <div className="controls-right">
                     <div className="audiobox-button"
                         title={this._muted ? "unmute" : "mute"}
-                        onPointerDown={this.toggleMute}>
-                        <FontAwesomeIcon icon={this._muted || this._volume == 0 ? "volume-mute" : "volume-up"} />
+                        onPointerDown={(e) => { e.stopPropagation(); this.toggleMute(); }}>
+                        <FontAwesomeIcon icon={this._muted ? "volume-mute" : "volume-up"} />
                     </div>
                     <input type="range" step="0.1" min="0" max="1" value={this._muted ? 0 : this._volume}
                         className="toolbar-slider volume"