[RN] Add ability to enable / disable the filmstrip (Coding style: comments, naming)

This commit is contained in:
Lyubo Marinov 2018-02-12 11:42:38 -06:00
parent 7bd8b7948f
commit 240fff74c7
6 changed files with 54 additions and 32 deletions

View File

@ -355,9 +355,9 @@ function _mapDispatchToProps(dispatch) {
}
/**
* Maps (parts of) the Redux state to the associated Conference's props.
* Maps (parts of) the redux state to the associated {@code Conference}'s props.
*
* @param {Object} state - The Redux state.
* @param {Object} state - The redux state.
* @private
* @returns {{
* _connecting: boolean,

View File

@ -25,9 +25,9 @@ declare var interfaceConfig: Object;
type Props = {
/**
* Whether or not the current local user is recording the conference.
* Whether the local participant is recording the conference.
*/
_isRecording: boolean,
_iAmRecorder: boolean,
dispatch: Function,
t: Function
@ -102,9 +102,10 @@ class Conference extends Component<Props> {
*/
render() {
const { filmStripOnly, VIDEO_QUALITY_LABEL_DISABLED } = interfaceConfig;
const hideVideoQualityLabel = filmStripOnly
|| VIDEO_QUALITY_LABEL_DISABLED
|| this.props._isRecording;
const hideVideoQualityLabel
= filmStripOnly
|| VIDEO_QUALITY_LABEL_DISABLED
|| this.props._iAmRecorder;
return (
<div
@ -153,18 +154,17 @@ class Conference extends Component<Props> {
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _isRecording: boolean
* _iAmRecorder: boolean
* }}
*/
function _mapStateToProps(state) {
return {
/**
* Indicates if the current user is recording the conference, ie, they
* are a recorder.
* Whether the local participant is recording the conference.
*
* @private
*/
_isRecording: state['features/base/config'].iAmRecorder
_iAmRecorder: state['features/base/config'].iAmRecorder
};
}

View File

@ -1,6 +1,5 @@
/**
* The type of (redux) action which sets whether the filmstrip is enabled or
* not.
* The type of (redux) action which sets whether the filmstrip is enabled.
*
* {
* type: SET_FILMSTRIP_ENABLED,
@ -21,7 +20,7 @@ export const SET_FILMSTRIP_ENABLED = Symbol('SET_FILMSTRIP_ENABLED');
export const SET_FILMSTRIP_HOVERED = Symbol('SET_FILMSTRIP_HOVERED');
/**
* The type of (redux) action which sets the visibility of the filmstrip.
* The type of (redux) action which sets whether the filmstrip is visible.
*
* {
* type: SET_FILMSTRIP_VISIBLE,

View File

@ -1,3 +1,5 @@
// @flow
import {
SET_FILMSTRIP_ENABLED,
SET_FILMSTRIP_HOVERED,
@ -5,15 +7,15 @@ import {
} from './actionTypes';
/**
* Sets if the filmstrip should be enabled.
* Sets whether the filmstrip is enabled.
*
* @param {boolean} enabled - Whether the filmstrip should be enabled.
* @param {boolean} enabled - Whether the filmstrip is enabled.
* @returns {{
* type: SET_FILMSTRIP_ENABLED,
* enabled: boolean
* }}
*/
export function setFilmstripEnabled(enabled) {
export function setFilmstripEnabled(enabled: boolean) {
return {
type: SET_FILMSTRIP_ENABLED,
enabled
@ -21,16 +23,15 @@ export function setFilmstripEnabled(enabled) {
}
/**
* Sets if the filmstrip is currently being hovered over.
* Sets whether the filmstrip is being hovered (over).
*
* @param {boolean} hovered - Whether or not the filmstrip is currently being
* hovered over.
* @param {boolean} hovered - Whether the filmstrip is being hovered (over).
* @returns {{
* type: SET_FILMSTRIP_HOVERED,
* hovered: boolean
* }}
*/
export function setFilmstripHovered(hovered) {
export function setFilmstripHovered(hovered: boolean) {
return {
type: SET_FILMSTRIP_HOVERED,
hovered
@ -38,15 +39,15 @@ export function setFilmstripHovered(hovered) {
}
/**
* Sets if the filmstrip should be visible.
* Sets whether the filmstrip is visible.
*
* @param {boolean} visible - Whether the filmstrip should be visible.
* @param {boolean} visible - Whether the filmstrip is visible.
* @returns {{
* type: SET_FILMSTRIP_VISIBLE,
* visible: boolean
* }}
*/
export function setFilmstripVisible(visible) {
export function setFilmstripVisible(visible: boolean) {
return {
type: SET_FILMSTRIP_VISIBLE,
visible

View File

@ -10,7 +10,7 @@ import {
makeAspectRatioAware
} from '../../base/responsive-ui';
import { styles } from './_';
import styles from './styles';
import Thumbnail from './Thumbnail';
/**
@ -63,14 +63,11 @@ class Filmstrip extends Component<Props> {
= isNarrowAspectRatio_
? styles.filmstripNarrow
: styles.filmstripWide;
const {
_participants: participants,
_visible: visible } = this.props;
return (
<Container
style = { filmstripStyle }
visible = { visible }>
visible = { this.props._visible }>
<ScrollView
horizontal = { isNarrowAspectRatio_ }
showsHorizontalScrollIndicator = { false }
@ -78,7 +75,9 @@ class Filmstrip extends Component<Props> {
{
/* eslint-disable react/jsx-wrap-multilines */
this._sort(participants, isNarrowAspectRatio_)
this._sort(
this.props._participants,
isNarrowAspectRatio_)
.map(p =>
<Thumbnail
key = { p.id }
@ -127,9 +126,9 @@ class Filmstrip extends Component<Props> {
}
/**
* Function that maps parts of Redux state tree into component props.
* Maps (parts of) the redux state to the associated {@code Filmstrip}'s props.
*
* @param {Object} state - Redux state.
* @param {Object} state - The redux state.
* @private
* @returns {{
* _participants: Participant[],

View File

@ -1,3 +1,5 @@
// @flow
import { ReducerRegistry } from '../base/redux';
import {
@ -7,7 +9,20 @@ import {
} from './actionTypes';
const DEFAULT_STATE = {
/**
* The indicator which determines whether the {@link Filmstrip} is enabled.
*
* @public
* @type {boolean}
*/
enabled: true,
/**
* The indicator which determines whether the {@link Filmstrip} is visible.
*
* @public
* @type {boolean}
*/
visible: true
};
@ -24,6 +39,14 @@ ReducerRegistry.register(
case SET_FILMSTRIP_HOVERED:
return {
...state,
/**
* The indicator which determines whether the {@link Filmstrip}
* is being hovered (over).
*
* @public
* @type {boolean}
*/
hovered: action.hovered
};