diff options
Diffstat (limited to 'src/client/views/nodes/AudioBox.tsx')
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 120 |
1 files changed, 53 insertions, 67 deletions
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index f2001adcd..48e324971 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -43,8 +43,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp AudioBox._scrubTime = timeInMillisFrom1970; }); public static Enabled = false; - static playheadWidth = 40; // width of playhead - static heightPercent = 75; // height of timeline in percent of height of audioBox. + 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; @@ -338,19 +338,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp timelineWhenChildContentsActiveChanged = (isActive: boolean) => this.props.whenChildContentsActiveChanged(this._isAnyChildContentActive = isActive) timelineScreenToLocal = () => - this.props - .ScreenToLocalTransform() - .translate( - -AudioBox.playheadWidth, - (-(100 - AudioBox.heightPercent) / 200) * this.props.PanelHeight() - ) + this.props.ScreenToLocalTransform().translate(0, -AudioBox.bottomControlsHeight) setPlayheadTime = (time: number) => this._ele!.currentTime = this.layoutDoc._currentTimecode = time; playing = () => this.mediaState === media_state.Playing; isActiveChild = () => this._isAnyChildContentActive; - timelineWidth = () => this.props.PanelWidth() - AudioBox.playheadWidth; - timelineHeight = () => (this.props.PanelHeight() * (AudioBox.heightPercent / 100)) *// panelHeight * heightPercent is player height - (AudioBox.heightPercent / 100) // * heightPercent is timeline height (as per css inline) + timelineWidth = () => this.props.PanelWidth(); + timelineHeight = () => (this.props.PanelHeight() - (AudioBox.topControlsHeight + AudioBox.bottomControlsHeight)) @undoBatch finishTrim = () => { // hides trim controls and displays new clip @@ -365,6 +359,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } onClipPointerDown = (e: React.PointerEvent) => { + e.stopPropagation(); this.timeline && setupMoveUpEvents(this, e, returnFalse, returnFalse, action((e: PointerEvent, doubleTap?: boolean) => { if (doubleTap) { this.startTrim(TrimScope.All); @@ -392,90 +387,81 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp } @computed get recordingControls() { - return <div className="audiobox-buttons"> + return <div className="audiobox-recorder"> <div className="audiobox-dictation" onClick={this.onFile}> <FontAwesomeIcon - style={{ width: "30px" }} - icon="file-alt" - size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /> + size="2x" + icon="file-alt" /> </div> {[media_state.Recording, media_state.Playing].includes(this.mediaState) ? - <div className="recording" onClick={e => e.stopPropagation()}> - <div className="recording-buttons" onClick={this.Record}> + <div className="recording-controls" onClick={e => e.stopPropagation()}> + <div className="record-button" onClick={this.Record}> <FontAwesomeIcon - icon="stop" - size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /> + size="2x" + icon="stop" /> </div> - <div className="recording-buttons" - onClick={this._paused ? this.recordPlay : this.recordPause} - > + <div className="record-button" onClick={this._paused ? this.recordPlay : this.recordPause}> <FontAwesomeIcon - icon={this._paused ? "play" : "pause"} - size={this.props.PanelHeight() < 36 ? "1x" : "2x"} /> + size="2x" + icon={this._paused ? "play" : "pause"} /> </div> - <div className="time"> + <div className="record-timecode"> {formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))} </div> </div> : - <div className={`audiobox-record${this.props.isContentActive() ? "-interactive" : ""}`}> + <div className="audiobox-start-record"> <FontAwesomeIcon icon="microphone" /> RECORD </div>} - </div>; + </div> } @computed get playbackControls() { - return <div className="audiobox-controls" - style={{ pointerEvents: this._isAnyChildContentActive || this.props.isContentActive() ? "all" : "none", }} - > - <div className="audiobox-dictation" /> - <div className="audiobox-player" - style={{ height: `${AudioBox.heightPercent}%` }} - > - <div className="audiobox-buttons" - title={this.mediaState === media_state.Paused ? "play" : "pause"} - onClick={this.mediaState === media_state.Paused ? this.Play : this.Pause} - > - {" "} - <FontAwesomeIcon - icon={this.mediaState === media_state.Paused ? "play" : "pause"} - size={"1x"} /> - </div> + return <div className="audiobox-file" style={{ pointerEvents: this._isAnyChildContentActive || this.props.isContentActive() ? "all" : "none", }}> + <div className="audiobox-controls"> + <div className="controls-left"> + <div className="audiobox-button" + title={this.mediaState === media_state.Paused ? "play" : "pause"} + onPointerDown={this.mediaState === media_state.Paused ? this.Play : this.Pause}> + <FontAwesomeIcon icon={this.mediaState === media_state.Paused ? "play" : "pause"} size={"1x"} /> + </div> - <div className="audiobox-buttons" - title={this.timeline?.IsTrimming !== TrimScope.None ? "finish" : "trim"} - onPointerDown={this.onClipPointerDown} - > - <FontAwesomeIcon - icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} - size={"1x"} /> + <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"> + <FontAwesomeIcon icon={["fas", "search"]} /> + <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> - <div className="audiobox-timeline" - style={{ - left: AudioBox.playheadWidth, - width: `calc(100% - ${AudioBox.playheadWidth}px)`, - }} - > + <div className="audiobox-playback"> + <div className="audiobox-timeline"> {this.renderTimeline} </div> - {this.audio} - <div className="audioBox-current-time"> - {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))} - </div> + </div> - {/* <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(e.target.value); }} - /> */} + {this.audio} - <div className="audioBox-total-time"> + <div className="audiobox-timecodes"> + <div className="timecode-current"> + {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))} + </div> + <div className="timecode-duration"> {this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))} </div> </div> - </div>; + + + </div> } @computed get renderTimeline() { |