Browse Source

[RN] Avoid "pinch to zoom" onPress

It's too sensitive and most of the time I cannot perform an onPress. In
contrast, the builtin/default/standard onPress is noticeably more
forgiving. While we fix the sensitivity of "pinch to zoom", don't use
its onPress unless absolutely necessary i.e. use it only for desktop
streams.
efficient_tiling
Lyubo Marinov 7 years ago
parent
commit
66bf5cf966
1 changed files with 33 additions and 11 deletions
  1. 33
    11
      react/features/base/media/components/native/Video.js

+ 33
- 11
react/features/base/media/components/native/Video.js View File

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
4 4
 import React, { Component } from 'react';
5 5
 import { RTCView } from 'react-native-webrtc';
6 6
 
7
+import { Pressable } from '../../../react';
8
+
7 9
 import styles from './styles';
8 10
 import VideoTransform from './VideoTransform';
9 11
 
@@ -81,29 +83,49 @@ export default class Video extends Component<*> {
81 83
      * @returns {ReactElement|null}
82 84
      */
83 85
     render() {
84
-        const { stream, zoomEnabled } = this.props;
86
+        const { onPress, stream, zoomEnabled } = this.props;
85 87
 
86 88
         if (stream) {
87
-            const streamURL = stream.toURL();
89
+            // RTCView
88 90
             const style = styles.video;
89 91
             const objectFit
90 92
                 = zoomEnabled
91 93
                     ? 'contain'
92 94
                     : (style && style.objectFit) || 'cover';
93
-
94
-            return (
95
-                <VideoTransform
96
-                    enabled = { zoomEnabled }
97
-                    onPress = { this.props.onPress }
98
-                    streamId = { stream.id }
99
-                    style = { style }>
95
+            const rtcView
96
+                = ( // eslint-disable-line no-extra-parens
100 97
                     <RTCView
101 98
                         mirror = { this.props.mirror }
102 99
                         objectFit = { objectFit }
103
-                        streamURL = { streamURL }
100
+                        streamURL = { stream.toURL() }
104 101
                         style = { style }
105 102
                         zOrder = { this.props.zOrder } />
106
-                </VideoTransform>
103
+                );
104
+
105
+            // VideoTransform implements "pinch to zoom". As part of "pinch to
106
+            // zoom", it implements onPress, of course.
107
+            if (zoomEnabled) {
108
+                return (
109
+                    <VideoTransform
110
+                        enabled = { zoomEnabled }
111
+                        onPress = { onPress }
112
+                        streamId = { stream.id }
113
+                        style = { style }>
114
+                        { rtcView }
115
+                    </VideoTransform>
116
+                );
117
+            }
118
+
119
+            // XXX Unfortunately, VideoTransform implements a custom press
120
+            // detection which has been observed to be very picky about the
121
+            // precision of the press unlike the builtin/default/standard press
122
+            // detection which is forgiving to imperceptible movements while
123
+            // pressing. It's not acceptable to be so picky, especially when
124
+            // "pinch to zoom" is not enabled.
125
+            return (
126
+                <Pressable onPress = { onPress }>
127
+                    { rtcView }
128
+                </Pressable>
107 129
             );
108 130
         }
109 131
 

Loading…
Cancel
Save