jiti-meet/react/features/base/responsive-ui/components/AspectRatioDetector.js

74 lines
1.8 KiB
JavaScript
Raw Normal View History

// @flow
2018-05-22 14:23:03 +00:00
import React, { Component, type Node } from 'react';
import { type Dispatch } from 'redux';
2019-03-21 16:38:29 +00:00
import { connect } from '../../redux';
2017-11-07 14:28:08 +00:00
import { setAspectRatio } from '../actions';
import DimensionsDetector from './DimensionsDetector';
/**
* AspectRatioDetector component's property types.
*/
type Props = {
/**
* The "onDimensionsHandler" handler.
*/
_onDimensionsChanged: Function,
/**
* Any nested components.
*/
2018-05-22 14:23:03 +00:00
children: Node
};
/**
* A root {@link View} which captures the 'onLayout' event and figures out
* the aspect ratio of the app.
*/
class AspectRatioDetector extends Component<Props> {
/**
* Renders the root view and it's children.
*
* @returns {Component}
*/
render() {
return (
<DimensionsDetector
onDimensionsChanged = { this.props._onDimensionsChanged } >
2017-11-07 14:28:08 +00:00
{ this.props.children }
</DimensionsDetector>
2017-11-07 14:28:08 +00:00
);
}
}
/**
* Maps dispatching of the aspect ratio actions to React component props.
*
* @param {Function} dispatch - Redux action dispatcher.
* @private
* @returns {{
* _onDimensionsChanged: Function
* }}
*/
2019-03-19 15:42:25 +00:00
function _mapDispatchToProps(dispatch: Dispatch<any>) {
return {
/**
* Handles the "on dimensions changed" event and dispatches aspect ratio
* changed action.
*
* @param {number} width - The new width for the component.
* @param {number} height - The new height for the component.
* @private
2017-11-07 14:28:08 +00:00
* @returns {void}
*/
_onDimensionsChanged(width: number, height: number) {
2017-11-07 14:28:08 +00:00
dispatch(setAspectRatio(width, height));
}
};
}
export default connect(undefined, _mapDispatchToProps)(AspectRatioDetector);