diff --git a/react/features/conference/components/AbstractConference.js b/react/features/conference/components/AbstractConference.js new file mode 100644 index 000000000..d19f07479 --- /dev/null +++ b/react/features/conference/components/AbstractConference.js @@ -0,0 +1,40 @@ +// @flow + +import { shouldDisplayTileView } from '../../video-layout'; + +/** + * The type of the React {@code Component} props of {@link AbstractLabels}. + */ +export type AbstractProps = { + + /** + * Conference room name. + * + * @protected + * @type {string} + */ + _room: string, + + /** + * Whether or not the layout should change to support tile view mode. + * + * @protected + * @type {boolean} + */ + _shouldDisplayTileView: boolean +}; + +/** + * Maps (parts of) the redux state to the associated props of the {@link Labels} + * {@code Component}. + * + * @param {Object} state - The redux state. + * @private + * @returns {AbstractProps} + */ +export function abstractMapStateToProps(state: Object) { + return { + _room: state['features/base/conference'].room, + _shouldDisplayTileView: shouldDisplayTileView(state) + }; +} diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js index 7d9ad8360..8ee260b17 100644 --- a/react/features/conference/components/native/Conference.js +++ b/react/features/conference/components/native/Conference.js @@ -25,17 +25,19 @@ import { LargeVideo } from '../../../large-video'; import { AddPeopleDialog, CalleeInfoContainer } from '../../../invite'; import { Captions } from '../../../subtitles'; import { setToolboxVisible, Toolbox } from '../../../toolbox'; -import { shouldDisplayTileView } from '../../../video-layout'; +import { abstractMapStateToProps } from '../AbstractConference'; import DisplayNameLabel from './DisplayNameLabel'; import Labels from './Labels'; import NavigationBar from './NavigationBar'; import styles from './styles'; +import type { AbstractProps } from '../AbstractConference'; + /** * The type of the React {@code Component} props of {@link Conference}. */ -type Props = { +type Props = AbstractProps & { /** * The indicator which determines that we are still connecting to the @@ -103,13 +105,6 @@ type Props = { */ _reducedUI: boolean, - /** - * The current conference room name. - * - * @private - */ - _room: string, - /** * The handler which dispatches the (redux) action {@link setToolboxVisible} * to show/hide the {@link Toolbox}. @@ -121,13 +116,6 @@ type Props = { */ _setToolboxVisible: Function, - /** - * Whether or not the layout should change to support tile view mode. - * - * @private - */ - _shouldDisplayTileView: boolean, - /** * The indicator which determines whether the Toolbox is visible. * @@ -424,16 +412,7 @@ function _mapDispatchToProps(dispatch) { * * @param {Object} state - The redux state. * @private - * @returns {{ - * _connecting: boolean, - * _filmstripVisible: boolean, - * _locationURL: URL, - * _participantCount: number, - * _reducedUI: boolean, - * _room: string, - * _toolboxVisible: boolean, - * _toolboxAlwaysVisible: boolean - * }} + * @returns {Props} */ function _mapStateToProps(state) { const { connecting, connection, locationURL } @@ -441,8 +420,7 @@ function _mapStateToProps(state) { const { conference, joining, - leaving, - room + leaving } = state['features/base/conference']; const { reducedUI } = state['features/base/responsive-ui']; const { alwaysVisible, visible } = state['features/toolbox']; @@ -460,6 +438,8 @@ function _mapStateToProps(state) { = connecting || (connection && (joining || (!conference && !leaving))); return { + ...abstractMapStateToProps(state), + /** * The indicator which determines that we are still connecting to the * conference which includes establishing the XMPP connection and then @@ -501,22 +481,6 @@ function _mapStateToProps(state) { */ _reducedUI: reducedUI, - /** - * The current conference room name. - * - * @private - * @type {string} - */ - _room: room, - - /** - * Whether or not the layout should change to support tile view mode. - * - * @private - * @type {boolean} - */ - _shouldDisplayTileView: shouldDisplayTileView(state), - /** * The indicator which determines whether the Toolbox is visible. * diff --git a/react/features/conference/components/web/Conference.js b/react/features/conference/components/web/Conference.js index bc54ecb65..4693acf0a 100644 --- a/react/features/conference/components/web/Conference.js +++ b/react/features/conference/components/web/Conference.js @@ -14,11 +14,7 @@ import { Filmstrip } from '../../../filmstrip'; import { CalleeInfoContainer } from '../../../invite'; import { LargeVideo } from '../../../large-video'; import { NotificationsContainer } from '../../../notifications'; -import { - LAYOUTS, - getCurrentLayout, - shouldDisplayTileView -} from '../../../video-layout'; +import { LAYOUTS, getCurrentLayout } from '../../../video-layout'; import { Toolbox, @@ -32,6 +28,9 @@ import { maybeShowSuboptimalExperienceNotification } from '../../functions'; import Labels from './Labels'; import { default as Notice } from './Notice'; import { default as Subject } from './Subject'; +import { abstractMapStateToProps } from '../AbstractConference'; + +import type { AbstractProps } from '../AbstractConference'; declare var APP: Object; declare var config: Object; @@ -68,7 +67,7 @@ const LAYOUT_CLASSNAMES = { /** * The type of the React {@code Component} props of {@link Conference}. */ -type Props = { +type Props = AbstractProps & { /** * Whether the local participant is recording the conference. @@ -81,16 +80,6 @@ type Props = { */ _layoutClassName: string, - /** - * Conference room name. - */ - _room: string, - - /** - * Whether or not the current UI layout should be in tile view. - */ - _shouldDisplayTileView: boolean, - dispatch: Function, t: Function } @@ -290,21 +279,15 @@ class Conference extends Component { * * @param {Object} state - The Redux state. * @private - * @returns {{ - * _iAmRecorder: boolean, - * _layoutClassName: string, - * _room: ?string, - * _shouldDisplayTileView: boolean - * }} + * @returns {Props} */ function _mapStateToProps(state) { const currentLayout = getCurrentLayout(state); return { + ...abstractMapStateToProps(state), _iAmRecorder: state['features/base/config'].iAmRecorder, - _layoutClassName: LAYOUT_CLASSNAMES[currentLayout], - _room: state['features/base/conference'].room, - _shouldDisplayTileView: shouldDisplayTileView(state) + _layoutClassName: LAYOUT_CLASSNAMES[currentLayout] }; }