diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 123 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 43 |
2 files changed, 108 insertions, 58 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index d466c6c3b..b3df7e79f 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -92,6 +92,62 @@ height: 100%; color: $white; + .audiobox-button { + margin: 2.5px; + cursor: pointer; + width: 25px; + height: 25px; + border-radius: 50%; + background: $dark-gray; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 15px; + } + + &:hover { + background: $black; + } + } + + svg { + width: 10px; + } + + input[type="range"] { + width: 70px; + -webkit-appearance: none; + background: none; + margin: 5px; + } + + input[type="range"]:focus { + outline: none; + } + + input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 6px; + cursor: pointer; + box-shadow: 0; + background: $light-gray; + border-radius: 3px; + } + + input[type="range"]::-webkit-slider-thumb { + box-shadow: 0; + border: 0; + height: 10px; + width: 10px; + border-radius: 10px; + background: $medium-blue; + cursor: pointer; + -webkit-appearance: none; + margin: -2px; + } + .audiobox-controls { display: flex; flex-direction: row; @@ -104,66 +160,20 @@ display: flex; flex-direction: row; width: 100px; - - .audiobox-button { - margin: 2.5px; - cursor: pointer; - width: 25px; - height: 25px; - border-radius: 50%; - background: $dark-gray; - display: flex; - align-items: center; - justify-content: center; - - svg { - width: 15px; - } - - &:hover { - background: $black; - } - } } .controls-right { display: flex; flex-direction: row; - svg { - width: 10px; - } - - input[type="range"] { - width: 70px; - -webkit-appearance: none; - background: none; - margin: 5px; - } - - input[type="range"]:focus { - outline: none; - } - - input[type="range"]::-webkit-slider-runnable-track { - width: 100%; - height: 6px; - cursor: pointer; - box-shadow: 0; - background: $light-gray; - border-radius: 3px; - } + .audiobox-button { + width: 15px; + height: 15px; + margin: 0; - input[type="range"]::-webkit-slider-thumb { - box-shadow: 0; - border: 0; - height: 10px; - width: 10px; - border-radius: 10px; - background: $medium-blue; - cursor: pointer; - -webkit-appearance: none; - margin: -2px; + svg { + width: 10px; + } } } } @@ -171,6 +181,7 @@ .audiobox-playback { width: 100%; height: calc(100% - 50px); + background: $white; .audiobox-timeline { height: 100%; @@ -193,5 +204,11 @@ height: 20px; padding: 3px; font-size: $small-text; + + .bottom-controls-middle { + display: flex; + flex-direction: row; + align-items: center; + } } } 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> |