From b11652e06205bf214f9504330df3980af643a7cc Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 28 Jan 2021 20:51:39 -0500
Subject: fixed up double click behavior in general but specifically for
 Audio/Video timelines

---
 src/Utils.ts                                       | 15 ++++++++----
 .../collections/CollectionStackedTimeline.tsx      | 27 ++++++++--------------
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  5 ++--
 3 files changed, 23 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/Utils.ts b/src/Utils.ts
index dcfb579ca..39fc3dae4 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -612,10 +612,20 @@ export function setupMoveUpEvents(
     upEvent: (e: PointerEvent, movement: number[], isClick: boolean) => any,
     clickEvent: (e: PointerEvent, doubleTap?: boolean) => any,
     stopPropagation: boolean = true,
-    stopMovePropagation: boolean = true
+    stopMovePropagation: boolean = true,
+    noDoubleTapTimeout?: () => void
 ) {
+    const doubleTapTimeout = 300;
+    (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < doubleTapTimeout);
+    (target as any)._lastTap = Date.now();
     (target as any)._downX = (target as any)._lastX = e.clientX;
     (target as any)._downY = (target as any)._lastY = e.clientY;
+    if (!(target as any)._doubleTime && noDoubleTapTimeout) {
+        (target as any)._doubleTime = setTimeout(() => {
+            noDoubleTapTimeout?.();
+            (target as any)._doubleTime = undefined;
+        }, doubleTapTimeout);
+    }
 
     const _moveEvent = (e: PointerEvent): void => {
         if (Math.abs(e.clientX - (target as any)._downX) > Utils.DRAG_THRESHOLD || Math.abs(e.clientY - (target as any)._downY) > Utils.DRAG_THRESHOLD) {
@@ -633,10 +643,7 @@ export function setupMoveUpEvents(
         (target as any)._lastY = e.clientY;
         stopMovePropagation && e.stopPropagation();
     };
-    (target as any)._doubleTap = false;
     const _upEvent = (e: PointerEvent): void => {
-        (target as any)._doubleTap = (Date.now() - (target as any)._lastTap < 300);
-        (target as any)._lastTap = Date.now();
         const isClick = Math.abs(e.clientX - (target as any)._downX) < 4 && Math.abs(e.clientY - (target as any)._downY) < 4;
         upEvent(e, [e.clientX - (target as any)._downX, e.clientY - (target as any)._downY], isClick);
         if (isClick) {
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 11a74c4bc..1ccf474f2 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -1,5 +1,5 @@
 import React = require("react");
-import { action, computed, IReactionDisposer, observable } from "mobx";
+import { action, computed, IReactionDisposer, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { computedFn } from "mobx-utils";
 import { Doc, Opt } from "../../../fields/Doc";
@@ -41,7 +41,6 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
     static RangePlayScript: ScriptField;
     static LabelPlayScript: ScriptField;
 
-    private _doubleTime: NodeJS.Timeout | undefined; // bcz: Hack!  this must be called _doubleTime since setupMoveDragEvents will use that field name
     private _timeline: HTMLDivElement | null = null;
     private _markerStart: number = 0;
     @observable _markerEnd: number = 0;
@@ -66,10 +65,9 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
     }
 
     componentDidMount() { document.addEventListener("keydown", this.keyEvents, true); }
-    @action
     componentWillUnmount() {
         document.removeEventListener("keydown", this.keyEvents, true);
-        if (CollectionStackedTimeline.SelectingRegion === this) CollectionStackedTimeline.SelectingRegion = undefined;
+        if (CollectionStackedTimeline.SelectingRegion === this) runInAction(() => CollectionStackedTimeline.SelectingRegion = undefined);
     }
 
     anchorStart = (anchor: Doc) => NumCast(anchor._timecodeToShow, NumCast(anchor[this.props.startTag]));
@@ -116,19 +114,13 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
         if (rect && this.props.active()) {
             const wasPlaying = this.props.playing();
             if (wasPlaying) this.props.Pause();
-            else if (!this._doubleTime) {
-                this._doubleTime = setTimeout(() => {
-                    this._doubleTime = undefined;
-                    this.props.setTime((clientX - rect.x) / rect.width * this.duration);
-                }, 300); // 300ms is double-tap timeout
-            }
             const wasSelecting = CollectionStackedTimeline.SelectingRegion === this;
-            if (!wasSelecting) {
-                this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width);
-                CollectionStackedTimeline.SelectingRegion = this;
-            }
             setupMoveUpEvents(this, e,
                 action(e => {
+                    if (!wasSelecting && CollectionStackedTimeline.SelectingRegion !== this) {
+                        this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width);
+                        CollectionStackedTimeline.SelectingRegion = this;
+                    }
                     this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width);
                     return false;
                 }),
@@ -149,7 +141,8 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
                     e.shiftKey && this.createAnchor(this.currentTime);
                     !wasPlaying && doubleTap && this.props.Play();
                 },
-                this.props.isSelected(true) || this.props.isChildActive());
+                this.props.isSelected(true) || this.props.isChildActive(), undefined,
+                () => !wasPlaying && this.props.setTime((clientX - rect.x) / rect.width * this.duration));
         }
     }
 
@@ -219,13 +212,13 @@ export class CollectionStackedTimeline extends CollectionSubView<PanZoomDocument
         const newTime = (e: PointerEvent) => {
             const rect = (e.target as any).getBoundingClientRect();
             return this.toTimeline(e.clientX - rect.x, rect.width);
-        }
+        };
         const changeAnchor = (anchor: Doc, left: boolean, time: number) => {
             const timelineOnly = Cast(anchor[this.props.startTag], "number", null) !== undefined;
             if (timelineOnly) Doc.SetInPlace(anchor, left ? this.props.startTag : this.props.endTag, time, true);
             else left ? anchor._timecodeToShow = time : anchor._timecodeToHide = time;
             return false;
-        }
+        };
         setupMoveUpEvents(this, e,
             (e) => changeAnchor(anchor, left, newTime(e)),
             (e) => {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 4d277dc1c..6c7512f7c 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -818,9 +818,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             e.stopPropagation();
             e.preventDefault();
             if (!e.ctrlKey && MarqueeView.DragMarquee) this.setPan(this.panX() + e.deltaX, this.panY() + e.deltaY, "None", true);
-            else
-                // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc?
-                this.zoom(e.clientX, e.clientY, e.deltaY);
+            else this.zoom(e.clientX, e.clientY, e.deltaY); // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc?
+
         }
         this.props.Document.targetScale = NumCast(this.props.Document[this.scaleFieldKey]);
     }
-- 
cgit v1.2.3-70-g09d2