better version of punch in/out without reactions.

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(); }