diff --git a/react/features/base/media/components/native/VideoTransform.js b/react/features/base/media/components/native/VideoTransform.js index a71f39802..f2a61cc89 100644 --- a/react/features/base/media/components/native/VideoTransform.js +++ b/react/features/base/media/components/native/VideoTransform.js @@ -5,6 +5,7 @@ import { PanResponder, PixelRatio, View } from 'react-native'; import { type Dispatch } from 'redux'; import { connect } from '../../../redux'; +import { ASPECT_RATIO_WIDE } from '../../../responsive-ui'; import { storeVideoTransform } from '../../actions'; import styles from './styles'; @@ -61,6 +62,11 @@ type Transform = { type Props = { + /** + * The current aspect ratio of the screen. + */ + _aspectRatio: Symbol, + /** * The children components of this view. */ @@ -213,14 +219,18 @@ class VideoTransform extends Component { * @inheritdoc */ render() { - const { children, style } = this.props; + const { _aspectRatio, children, style } = this.props; + const isAspectRatioWide = _aspectRatio === ASPECT_RATIO_WIDE; + + const videoTransformedViewContainerStyles + = isAspectRatioWide ? styles.videoTransformedViewContainerWide : styles.videoTransformedViewContainer; return ( @@ -371,8 +381,12 @@ class VideoTransform extends Component { * @returns {void} */ _limitAndApplyTransformation(transform: Transform) { + const { _aspectRatio } = this.props; const { layout } = this.state; + const isAspectRatioWide = _aspectRatio === ASPECT_RATIO_WIDE; + + if (layout) { const { scale } = this.state.transform; const { scale: newScaleUnlimited } = transform; @@ -421,10 +435,10 @@ class VideoTransform extends Component { } }; - let _MAX_OFFSET = MAX_OFFSET; + let _MAX_OFFSET = isAspectRatioWide ? 0 : MAX_OFFSET; if (newScaleUnlimited < scale) { - // This is a negative scale event so we dynamycally reduce the + // This is a negative scale event so we dynamically reduce the // MAX_OFFSET to get the screen back to the center on // downscaling. _MAX_OFFSET = Math.min(MAX_OFFSET, MAX_OFFSET * (newScale - 1)); @@ -718,6 +732,8 @@ function _mapDispatchToProps(dispatch: Dispatch) { */ function _mapStateToProps(state) { return { + _aspectRatio: state['features/base/responsive-ui'].aspectRatio, + /** * The stored transforms retrieved from Redux to be initially applied to * different streams. diff --git a/react/features/base/media/components/native/styles.js b/react/features/base/media/components/native/styles.js index 7604b0e48..60522422c 100644 --- a/react/features/base/media/components/native/styles.js +++ b/react/features/base/media/components/native/styles.js @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import BaseThemeNative from '../../../ui/components/BaseTheme'; /** * The styles of the feature base/media. @@ -21,6 +22,11 @@ export default StyleSheet.create({ overflow: 'hidden' }, + videoTransformedViewContainerWide: { + overflow: 'hidden', + paddingRight: BaseThemeNative.spacing[10] + }, + /** * Make {@code Video} fill its container. */