From 6947926494e600d5d36b7049fe50a4d45bd4618d Mon Sep 17 00:00:00 2001 From: zbettenbuk Date: Tue, 24 Apr 2018 15:48:18 +0200 Subject: [PATCH] Add dynamic move threshold to pnz touch detection --- .../media/components/native/VideoTransform.js | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/react/features/base/media/components/native/VideoTransform.js b/react/features/base/media/components/native/VideoTransform.js index 6e1cdff8c..5fb67cfa4 100644 --- a/react/features/base/media/components/native/VideoTransform.js +++ b/react/features/base/media/components/native/VideoTransform.js @@ -1,7 +1,7 @@ // @flow import React, { Component } from 'react'; -import { PanResponder, View } from 'react-native'; +import { PanResponder, PixelRatio, View } from 'react-native'; import { connect } from 'react-redux'; import { storeVideoTransform } from '../../actions'; @@ -37,10 +37,10 @@ const MAX_OFFSET = 100; const MAX_SCALE = 5; /** - * The length of a minimum movement after which we consider a gesture a move - * instead of a tap/long tap. + * The threshold to allow the fingers move before we consider a gesture a + * move instead of a touch. */ -const MOVE_THRESHOLD_DISMISSES_TOUCH = 2; +const MOVE_THRESHOLD_DISMISSES_TOUCH = 5; /** * A tap timeout after which we consider a gesture a long tap and will not @@ -131,6 +131,11 @@ class VideoTransform extends Component { y: number }; + /** + * The actual move threshold that is calculated for this device/screen. + */ + moveThreshold: number; + /** * Time of the last tap. */ @@ -149,6 +154,7 @@ class VideoTransform extends Component { transform: DEFAULT_TRANSFORM }; + this._didMove = this._didMove.bind(this); this._getTransformStyle = this._getTransformStyle.bind(this); this._onGesture = this._onGesture.bind(this); this._onLayout = this._onLayout.bind(this); @@ -167,6 +173,12 @@ class VideoTransform extends Component { * @inheritdoc */ componentWillMount() { + // The move threshold should be adaptive to the pixel ratio of the + // screen to avoid making it too sensitive or difficult to handle on + // different pixel ratio screens. + this.moveThreshold + = PixelRatio.get() * MOVE_THRESHOLD_DISMISSES_TOUCH; + this.gestureHandlers = PanResponder.create({ onPanResponderGrant: this._onPanResponderGrant, onPanResponderMove: this._onPanResponderMove, @@ -276,8 +288,8 @@ class VideoTransform extends Component { * @returns {boolean} */ _didMove({ dx, dy }) { - return Math.abs(dx) > MOVE_THRESHOLD_DISMISSES_TOUCH - || Math.abs(dy) > MOVE_THRESHOLD_DISMISSES_TOUCH; + return Math.abs(dx) > this.moveThreshold + || Math.abs(dy) > this.moveThreshold; } _getTouchDistance: Object => number;