d740752522
Use a dimensions detecting root component. The Dimensions module does not measure the app's view size, but the Window, which may not be the same, for example on iOS when PiP is used. Also refactor the aspect ratio wrap component since it can be taken directly from the store. Last, remove the use of DimensionsDetector on LargeVideo and TileView since they occupy the full-screen anyway. Fixes PiP mode on iOS.
69 lines
1.5 KiB
JavaScript
69 lines
1.5 KiB
JavaScript
// @flow
|
|
|
|
import React, { PureComponent } from 'react';
|
|
import { StyleSheet, View } from 'react-native';
|
|
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* The "onLayout" handler.
|
|
*/
|
|
onDimensionsChanged: Function,
|
|
|
|
/**
|
|
* Any nested components.
|
|
*/
|
|
children: React$Node
|
|
};
|
|
|
|
/**
|
|
* A {@link View} which captures the 'onLayout' event and calls a prop with the
|
|
* component size.
|
|
*/
|
|
export default class DimensionsDetector extends PureComponent<Props> {
|
|
/**
|
|
* Initializes a new DimensionsDetector instance.
|
|
*
|
|
* @param {Object} props - The read-only properties with which the new
|
|
* instance is to be initialized.
|
|
*/
|
|
constructor(props: Object) {
|
|
super(props);
|
|
|
|
this._onLayout = this._onLayout.bind(this);
|
|
}
|
|
|
|
_onLayout: (Object) => void;
|
|
|
|
/**
|
|
* Handles the "on layout" View's event and calls the onDimensionsChanged
|
|
* prop.
|
|
*
|
|
* @param {Object} event - The "on layout" event object/structure passed
|
|
* by react-native.
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_onLayout({ nativeEvent: { layout: { height, width } } }) {
|
|
const { onDimensionsChanged } = this.props;
|
|
|
|
onDimensionsChanged && onDimensionsChanged(width, height);
|
|
}
|
|
|
|
/**
|
|
* Renders the root view and it's children.
|
|
*
|
|
* @returns {Component}
|
|
*/
|
|
render() {
|
|
return (
|
|
<View
|
|
onLayout = { this._onLayout }
|
|
style = { StyleSheet.absoluteFillObject } >
|
|
{ this.props.children }
|
|
</View>
|
|
);
|
|
}
|
|
}
|