浏览代码

[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.
master
Lyubo Marinov 7 年前
父节点
当前提交
66bf5cf966
共有 1 个文件被更改,包括 33 次插入11 次删除
  1. 33
    11
      react/features/base/media/components/native/Video.js

+ 33
- 11
react/features/base/media/components/native/Video.js 查看文件

@@ -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
 

正在加载...
取消
保存