Selaa lähdekoodia

Add dynamic move threshold to pnz touch detection

master
zbettenbuk 7 vuotta sitten
vanhempi
commit
6947926494

+ 18
- 6
react/features/base/media/components/native/VideoTransform.js Näytä tiedosto

1
 // @flow
1
 // @flow
2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
-import { PanResponder, View } from 'react-native';
4
+import { PanResponder, PixelRatio, View } from 'react-native';
5
 import { connect } from 'react-redux';
5
 import { connect } from 'react-redux';
6
 
6
 
7
 import { storeVideoTransform } from '../../actions';
7
 import { storeVideoTransform } from '../../actions';
37
 const MAX_SCALE = 5;
37
 const MAX_SCALE = 5;
38
 
38
 
39
 /**
39
 /**
40
- * The length of a minimum movement after which we consider a gesture a move
41
- * instead of a tap/long tap.
40
+ * The threshold to allow the fingers move before we consider a gesture a
41
+ * move instead of a touch.
42
  */
42
  */
43
-const MOVE_THRESHOLD_DISMISSES_TOUCH = 2;
43
+const MOVE_THRESHOLD_DISMISSES_TOUCH = 5;
44
 
44
 
45
 /**
45
 /**
46
  * A tap timeout after which we consider a gesture a long tap and will not
46
  * A tap timeout after which we consider a gesture a long tap and will not
131
         y: number
131
         y: number
132
     };
132
     };
133
 
133
 
134
+    /**
135
+     * The actual move threshold that is calculated for this device/screen.
136
+     */
137
+    moveThreshold: number;
138
+
134
     /**
139
     /**
135
      * Time of the last tap.
140
      * Time of the last tap.
136
      */
141
      */
149
             transform: DEFAULT_TRANSFORM
154
             transform: DEFAULT_TRANSFORM
150
         };
155
         };
151
 
156
 
157
+        this._didMove = this._didMove.bind(this);
152
         this._getTransformStyle = this._getTransformStyle.bind(this);
158
         this._getTransformStyle = this._getTransformStyle.bind(this);
153
         this._onGesture = this._onGesture.bind(this);
159
         this._onGesture = this._onGesture.bind(this);
154
         this._onLayout = this._onLayout.bind(this);
160
         this._onLayout = this._onLayout.bind(this);
167
      * @inheritdoc
173
      * @inheritdoc
168
      */
174
      */
169
     componentWillMount() {
175
     componentWillMount() {
176
+        // The move threshold should be adaptive to the pixel ratio of the
177
+        // screen to avoid making it too sensitive or difficult to handle on
178
+        // different pixel ratio screens.
179
+        this.moveThreshold
180
+            = PixelRatio.get() * MOVE_THRESHOLD_DISMISSES_TOUCH;
181
+
170
         this.gestureHandlers = PanResponder.create({
182
         this.gestureHandlers = PanResponder.create({
171
             onPanResponderGrant: this._onPanResponderGrant,
183
             onPanResponderGrant: this._onPanResponderGrant,
172
             onPanResponderMove: this._onPanResponderMove,
184
             onPanResponderMove: this._onPanResponderMove,
276
      * @returns {boolean}
288
      * @returns {boolean}
277
      */
289
      */
278
     _didMove({ dx, dy }) {
290
     _didMove({ dx, dy }) {
279
-        return Math.abs(dx) > MOVE_THRESHOLD_DISMISSES_TOUCH
280
-                || Math.abs(dy) > MOVE_THRESHOLD_DISMISSES_TOUCH;
291
+        return Math.abs(dx) > this.moveThreshold
292
+                || Math.abs(dy) > this.moveThreshold;
281
     }
293
     }
282
 
294
 
283
     _getTouchDistance: Object => number;
295
     _getTouchDistance: Object => number;

Loading…
Peruuta
Tallenna