1 files changed, 38 insertions, 5 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 48e324971..3a3eb78e1 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -21,6 +21,7 @@ import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from "../DocComponent";
 import "./AudioBox.scss";
 import { FieldView, FieldViewProps } from "./FieldView";
+import { timeStamp } from "console";
 
 declare class MediaRecorder {
     constructor(e: any); // whatever MediaRecorder has
@@ -60,6 +61,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     _stream: MediaStream | undefined;
     _play: any = null;
 
+    @observable _volume: number = 1;
+    @observable _muted: boolean = false;
     @observable _paused: boolean = false;
     @computed get recordingStart() { return DateCast(this.dataDoc[this.fieldKey + "-recordingStart"])?.date.getTime(); }
     @computed get rawDuration() { return NumCast(this.dataDoc[`${this.fieldKey}-duration`]); }
@@ -155,8 +158,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 this.mediaState = media_state.Playing;
                 this._play = setTimeout(
                     () => {
-                        if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
                         this.Pause();
+                        if (fullPlay) this.setPlayheadTime(this.timeline!.trimStart);
                     },
                     (end - start) * 1000);
             } else {
@@ -260,6 +263,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
     Pause = () => {
         this._ele?.pause();
         this.mediaState = media_state.Paused;
+        // clearTimeout(this._play); // stops clip from jumping back to beginning
     }
 
     // creates a text document for dictation
@@ -374,6 +378,23 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         this.timeline?.setZoom(zoom);
     }
 
+    @action
+    setVolume = (volume: number) => {
+        if (this._ele) {
+            this._volume = volume;
+            this._ele.volume = volume;
+        }
+    }
+
+    @action
+    toggleMute = (e: React.PointerEvent) => {
+        e.stopPropagation();
+        if (this._ele) {
+            this._muted = !this._muted;
+            this._ele.muted = this._muted;
+        }
+    }
+
     setupTimelineDrop = (r: HTMLDivElement | null) => {
         if (r && this.timeline) {
             this._dropDisposer?.();
@@ -434,11 +455,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                     </div>
                 </div>
                 <div className="controls-right">
-                    <FontAwesomeIcon icon={["fas", "search"]} />
-                    <input type="range" step="0.1" min="1" max="5" value={this.timeline?._zoomFactor}
-                        className="toolbar-slider" id="zoom-slider"
+                    <div className="audiobox-button"
+                        title={this._muted ? "unmute" : "mute"}
+                        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}
+                        className="toolbar-slider" id="volume-slider"
                         onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); }}
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.zoom(Number(e.target.value)); }}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => { this.setVolume(Number(e.target.value)) }}
                     />
                 </div>
             </div>
@@ -455,6 +480,14 @@ 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>
                 <div className="timecode-duration">
                     {this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))}
                 </div>