ref(Conference): extract AbstractConference

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

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 {{
+ * @returns {Props}
- *     _connecting: boolean,
- *     _filmstripVisible: boolean,
- *     _locationURL: URL,
- *     _participantCount: number,
- *     _reducedUI: boolean,
- *     _room: string,
- *     _toolboxVisible: boolean,
- *     _toolboxAlwaysVisible: boolean
- * }}
  */
 function _mapStateToProps(state) {
     const { connecting, connection, locationURL }
@@ -441,8 +420,7 @@ function _mapStateToProps(state) {
     const {
         conference,
         joining,
-        leaving,
+        leaving
-        room
     } = 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.
          *

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 {
+import { LAYOUTS, getCurrentLayout } from '../../../video-layout';
-    LAYOUTS,
-    getCurrentLayout,
-    shouldDisplayTileView
-} 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<Props> {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {{
+ * @returns {Props}
- *     _iAmRecorder: boolean,
- *     _layoutClassName: string,
- *     _room: ?string,
- *     _shouldDisplayTileView: boolean
- * }}
  */
 function _mapStateToProps(state) {
     const currentLayout = getCurrentLayout(state);
 
     return {
+        ...abstractMapStateToProps(state),
         _iAmRecorder: state['features/base/config'].iAmRecorder,
-        _layoutClassName: LAYOUT_CLASSNAMES[currentLayout],
+        _layoutClassName: LAYOUT_CLASSNAMES[currentLayout]
-        _room: state['features/base/conference'].room,
-        _shouldDisplayTileView: shouldDisplayTileView(state)
     };
 }