ref(Conference): extract AbstractConference

react/features/conference/components/AbstractConference.js

+// @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)
+    };
+}

react/features/conference/components/native/Conference.js

 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
      */
     _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}.
      */
     _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.
      *
  *
  * @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 }
     const {
         conference,
         joining,
-        leaving,
-        room
+        leaving
     } = state['features/base/conference'];
     const { reducedUI } = state['features/base/responsive-ui'];
     const { alwaysVisible, visible } = state['features/toolbox'];
         = 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
          */
         _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.
          *

react/features/conference/components/web/Conference.js

 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,
 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;
 /**
  * The type of the React {@code Component} props of {@link Conference}.
  */
-type Props = {
+type Props = AbstractProps & {
 
     /**
      * Whether the local participant is recording the conference.
      */
     _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
 }
  *
  * @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]
     };
 }