aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2021-01-28 20:51:39 -0500
committerbobzel <zzzman@gmail.com>2021-01-28 20:51:39 -0500
commitb11652e06205bf214f9504330df3980af643a7cc (patch)
tree3458df2269cba591bb4cd8ffb299ac62a7c3e785 /src
parent13fa5643246233c6f6a1fb232ef3dadbd7d8fa08 (diff)
fixed up double click behavior in general but specifically for Audio/Video timelines
Diffstat (limited to 'src')
-rw-r--r--src/Utils.ts15
-rw-r--r--src/client/views/collections/CollectionStackedTimeline.tsx27
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx5
3 files changed, 23 insertions, 24 deletions
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]);
}