feat(lobby/prejoin): added room name title (#12054)

* feat(lobby/prejoin): added room name title

react/features/lobby/components/native/LobbyScreen.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import { Text, View, TextInput } from 'react-native';
 
+import { getRoomName } from '../../../base/conference';
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../base/react';
@@ -29,7 +30,12 @@ type Props = AbstractProps & {
     /**
      * The current aspect ratio of the screen.
      */
-    _aspectRatio: Symbol
+    _aspectRatio: Symbol,
+
+    /**
+     * The room name.
+     */
+    _roomName: string
 }
 
 /**
@@ -117,6 +123,14 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
     _renderJoining() {
         return (
             <View>
+                <Text style = { styles.lobbyTitle }>
+                    { this.props.t('lobby.joiningTitle') }
+                </Text>
+                <Text
+                    numberOfLines = { 1 }
+                    style = { styles.lobbyRoomName }>
+                    { this.props._roomName }
+                </Text>
                 <LoadingIndicator
                     color = { BaseTheme.palette.icon01 }
                     style = { styles.loadingIndicator } />
@@ -286,7 +300,8 @@ class LobbyScreen extends AbstractLobbyScreen<Props> {
 function _mapStateToProps(state: Object, ownProps: Props) {
     return {
         ...abstractMapStateToProps(state, ownProps),
-        _aspectRatio: state['features/base/responsive-ui'].aspectRatio
+        _aspectRatio: state['features/base/responsive-ui'].aspectRatio,
+        _roomName: getRoomName(state)
     };
 }
 

react/features/lobby/components/native/styles.js

@@ -4,6 +4,12 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 const SECONDARY_COLOR = BaseTheme.palette.border04;
 
+const lobbyText = {
+    ...BaseTheme.typography.heading5,
+    color: BaseTheme.palette.text01,
+    textAlign: 'center'
+};
+
 export default {
 
     buttonStylesBorderless: {
@@ -236,5 +242,14 @@ export default {
 
     lobbySwitchIcon: {
         alignSelf: 'flex-end'
+    },
+
+    lobbyTitle: {
+        ...lobbyText
+    },
+
+    lobbyRoomName: {
+        ...lobbyText,
+        marginBottom: BaseTheme.spacing[2]
     }
 };

react/features/prejoin/components/Prejoin.native.tsx

@@ -3,11 +3,12 @@ import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next';
 import {
     BackHandler,
-    View,
-    TextInput,
     Platform,
     StyleProp,
+    Text,
+    TextInput,
     TextStyle,
+    View,
     ViewStyle
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
@@ -17,6 +18,8 @@ import { appNavigate } from '../../app/actions.native';
 // @ts-ignore
 import { setAudioOnly } from '../../base/audio-only/actions';
 // @ts-ignore
+import { getRoomName } from '../../base/conference/functions';
+// @ts-ignore
 import { connect } from '../../base/connection/actions.native';
 import { IconClose } from '../../base/icons/svg/index';
 // @ts-ignore
@@ -61,6 +64,7 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
     );
     const localParticipant = useSelector((state: any) => getLocalParticipant(state));
     const isDisplayNameMandatory = useSelector(state => isDisplayNameRequired(state));
+    const roomName = useSelector(state => getRoomName(state));
     const participantName = localParticipant?.name;
     const [ displayName, setDisplayName ]
         = useState(participantName || '');
@@ -149,6 +153,14 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
             </View>
             <View style = { contentContainerStyles }>
                 <View style = { styles.formWrapper as StyleProp<ViewStyle> }>
+                    <Text style = { styles.preJoinTitle as StyleProp<TextStyle> }>
+                        { t('prejoin.joinMeeting') }
+                    </Text>
+                    <Text
+                        numberOfLines = { 1 }
+                        style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
+                        { roomName }
+                    </Text>
                     <TextInput
                         onChangeText = { onChangeDisplayName }
                         placeholder = { t('dialog.enterDisplayName') }

react/features/prejoin/components/styles.js

@@ -2,6 +2,11 @@ import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 const SECONDARY_COLOR = BaseTheme.palette.border04;
 
+const preJoinText = {
+    ...BaseTheme.typography.heading5,
+    color: BaseTheme.palette.text01,
+    textAlign: 'center'
+};
 
 export default {
     prejoinButton: {
@@ -67,13 +72,13 @@ export default {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: BaseTheme.spacing[4]
+        marginTop: BaseTheme.spacing[3]
     },
 
     toolboxContainerWide: {
         flexDirection: 'row',
         justifyContent: 'center',
-        marginTop: BaseTheme.spacing[4]
+        marginTop: BaseTheme.spacing[3]
     },
 
     formWrapper: {
@@ -91,5 +96,13 @@ export default {
         height: BaseTheme.spacing[7],
         marginTop: BaseTheme.spacing[3],
         textAlign: 'center'
+    },
+
+    preJoinTitle: {
+        ...preJoinText
+    },
+
+    preJoinRoomName: {
+        ...preJoinText
     }
 };