浏览代码

[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
 import React, { Component } from 'react';
4
 import React, { Component } from 'react';
5
 import { RTCView } from 'react-native-webrtc';
5
 import { RTCView } from 'react-native-webrtc';
6
 
6
 
7
+import { Pressable } from '../../../react';
8
+
7
 import styles from './styles';
9
 import styles from './styles';
8
 import VideoTransform from './VideoTransform';
10
 import VideoTransform from './VideoTransform';
9
 
11
 
81
      * @returns {ReactElement|null}
83
      * @returns {ReactElement|null}
82
      */
84
      */
83
     render() {
85
     render() {
84
-        const { stream, zoomEnabled } = this.props;
86
+        const { onPress, stream, zoomEnabled } = this.props;
85
 
87
 
86
         if (stream) {
88
         if (stream) {
87
-            const streamURL = stream.toURL();
89
+            // RTCView
88
             const style = styles.video;
90
             const style = styles.video;
89
             const objectFit
91
             const objectFit
90
                 = zoomEnabled
92
                 = zoomEnabled
91
                     ? 'contain'
93
                     ? 'contain'
92
                     : (style && style.objectFit) || 'cover';
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
                     <RTCView
97
                     <RTCView
101
                         mirror = { this.props.mirror }
98
                         mirror = { this.props.mirror }
102
                         objectFit = { objectFit }
99
                         objectFit = { objectFit }
103
-                        streamURL = { streamURL }
100
+                        streamURL = { stream.toURL() }
104
                         style = { style }
101
                         style = { style }
105
                         zOrder = { this.props.zOrder } />
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
 

正在加载...
取消
保存