diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackedTimeline.tsx | 31 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 2 |
2 files changed, 9 insertions, 24 deletions
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index f533bee52..cbf232d3d 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -5,7 +5,6 @@ import { IReactionDisposer, observable, reaction, - runInAction, } from "mobx"; import { observer } from "mobx-react"; import { computedFn } from "mobx-utils"; @@ -83,7 +82,7 @@ export class CollectionStackedTimeline extends CollectionSubView< private _timeline: HTMLDivElement | null = null; private _markerStart: number = 0; - @observable _markerEnd: number = 0; + @observable _markerEnd: number | undefined; @observable _trimming: number = TrimScope.None; @observable _trimStart: number = 0; @observable _trimEnd: number = 0; @@ -115,12 +114,13 @@ export class CollectionStackedTimeline extends CollectionSubView< } @computed get selectionContainer() { - return CollectionStackedTimeline.SelectingRegion !== this ? null : ( + const markerEnd = CollectionStackedTimeline.SelectingRegion === this ? this.currentTime : this._markerEnd; + return markerEnd === undefined ? null : ( <div className="collectionStackedTimeline-selector" style={{ - left: `${((Math.min(this._markerStart, this._markerEnd) - this.trimStart) / this.trimDuration) * 100}%`, - width: `${(Math.abs(this._markerStart - this._markerEnd) / this.trimDuration) * 100}%`, + left: `${((Math.min(this._markerStart, markerEnd) - this.trimStart) / this.trimDuration) * 100}%`, + width: `${(Math.abs(this._markerStart - markerEnd) / this.trimDuration) * 100}%`, }} /> ); @@ -145,21 +145,12 @@ export class CollectionStackedTimeline extends CollectionSubView< })!; } - _disposer: IReactionDisposer | undefined; componentDidMount() { document.addEventListener("keydown", this.keyEvents, true); - this._disposer = reaction(() => this.currentTime, - () => { - if (CollectionStackedTimeline.SelectingRegion === this) { - this._markerEnd = this.currentTime; - } - - }); } @action componentWillUnmount() { - this._disposer?.(); document.removeEventListener("keydown", this.keyEvents, true); if (CollectionStackedTimeline.SelectingRegion === this) { CollectionStackedTimeline.SelectingRegion = undefined; @@ -200,6 +191,7 @@ export class CollectionStackedTimeline extends CollectionSubView< this._markerStart, this._markerEnd ); + this._markerEnd = undefined; CollectionStackedTimeline.SelectingRegion = undefined; } } @@ -229,17 +221,13 @@ export class CollectionStackedTimeline extends CollectionSubView< if (rect && this.props.isContentActive()) { const wasPlaying = this.props.playing(); if (wasPlaying) this.props.Pause(); - var wasSelecting = CollectionStackedTimeline.SelectingRegion === this; + var wasSelecting = this._markerEnd !== undefined; setupMoveUpEvents( this, e, action((e) => { - if ( - !wasSelecting && - CollectionStackedTimeline.SelectingRegion !== this - ) { + if (!wasSelecting) { this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width); - CollectionStackedTimeline.SelectingRegion = this; wasSelecting = true; } this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width); @@ -254,7 +242,6 @@ export class CollectionStackedTimeline extends CollectionSubView< } if ( !isClick && - CollectionStackedTimeline.SelectingRegion === this && Math.abs(movement[0]) > 15 && !this.IsTrimming ) { @@ -270,7 +257,7 @@ export class CollectionStackedTimeline extends CollectionSubView< setTimeout(() => DocumentManager.Instance.getDocumentView(anchor)?.select(false)); } (!isClick || !wasSelecting) && - (CollectionStackedTimeline.SelectingRegion = undefined); + (this._markerEnd = undefined); }), (e, doubleTap) => { this.props.select(false); diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 2574b5a45..f52b54d01 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -71,8 +71,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp _play: any = null; @observable static _scrubTime = 0; - @observable _markerEnd: number = 0; - @observable _position: number = 0; @observable _waveHeight: Opt<number> = this.layoutDoc._height; @observable _paused: boolean = false; @computed get recordingStart() { return DateCast(this.dataDoc[this.fieldKey + "-recordingStart"])?.date.getTime(); } |