ソースを参照

[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
 

読み込み中…
キャンセル
保存