[RN] Add ability to enable / disable the filmstrip

This is only implemented for mobile at the moment, since web doesn't handle
visibility within the Filmstrip component yet, so this should be added right
then, too.
This commit is contained in:
Saúl Ibarra Corretgé 2018-02-06 10:40:16 +01:00 committed by Lyubo Marinov
parent a505c01e9e
commit 7bd8b7948f
4 changed files with 81 additions and 27 deletions

View File

@ -1,3 +1,14 @@
/**
* The type of (redux) action which sets whether the filmstrip is enabled or
* not.
*
* {
* type: SET_FILMSTRIP_ENABLED,
* enabled: boolean
* }
*/
export const SET_FILMSTRIP_ENABLED = Symbol('SET_FILMSTRIP_ENABLED');
/**
* The type of (redux) action which sets whether or not the filmstrip is being
* hovered with the cursor.

View File

@ -1,8 +1,25 @@
import {
SET_FILMSTRIP_ENABLED,
SET_FILMSTRIP_HOVERED,
SET_FILMSTRIP_VISIBLE
} from './actionTypes';
/**
* Sets if the filmstrip should be enabled.
*
* @param {boolean} enabled - Whether the filmstrip should be enabled.
* @returns {{
* type: SET_FILMSTRIP_ENABLED,
* enabled: boolean
* }}
*/
export function setFilmstripEnabled(enabled) {
return {
type: SET_FILMSTRIP_ENABLED,
enabled
};
}
/**
* Sets if the filmstrip is currently being hovered over.
*

View File

@ -1,6 +1,5 @@
// @flow
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import { connect } from 'react-redux';
@ -15,35 +14,39 @@ import { styles } from './_';
import Thumbnail from './Thumbnail';
/**
* Implements a React {@link Component} which represents the filmstrip on
* mobile/React Native.
*
* @extends Component
*/
class Filmstrip extends Component<*> {
/**
* Filmstrip component's property types.
*
* @static
*/
static propTypes = {
type Props = {
/**
* The indicator which determines whether the filmstrip is enabled.
*
* @private
*/
_enabled: boolean,
/**
* The participants in the conference.
*
* @private
* @type {Participant[]}
*/
_participants: PropTypes.array,
_participants: Array<any>,
/**
* The indicator which determines whether the filmstrip is visible.
*
* @private
* @type {boolean}
*/
_visible: PropTypes.bool.isRequired
};
_visible: boolean
};
/**
* Implements a React {@link Component} which represents the filmstrip on
* mobile/React Native.
*
* @extends Component
*/
class Filmstrip extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
@ -51,6 +54,10 @@ class Filmstrip extends Component<*> {
* @returns {ReactElement}
*/
render() {
if (!this.props._enabled) {
return null;
}
const isNarrowAspectRatio_ = isNarrowAspectRatio(this);
const filmstripStyle
= isNarrowAspectRatio_
@ -131,9 +138,17 @@ class Filmstrip extends Component<*> {
*/
function _mapStateToProps(state) {
const participants = state['features/base/participants'];
const { visible } = state['features/filmstrip'];
const { enabled, visible } = state['features/filmstrip'];
return {
/**
* The indicator which determines whether the filmstrip is enabled.
*
* @private
* @type {boolean}
*/
_enabled: enabled,
/**
* The participants in the conference.
*

View File

@ -1,8 +1,13 @@
import { ReducerRegistry } from '../base/redux';
import { SET_FILMSTRIP_HOVERED, SET_FILMSTRIP_VISIBLE } from './actionTypes';
import {
SET_FILMSTRIP_ENABLED,
SET_FILMSTRIP_HOVERED,
SET_FILMSTRIP_VISIBLE
} from './actionTypes';
const DEFAULT_STATE = {
enabled: true,
visible: true
};
@ -10,6 +15,12 @@ ReducerRegistry.register(
'features/filmstrip',
(state = DEFAULT_STATE, action) => {
switch (action.type) {
case SET_FILMSTRIP_ENABLED:
return {
...state,
enabled: action.enabled
};
case SET_FILMSTRIP_HOVERED:
return {
...state,