[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:
parent
a505c01e9e
commit
7bd8b7948f
|
@ -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.
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
|
@ -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';
|
||||
|
@ -14,36 +13,40 @@ import {
|
|||
import { styles } from './_';
|
||||
import Thumbnail from './Thumbnail';
|
||||
|
||||
/**
|
||||
* Filmstrip component's property types.
|
||||
*/
|
||||
type Props = {
|
||||
|
||||
/**
|
||||
* The indicator which determines whether the filmstrip is enabled.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_enabled: boolean,
|
||||
|
||||
/**
|
||||
* The participants in the conference.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_participants: Array<any>,
|
||||
|
||||
/**
|
||||
* The indicator which determines whether the filmstrip is visible.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
_visible: boolean
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = {
|
||||
/**
|
||||
* The participants in the conference.
|
||||
*
|
||||
* @private
|
||||
* @type {Participant[]}
|
||||
*/
|
||||
_participants: PropTypes.array,
|
||||
|
||||
/**
|
||||
* The indicator which determines whether the filmstrip is visible.
|
||||
*
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
_visible: PropTypes.bool.isRequired
|
||||
};
|
||||
|
||||
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.
|
||||
*
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue