haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Coding style

This commit is contained in:
Lyubo Marinov 2017-11-07 08:28:08 -06:00
parent bce2a9fba9
commit d0c079dba5
14 changed files with 101 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
react/features/app/components/App.native.js
View File

@ -89,16 +89,17 @@ export class App extends AbstractApp {
}
/**
* Overrides the super method to inject {@link AspectRatioDetector} as
* the top most component.
* Injects {@link AspectRatioDetector} in order to detect the aspect ratio
* of this {@code App}'s user interface and afford {@link AspectRatioAware}.
*
* @override
*/
_createElement(component, props) {
return (
<AspectRatioDetector>
{super._createElement(component, props)}
</AspectRatioDetector>);
{ super._createElement(component, props) }
</AspectRatioDetector>
);
}
/**

9
react/features/base/aspect-ratio/actionTypes.js
View File

@ -1,9 +1,10 @@
/**
* The type of (redux) action which signals that a new aspect ratio has been
* detected by the app.
* The type of (redux) action which sets the aspect ratio of the app's user
* interface.
*
* {
* type: SET_ASPECT_RATIO,
* aspectRatio: Symbol
* type: SET_ASPECT_RATIO,
* aspectRatio: Symbol
* }
*/
export const SET_ASPECT_RATIO = Symbol('SET_ASPECT_RATIO');

14
react/features/base/aspect-ratio/actions.js
View File

@ -1,22 +1,22 @@
/* @flow */
// @flow
import { SET_ASPECT_RATIO } from './actionTypes';
import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from './constants';
/**
* Calculates new aspect ratio for the app based on provided width and height
* values.
* Sets the aspect ratio of the app's user interface based on specific width and
* height.
*
* @param {number} width - The width of the app's area used on the screen.
* @param {number} height - The height of the app's area used on the screen.
* @param {number} width - The width of the app's user interface.
* @param {number} height - The height of the app's user interface.
* @returns {{
* type: SET_ASPECT_RATIO,
* aspectRatio: Symbol
* }}
*/
export function calculateNewAspectRatio(width: number, height: number): Object {
export function setAspectRatio(width: number, height: number): Object {
return {
type: SET_ASPECT_RATIO,
aspectRatio: width > height ? ASPECT_RATIO_WIDE : ASPECT_RATIO_NARROW
aspectRatio: width < height ? ASPECT_RATIO_NARROW : ASPECT_RATIO_WIDE
};
}

16
react/features/base/aspect-ratio/components/AspectRatioAware.js
View File

@ -7,12 +7,12 @@ import { connect } from 'react-redux';
import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants';
/**
* Checks if given React component decorated in {@link AspectRatioAwareWrapper}
* has currently the {@link ASPECT_RATIO_NARROW} set in the aspect ratio
* property.
* Determines whether a specific React {@code Component} decorated into an
* {@link AspectRatioAware} has {@link ASPECT_RATIO_NARROW} as the value of its
* {@code aspectRatio} React prop.
*
* @param {AspectRatioAwareWrapper} component - A
* {@link AspectRatioAwareWrapper} which has <tt>aspectRation</tt> property.
* @param {AspectRatioAware} component - An {@link AspectRatioAware} which may
* have an {@code aspectRatio} React prop.
* @returns {boolean}
*/
export function isNarrowAspectRatio(component: React$Component<*>) {
@ -62,13 +62,13 @@ export function makeAspectRatioAware(
}
/**
* Maps Redux state to {@link AspectRatioAwareWrapper} properties.
* Maps (parts of) the redux state to {@link AspectRatioAware} props.
*
* @param {Object} state - The Redux whole state.
* @param {Object} state - The whole redux state.
* @private
* @returns {{
* aspectRatio: Symbol
* }}
* @private
*/
function _mapStateToProps(state) {
return {

23
react/features/base/aspect-ratio/components/AspectRatioDetector.native.js
View File

@ -3,7 +3,7 @@ import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
import { calculateNewAspectRatio } from '../actions';
import { setAspectRatio } from '../actions';
import styles from './styles';
/**
@ -25,7 +25,7 @@ class AspectRatioDetector extends Component {
/**
* Any nested components.
*/
children: PropTypes.object
children: PropTypes.node
};
/**
@ -37,9 +37,10 @@ class AspectRatioDetector extends Component {
return (
<View
onLayout = { this.props._onLayout }
style = { styles.aspectRatioDetectorStyle } >
{this.props.children}
</View>);
style = { styles.aspectRatioDetector } >
{ this.props.children }
</View>
);
}
}
@ -58,15 +59,13 @@ function _mapDispatchToProps(dispatch) {
* Handles the "on layout" View's event and dispatches aspect ratio
* changed action.
*
* @param {{ width: number, height: number }} event - The "on layout"
* event structure passed by react-native.
* @returns {void}
* @param {Object} event - The "on layout" event object/structure passed
* by react-native.
* @private
* @returns {void}
*/
_onLayout(event) {
const { width, height } = event.nativeEvent.layout;
dispatch(calculateNewAspectRatio(width, height));
_onLayout({ nativeEvent: { layout: { height, width } } }) {
dispatch(setAspectRatio(width, height));
}
};
}

10
react/features/base/aspect-ratio/components/styles.js
View File

@ -1,14 +1,14 @@
import { createStyleSheet, fixAndroidViewClipping } from '../../styles/index';
import { createStyleSheet } from '../../styles';
/**
* The styles of the feature app.
* The styles of the feature base/aspect-ratio.
*/
export default createStyleSheet({
/**
* The style for {@link AspectRatioDetector} root view used on react-native.
* The style of {@link AspectRatioDetector} used on react-native.
*/
aspectRatioDetectorStyle: fixAndroidViewClipping({
aspectRatioDetector: {
alignSelf: 'stretch',
flex: 1
})
}
});

8
react/features/base/aspect-ratio/constants.js
View File

@ -1,14 +1,14 @@
/**
* The aspect ratio constant indicates that the app area's width is smaller than
* the height.
* The aspect ratio constant which indicates that the width (of whatever the
* aspect ratio constant is used for) is smaller than the height.
*
* @type {Symbol}
*/
export const ASPECT_RATIO_NARROW = Symbol('ASPECT_RATIO_NARROW');
/**
* Aspect ratio constant indicates that the app area's width is larger than
* the height.
* The aspect ratio constant which indicates that the width (of whatever the
* aspect ratio constant is used for) is larger than the height.
*
* @type {Symbol}
*/

21
react/features/base/aspect-ratio/reducer.js
View File

@ -3,17 +3,20 @@ import { ReducerRegistry, set } from '../redux';
import { SET_ASPECT_RATIO } from './actionTypes';
import { ASPECT_RATIO_NARROW } from './constants';
const INITIAL_STATE = {
/**
* The initial redux state of the feature base/aspect-ratio.
*/
const _INITIAL_STATE = {
aspectRatio: ASPECT_RATIO_NARROW
};
ReducerRegistry.register(
'features/base/aspect-ratio',
(state = INITIAL_STATE, action) => {
switch (action.type) {
case SET_ASPECT_RATIO:
return set(state, 'aspectRatio', action.aspectRatio);
}
'features/base/aspect-ratio',
(state = _INITIAL_STATE, action) => {
switch (action.type) {
case SET_ASPECT_RATIO:
return set(state, 'aspectRatio', action.aspectRatio);
}
return state;
});
return state;
});

13
react/features/conference/components/Conference.native.js
View File

@ -202,16 +202,15 @@ class Conference extends Component {
<View style = { styles.toolboxAndFilmstripContainer } >
{/*
* The Toolbox is in a stacking layer above the Filmstrip.
* The Toolbox is in a stacking layer bellow the Filmstrip.
*/}
<Toolbox />
{/*
* The Filmstrip is in a stacking layer above
* the LargeVideo.
* The LargeVideo and the Filmstrip form what the Web/React
* app calls "videospace". Presumably, the name and
* grouping stem from the fact that these two React
* Components depict the videos of the conference's
* The Filmstrip is in a stacking layer above the
* LargeVideo. The LargeVideo and the Filmstrip form what
* the Web/React app calls "videospace". Presumably, the
* name and grouping stem from the fact that these two
* React Components depict the videos of the conference's
* participants.
*/}
<Filmstrip />

2
react/features/conference/components/styles.js
View File

@ -47,8 +47,8 @@ export default createStyleSheet({
toolboxAndFilmstripContainer: {
bottom: 0,
flexDirection: 'column',
left: 0,
justifyContent: 'flex-end',
left: 0,
position: 'absolute',
right: 0,
top: 0

19
react/features/filmstrip/components/Filmstrip.native.js
View File

@ -51,20 +51,21 @@ class Filmstrip extends Component<*> {
* @returns {ReactElement}
*/
render() {
const isNarrowAspectRatio_ = isNarrowAspectRatio(this);
const filmstripStyle
= isNarrowAspectRatio(this)
? styles.filmstripNarrow : styles.filmstripWide;
= isNarrowAspectRatio_
? styles.filmstripNarrow
: styles.filmstripWide;
return (
<Container
style = { filmstripStyle }
visible = { this.props._visible } >
visible = { this.props._visible }>
<ScrollView
horizontal = { isNarrowAspectRatio(this) }
horizontal = { isNarrowAspectRatio_ }
showsHorizontalScrollIndicator = { false }
showsVerticalScrollIndicator = { false }>
{
/* eslint-disable react/jsx-wrap-multilines */
this._sort(this.props._participants)
@ -138,11 +139,9 @@ function _mapStateToProps(state) {
_participants: participants,
/**
* The indicator which determines whether the filmstrip is visible.
*
* XXX The React Component Filmstrip is used on mobile only at the time
* of this writing and on mobile the filmstrip is when there are at
* least 2 participants in the conference (including the local one).
* The indicator which determines whether the filmstrip is visible. The
* mobile/react-native Filmstrip is visible when there are at least 2
* participants in the conference (including the local one).
*
* @private
* @type {boolean}

20
react/features/filmstrip/components/styles.js
View File

@ -2,11 +2,11 @@ import { Platform } from '../../base/react';
import { BoxModel, ColorPalette } from '../../base/styles';
/**
* The base filmstrip style shared between narrow and wide versions.
* The base style of {@link Filmstrip} shared between narrow and wide versions.
*/
const filmstripBaseStyle = {
flexGrow: 0,
flexDirection: 'column'
const filmstrip = {
flexDirection: 'column',
flexGrow: 0
};
/**
@ -48,11 +48,11 @@ export default {
},
/**
* The style of the narrow filmstrip version which displays thumbnails
* in a row at the bottom of the screen.
* The style of the narrow {@link Filmstrip} version which displays
* thumbnails in a row at the bottom of the screen.
*/
filmstripNarrow: {
...filmstripBaseStyle,
...filmstrip,
alignItems: 'flex-end',
height: 90,
marginBottom: BoxModel.margin,
@ -61,11 +61,11 @@ export default {
},
/**
* The style of the wide version of the filmstrip which appears as a column
* on the short side of the screen.
* The style of the wide {@link Filmstrip} version which displays thumbnails
* in a column on the short size of the screen.
*/
filmstripWide: {
...filmstripBaseStyle,
...filmstrip,
bottom: BoxModel.margin,
left: BoxModel.margin,
position: 'absolute',

28
react/features/toolbox/components/Toolbox.native.js
View File

@ -123,12 +123,14 @@ class Toolbox extends Component {
* @returns {ReactElement}
*/
render() {
const toolboxStyle
= isNarrowAspectRatio(this)
? styles.toolboxNarrow
: styles.toolboxWide;
return (
<Container
style = {
isNarrowAspectRatio(this)
? styles.toolbarContainerNarrow
: styles.toolbarContainerWide }
style = { toolboxStyle }
visible = { this.props._visible } >
{ this._renderToolbars() }
</Container>
@ -311,23 +313,17 @@ class Toolbox extends Component {
}
/**
* Renders the primary and the secondary toolbars in the order depending on
* the current aspect ratio.
* Renders the primary and the secondary toolbars.
*
* @returns {[ReactElement, ReactElement]}
* @private
* @returns {[ReactElement, ReactElement]}
*/
_renderToolbars() {
if (isNarrowAspectRatio(this)) {
return [
this._renderSecondaryToolbar(),
this._renderPrimaryToolbar()
];
}
return [ this._renderPrimaryToolbar(), this._renderSecondaryToolbar() ];
return [
this._renderSecondaryToolbar(),
this._renderPrimaryToolbar()
];
}
}
/**

12
react/features/toolbox/components/styles.js
View File

@ -139,19 +139,19 @@ export default createStyleSheet({
* spans from the top of the screen to the top of the filmstrip located at
* the bottom of the screen.
*/
toolbarContainerNarrow: {
toolboxNarrow: {
flexDirection: 'column',
flexGrow: 1
},
/**
* The style of the root/top-level {@link Container} of {@link Toolbox}
* which contains {@link Toolbar}s. This is wide layout version which
* spans from the top to the bottom of the screen and is located to
* the right of the filmstrip which is displayed as a column on the left
* side of the screen.
* which contains {@link Toolbar}s. This is wide layout version which spans
* from the top to the bottom of the screen and is located to the right of
* the filmstrip which is displayed as a column on the left side of the
* screen.
*/
toolbarContainerWide: {
toolboxWide: {
bottom: 0,
left: 0,
position: 'absolute',