mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-11 21:02:30 +00:00
c9d8b5c827
We started on the way to responsive UI and its design with aspect ratio and keeping the filmstrip on the short side of the app's visible rectangle. Shortly, we're going to introduce reduced UI for Picture-in-Picture. And that's where we'll need another dimensions-based detector akin to the aspect ratio detector. While the AspectRatioDetector, the up-and-coming ReducedUIDetector, and their base DimensionsDetector are definitely separate abstractions and implementations not mixed for the purposes of easy extensibility and maintenance, the three of them are our building blocks on top of which we'll build our responsive UI.
72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { setAspectRatio } from '../actions';
|
|
import DimensionsDetector from './DimensionsDetector';
|
|
|
|
/**
|
|
* AspectRatioDetector component's property types.
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* The "onDimensionsHandler" handler.
|
|
*/
|
|
_onDimensionsChanged: Function,
|
|
|
|
/**
|
|
* Any nested components.
|
|
*/
|
|
children: React$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 } >
|
|
{ this.props.children }
|
|
</DimensionsDetector>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps dispatching of the aspect ratio actions to React component props.
|
|
*
|
|
* @param {Function} dispatch - Redux action dispatcher.
|
|
* @private
|
|
* @returns {{
|
|
* _onDimensionsChanged: Function
|
|
* }}
|
|
*/
|
|
function _mapDispatchToProps(dispatch) {
|
|
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
|
|
* @returns {void}
|
|
*/
|
|
_onDimensionsChanged(width: number, height: number) {
|
|
dispatch(setAspectRatio(width, height));
|
|
}
|
|
};
|
|
}
|
|
|
|
export default connect(undefined, _mapDispatchToProps)(AspectRatioDetector);
|