diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 178 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 14 |
2 files changed, 122 insertions, 70 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index b33c7f506..a2fdd38e5 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,51 +1,50 @@ @import "../global/globalCssVariables.scss"; - .audiobox-container, .audiobox-container-interactive { - width: 100%; - height: 100%; - position: inherit; - display: flex; - position: relative; - cursor: default; - - .audiobox-buttons { - display: flex; width: 100%; - align-items: center; + height: 100%; + position: inherit; + display: flex; + position: relative; + cursor: default; - .audiobox-dictation { - position: relative; - width: 30px; - height: 100%; - align-items: center; - display: inherit; - background: $medium-gray; - left: 0px; - color: $dark-gray; - &:hover { - color: $black; - cursor: pointer; - } + .audiobox-buttons { + display: flex; + width: 100%; + align-items: center; + + .audiobox-dictation { + position: relative; + width: 30px; + height: 100%; + align-items: center; + display: inherit; + background: $medium-gray; + left: 0px; + color: $dark-gray; + &:hover { + color: $black; + cursor: pointer; + } + } } - } - .audiobox-control, - .audiobox-control-interactive { - top: 0; - max-height: 32px; - width: 100%; - display: inline-block; - pointer-events: none; - } + .audiobox-control, + .audiobox-control-interactive { + top: 0; + max-height: 32px; + width: 100%; + display: inline-block; + pointer-events: none; + } - .audiobox-control-interactive { - pointer-events: all; - } + .audiobox-control-interactive { + pointer-events: all; + } - .audiobox-record-interactive, - .audiobox-record { + .audiobox-record-interactive, + .audiobox-record { pointer-events: all; cursor: pointer; width: 100%; @@ -59,45 +58,46 @@ color: white; font-weight: bold; background-color: $dark-gray; - } + } - .audiobox-record { + .audiobox-record { pointer-events: none; - } + } - .recording { - margin-top: auto; - margin-bottom: auto; - width: 100%; - height: 100%; - position: relative; - padding-right: 5px; - display: flex; - background-color: $medium-blue; + .recording { + margin-top: auto; + margin-bottom: auto; + width: 100%; + height: 100%; + position: relative; + padding-right: 5px; + display: flex; + background-color: $medium-blue; - .time { - position: relative; - width: 100%; - font-size: $large-header; - text-align: center; - } + .time { + position: relative; + width: 100%; + font-size: $large-header; + text-align: center; + } - .recording-buttons { - position: relative; - margin-top: auto; - margin-bottom: auto; - color: $dark-gray; - &:hover { - color: $black; - } - } + .recording-buttons { + position: relative; + margin-top: auto; + margin-bottom: auto; + color: $dark-gray; + &:hover { + color: $black; + } + } - .time, .recording-buttons { - display: flex; - align-items: center; - padding: 5px; + .time, + .recording-buttons { + display: flex; + align-items: center; + padding: 5px; + } } - } .audiobox-buttons { display: flex; width: 100%; @@ -267,6 +267,44 @@ right: 2px; } + .toolbar-slider { + position: absolute; + top: 75px; + left: 70px; + } + + input[type="range"] { + width: calc(100% - 100px); + height: 16px; + -webkit-appearance: none; + background: none; + } + + input[type="range"]:focus { + outline: none; + } + + input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 5px; + cursor: pointer; + box-shadow: 0; + background: #dfdfdf; + border-radius: 3px; + } + + input[type="range"]::-webkit-slider-thumb { + box-shadow: 0; + border: 0; + height: 7px; + width: 7px; + border-radius: 10px; + background: #4476f7; + cursor: pointer; + -webkit-appearance: none; + margin: -1px; + } + .audiobox-zoom { bottom: 0; left: 30px; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 2eb34d27a..f2001adcd 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -45,6 +45,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp public static Enabled = false; static playheadWidth = 40; // width of playhead static heightPercent = 75; // height of timeline in percent of height of audioBox. + static zoomInterval = 0.1; @observable static _scrubTime = 0; _dropDisposer?: DragManager.DragDropDisposer; @@ -374,6 +375,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp })); } + zoom = (zoom: number) => { + this.timeline?.setZoom(zoom); + } + setupTimelineDrop = (r: HTMLDivElement | null) => { if (r && this.timeline) { this._dropDisposer?.(); @@ -437,6 +442,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp 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} @@ -445,6 +451,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp icon={this.timeline?.IsTrimming !== TrimScope.None ? "check" : "cut"} size={"1x"} /> </div> + <div className="audiobox-timeline" style={{ left: AudioBox.playheadWidth, @@ -457,6 +464,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp <div className="audioBox-current-time"> {this.timeline && formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this.timeline.clipStart)))} </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); }} + /> */} + <div className="audioBox-total-time"> {this.timeline && formatTime(Math.round(NumCast(this.timeline?.clipDuration)))} </div> |