[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.
This commit is contained in:
Lyubo Marinov 2018-04-17 17:35:48 -05:00
parent 63c165ee8b
commit 66bf5cf966
1 changed files with 33 additions and 11 deletions

View File

@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { RTCView } from 'react-native-webrtc';
import { Pressable } from '../../../react';
import styles from './styles';
import VideoTransform from './VideoTransform';
@ -81,29 +83,49 @@ export default class Video extends Component<*> {
* @returns {ReactElement|null}
*/
render() {
const { stream, zoomEnabled } = this.props;
const { onPress, stream, zoomEnabled } = this.props;
if (stream) {
const streamURL = stream.toURL();
// RTCView
const style = styles.video;
const objectFit
= zoomEnabled
? 'contain'
: (style && style.objectFit) || 'cover';
return (
<VideoTransform
enabled = { zoomEnabled }
onPress = { this.props.onPress }
streamId = { stream.id }
style = { style }>
const rtcView
= ( // eslint-disable-line no-extra-parens
<RTCView
mirror = { this.props.mirror }
objectFit = { objectFit }
streamURL = { streamURL }
streamURL = { stream.toURL() }
style = { style }
zOrder = { this.props.zOrder } />
</VideoTransform>
);
// VideoTransform implements "pinch to zoom". As part of "pinch to
// zoom", it implements onPress, of course.
if (zoomEnabled) {
return (
<VideoTransform
enabled = { zoomEnabled }
onPress = { onPress }
streamId = { stream.id }
style = { style }>
{ rtcView }
</VideoTransform>
);
}
// XXX Unfortunately, VideoTransform implements a custom press
// detection which has been observed to be very picky about the
// precision of the press unlike the builtin/default/standard press
// detection which is forgiving to imperceptible movements while
// pressing. It's not acceptable to be so picky, especially when
// "pinch to zoom" is not enabled.
return (
<Pressable onPress = { onPress }>
{ rtcView }
</Pressable>
);
}