feat(prejoin) add room name to premeeting screen (#12049)

css/premeeting/_premeeting-screens.scss

@@ -101,7 +101,7 @@
                 font-weight: 600;
                 letter-spacing: -0.015;
                 line-height: 36px;
-                margin-bottom: 32px;
+                margin-bottom: 16px;
                 text-align: center;
             }
 

react/features/base/premeeting/components/web/PreMeetingScreen.js

@@ -1,12 +1,15 @@
 // @flow
 
+import { withStyles } from '@material-ui/styles';
 import React, { PureComponent } from 'react';
 
 import { connect } from '../../../../base/redux';
 import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus';
 import { Toolbox } from '../../../../toolbox/components/web';
+import { getRoomName } from '../../../conference';
 import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants';
 import { getToolbarButtons, isToolbarButtonEnabled } from '../../../config/functions.web';
+import { withPixelLineHeight } from '../../../styles/functions.web';
 
 import ConnectionStatus from './ConnectionStatus';
 import Preview from './Preview';
@@ -23,11 +26,21 @@ type Props = {
      */
     _premeetingBackground: string,
 
+    /**
+     * The name of the meeting that is about to be joined.
+     */
+    _roomName: string,
+
     /**
      * Children component(s) to be rendered on the screen.
      */
     children?: React$Node,
 
+    /**
+     * Classes prop injected by withStyles.
+     */
+    classes: Object,
+
     /**
      * Additional CSS class names to set on the icon container.
      */
@@ -74,6 +87,28 @@ type Props = {
     videoTrack?: Object
 }
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        subtitle: {
+            ...withPixelLineHeight(theme.typography.heading5),
+            color: theme.palette.text01,
+            marginBottom: theme.spacing(4),
+            overflow: 'hidden',
+            textAlign: 'center',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            width: '100%'
+        }
+    };
+};
+
 /**
  * Implements a pre-meeting screen that can be used at various pre-meeting phases, for example
  * on the prejoin screen (pre-connection) or lobby (post-connection).
@@ -98,7 +133,9 @@ class PreMeetingScreen extends PureComponent<Props> {
         const {
             _buttons,
             _premeetingBackground,
+            _roomName,
             children,
+            classes,
             className,
             showDeviceStatus,
             skipPrejoinButton,
@@ -124,6 +161,9 @@ class PreMeetingScreen extends PureComponent<Props> {
                             <h1 className = 'title'>
                                 { title }
                             </h1>
+                            <span className = { classes.subtitle }>
+                                {_roomName}
+                            </span>
                             { children }
                             { _buttons.length && <Toolbox toolbarButtons = { _buttons } /> }
                             { skipPrejoinButton }
@@ -165,8 +205,9 @@ function mapStateToProps(state, ownProps): Object {
         _buttons: hiddenPremeetingButtons
             ? premeetingButtons
             : premeetingButtons.filter(b => isToolbarButtonEnabled(b, toolbarButtons)),
-        _premeetingBackground: premeetingBackground
+        _premeetingBackground: premeetingBackground,
+        _roomName: getRoomName(state)
     };
 }
 
-export default connect(mapStateToProps)(PreMeetingScreen);
+export default connect(mapStateToProps)(withStyles(styles)(PreMeetingScreen));

react/features/prejoin/components/Prejoin.web.js

@@ -5,7 +5,6 @@ import React, { Component } from 'react';
 
 import { LoginDialog, WaitForOwnerDialog } from '../../authentication/components';
 import { Avatar } from '../../base/avatar';
-import { getRoomName } from '../../base/conference';
 import { isNameReadOnly } from '../../base/config';
 import { isDialogOpen } from '../../base/dialog/functions';
 import { translate } from '../../base/i18n';
@@ -91,11 +90,6 @@ type Props = {
      */
     readOnlyName: boolean,
 
-    /**
-     * The name of the meeting that is about to be joined.
-     */
-    roomName: string,
-
     /**
      * Sets visibility of the 'JoinByPhoneDialog'.
      */
@@ -474,7 +468,6 @@ function mapStateToProps(state): Object {
         participantId,
         prejoinConfig: state['features/base/config'].prejoinConfig,
         readOnlyName: isNameReadOnly(state),
-        roomName: getRoomName(state),
         showCameraPreview: !isVideoMutedByUser(state),
         showDialog: isJoinByPhoneDialogVisible(state),
         showErrorOnJoin,