diff options
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 15 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 102 |
2 files changed, 107 insertions, 10 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 306062ced..c0743933e 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -150,6 +150,21 @@ z-index: 1000; overflow: hidden; + .audiobox-container { + position: absolute; + width: 10px; + top: 2.5%; + height: 0px; + background: lightblue; + border-radius: 5px; + // box-shadow: black 2px 2px 1px; + opacity: 0.3; + z-index: 500; + border-style: solid; + border-color: darkblue; + border-width: 1px; + } + .audiobox-current { width: 1px; height: 100%; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index f01382d43..db87b15d1 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -60,20 +60,26 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD _start: number = 0; _hold: boolean = false; _left: boolean = false; - _markers: Array<any> = []; _first: boolean = false; _dragging = false; _count: Array<any> = []; _timeline: Opt<HTMLDivElement>; _duration = 0; + @observable _visible: boolean = false; + _containerX: number = 0; + _containerY: number = 0; + @observable _currX: number = 0; + @observable _currY: number = 0; + _invertedX: boolean = false; + _invertedY: boolean = false; private _isPointerDown = false; private _currMarker: any; @observable _position: number = 0; @observable _buckets: Array<number> = new Array<number>(); - @observable private _height: number = NumCast(this.layoutDoc.height); + @observable _waveHeight = this.layoutDoc._height; @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @computed get audioState(): undefined | "recording" | "paused" | "playing" { return this.dataDoc.audioState as (undefined | "recording" | "paused" | "playing"); } @@ -355,6 +361,74 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD return (this._pauseEnd - this._pauseStart); } + // starting the drag event for marker resizing + @action + onPointerDownTimeline = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = true; + this._timeline?.setPointerCapture(e.pointerId); + + this.start(this._ele!.currentTime); + + const rect = (e.target as any).getBoundingClientRect(); + this._containerX = this._currX = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + this._containerY = this._currY = (e.clientY - rect.y) / rect.height; + console.log(rect.height); + + document.removeEventListener("pointermove", this.onPointerMoveTimeline); + document.addEventListener("pointermove", this.onPointerMoveTimeline); + document.removeEventListener("pointerup", this.onPointerUpTimeline); + document.addEventListener("pointerup", this.onPointerUpTimeline); + + } + + // ending the drag event for marker resizing + @action + onPointerUpTimeline = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isPointerDown = false; + + const rect = (e.target as any).getBoundingClientRect(); + const time = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration) + this._visible ? this.end(time) : this._start = 0; + this._visible = false; + + this._containerX = 0; + this._containerY = 0; + this._timeline?.releasePointerCapture(e.pointerId); + + document.removeEventListener("pointermove", this.onPointerMoveTimeline); + document.removeEventListener("pointerup", this.onPointerUpTimeline); + } + + // resizes the marker while dragging + @action + onPointerMoveTimeline = (e: PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + + if (!this._isPointerDown) { + return; + } + this._visible = true; + const rect = (e.target as any).getBoundingClientRect(); + console.log(rect.height); + + this._currX = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); + this._currY = (e.clientY - rect.y) / rect.height; + + (this._currX - this._containerX < 0) ? this._invertedX = true : this._invertedX = false; + + this._currY - this._containerY < 0 ? this._invertedY = true : this._invertedY = false; + console.log(this._invertedY); + } + + @computed get container() { + return <div className="audiobox-container" style={{ left: !this._invertedX ? `${NumCast(this._containerX) / NumCast(this.dataDoc.duration, 1) * 100}%` : `${this._currX / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${Math.abs(this._containerX - this._currX) / NumCast(this.dataDoc.duration, 1) * 100}%`, height: `${Math.abs(this._currY - this._containerY) * 100}%`, top: !this._invertedY ? `${this._containerY * 100}%` : `${this._currY * 100}%` }}></div> + } + // creates a new label @action newMarker(marker: Doc) { @@ -376,7 +450,10 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD @action end(marker: number) { this._hold = false; - let newMarker = Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, useLinkSmallAnchor: true, hideLinkButton: true, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document }); + const newMarker = this._invertedX ? + Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, useLinkSmallAnchor: true, hideLinkButton: true, audioStart: marker, audioEnd: this._start, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document }) + : + Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`formatToTime(self.audioStart) + "-" + formatToTime(self.audioEnd)`) as any, isLabel: false, useLinkSmallAnchor: true, hideLinkButton: true, audioStart: this._start, audioEnd: marker, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document }); newMarker.data = ""; if (this.dataDoc[this.annotationKey]) { this.dataDoc[this.annotationKey].push(newMarker); @@ -498,7 +575,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD @computed get waveform() { return <Waveform color={"darkblue"} - height={this._height} + height={this._waveHeight} barWidth={0.1} // pos={this.layoutDoc.currentTimecode} pos={this.dataDoc.duration} @@ -560,12 +637,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD @action update = (width: number, height: number) => { if (height) { - this._height = 0.8 * NumCast(this.layoutDoc._height); + const height = 0.8 * NumCast(this.layoutDoc._height); let canvas2 = document.getElementsByTagName("canvas")[0]; if (canvas2) { let oldWidth = canvas2.width; let oldHeight = canvas2.height; - canvas2.style.height = `${this._height}`; + canvas2.style.height = `${height}`; canvas2.style.width = `${width}`; let ratio1 = oldWidth / window.innerWidth; @@ -580,7 +657,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD if (canvas1) { let oldWidth = canvas1.width; let oldHeight = canvas1.height; - canvas1.style.height = `${this._height}`; + canvas1.style.height = `${height}`; canvas1.style.width = `${width}`; let ratio1 = oldWidth / window.innerWidth; @@ -593,7 +670,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD let parent = canvas1.parentElement; if (parent) { parent.style.width = `${width}`; - parent.style.height = `${this._height}`; + parent.style.height = `${height}`; } } } @@ -642,11 +719,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD if (e.button === 0 && !e.ctrlKey) { const rect = (e.target as any).getBoundingClientRect(); + if (e.target as HTMLElement !== document.getElementById("current")) { const wasPaused = this.audioState === "paused"; this._ele!.currentTime = this.layoutDoc.currentTimecode = (e.clientX - rect.x) / rect.width * NumCast(this.dataDoc.duration); wasPaused && this.pause(); } + + this.onPointerDownTimeline(e); } if (e.button === 0 && e.altKey) { this.newMarker(Docs.Create.LabelDocument({ title: ComputedField.MakeFunction(`formatToTime(self.audioStart)`) as any, useLinkSmallAnchor: true, hideLinkButton: true, isLabel: true, audioStart: this._ele!.currentTime, _showSidebar: false, _autoHeight: true, annotationOn: this.props.Document })); @@ -658,7 +738,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD this._hold ? this.end(this._ele!.currentTime) : this.start(this._ele!.currentTime); } }}> - <div className="waveform" id="waveform" style={{ height: `${100}%`, width: "100%", bottom: "0px" }}> + <div className="waveform" id="waveform" style={{ height: `${100}%`, width: "100%", bottom: "0px", pointerEvents: "none" }}> {this.waveform} </div> {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { @@ -666,7 +746,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD (!m.isLabel) ? (this.layoutDoc.hideMarkers) ? (null) : rect = - <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`} key={i} id={"audiobox-marker-container1"} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / NumCast(this.dataDoc.duration, 1) * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%`, top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%` }} onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > + <div className={this.props.PanelHeight() < 32 ? "audiobox-marker-minicontainer" : "audiobox-marker-container1"} title={`${formatTime(Math.round(NumCast(m.audioStart)))}` + " - " + `${formatTime(Math.round(NumCast(m.audioEnd)))}`} key={i} id={"audiobox-marker-container1"} style={{ left: `${NumCast(m.audioStart) / NumCast(this.dataDoc.duration, 1) * 100}%`, width: `${(NumCast(m.audioEnd) - NumCast(m.audioStart)) / NumCast(this.dataDoc.duration, 1) * 100}%`, top: `${this.isOverlap(m) * 1 / (this.dataDoc.markerAmount + 1) * 100}%`, height: `${1 / (this.dataDoc.markerAmount + 1) * 100}%` }} onClick={e => { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > <div className="left-resizer" onPointerDown={e => this.onPointerDown(e, m, true)}></div> <DocumentView {...this.props} Document={m} @@ -741,6 +821,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); e.stopPropagation(); e.preventDefault(); } }} /> </div>; })} + {this._visible ? this.container : null} + <div className="audiobox-current" id="current" onClick={e => { e.stopPropagation(); e.preventDefault(); }} style={{ left: `${NumCast(this.layoutDoc.currentTimecode) / NumCast(this.dataDoc.duration, 1) * 100}%`, pointerEvents: "none" }} /> {this.audio} </div> |