feat(prejoin/lobby): style adjustments (#16550)

* UI adjustments, for prejoin and lobby, around device screen orientation.

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

@@ -8,7 +8,7 @@ import { getConferenceName } from '../../../base/conference/functions';
 import { translate } from '../../../base/i18n/functions';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';
-import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
+import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import Button from '../../../base/ui/components/native/Button';
 import Input from '../../../base/ui/components/native/Input';
@@ -35,6 +35,16 @@ interface IProps extends AbstractProps {
      */
     _aspectRatio: Symbol;
 
+    /**
+     * The current height of the screen.
+     */
+    _clientHeight: number;
+
+    /**
+     * The current width of the screen.
+     */
+    _clientWidth: number;
+
     /**
      * The room name.
      */
@@ -63,33 +73,33 @@ class LobbyScreen extends AbstractLobbyScreen<IProps> {
      * @inheritdoc
      */
     override render() {
-        const { _aspectRatio, _roomName } = this.props;
-        let contentWrapperStyles;
-        let contentContainerStyles;
-        let largeVideoContainerStyles;
+        const { _aspectRatio, _clientHeight, _clientWidth, _roomName } = this.props;
+        const isTablet = Math.min(_clientWidth, _clientHeight) >= 768;
 
-        if (_aspectRatio === ASPECT_RATIO_NARROW) {
-            contentWrapperStyles = preJoinStyles.contentWrapper;
-            largeVideoContainerStyles = preJoinStyles.largeVideoContainer;
-            contentContainerStyles = styles.contentContainer;
-        } else {
-            contentWrapperStyles = preJoinStyles.contentWrapperWide;
-            largeVideoContainerStyles = preJoinStyles.largeVideoContainerWide;
+        let contentContainerStyles = preJoinStyles.contentContainer;
+        let largeVideoContainerStyles = preJoinStyles.largeVideoContainer;
+
+        if (isTablet && _aspectRatio === ASPECT_RATIO_WIDE) {
+            // @ts-ignore
             contentContainerStyles = preJoinStyles.contentContainerWide;
+            largeVideoContainerStyles = preJoinStyles.largeVideoContainerWide;
         }
 
         return (
             <JitsiScreen
+                addBottomPadding = { false }
                 safeAreaInsets = { [ 'right' ] }
-                style = { contentWrapperStyles }>
+                style = { preJoinStyles.contentWrapper }>
                 <BrandingImageBackground />
                 <View style = { largeVideoContainerStyles as ViewStyle }>
-                    <View style = { preJoinStyles.displayRoomNameBackdrop as ViewStyle }>
-                        <Text
-                            numberOfLines = { 1 }
-                            style = { preJoinStyles.preJoinRoomName }>
-                            { _roomName }
-                        </Text>
+                    <View style = { preJoinStyles.conferenceInfo as ViewStyle }>
+                        <View style = { preJoinStyles.displayRoomNameBackdrop }>
+                            <Text
+                                numberOfLines = { 1 }
+                                style = { preJoinStyles.preJoinRoomName }>
+                                { _roomName }
+                            </Text>
+                        </View>
                     </View>
                     <LargeVideo />
                 </View>
@@ -304,6 +314,8 @@ function _mapStateToProps(state: IReduxState) {
     return {
         ...abstractMapStateToProps(state),
         _aspectRatio: state['features/base/responsive-ui'].aspectRatio,
+        _clientHeight: state['features/base/responsive-ui'].clientHeight,
+        _clientWidth: state['features/base/responsive-ui'].clientWidth,
         _roomName: getConferenceName(state)
     };
 }

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

@@ -8,13 +8,13 @@ export default {
     },
 
     passwordJoinButtons: {
-        top: 40
+        top: BaseTheme.spacing[7]
     },
 
     contentContainer: {
         alignItems: 'center',
         backgroundColor: BaseTheme.palette.uiBackground,
-        bottom: 0,
+        bottom: BaseTheme.spacing[0],
         display: 'flex',
         height: 388,
         justifyContent: 'center',
@@ -45,46 +45,6 @@ export default {
         marginBottom: BaseTheme.spacing[3]
     },
 
-    // KnockingParticipantList
-
-    knockingParticipantList: {
-        backgroundColor: BaseTheme.palette.ui01
-    },
-
-
-    knockingParticipantListDetails: {
-        flex: 1,
-        marginLeft: BaseTheme.spacing[2]
-    },
-
-    knockingParticipantListEntry: {
-        alignItems: 'center',
-        backgroundColor: BaseTheme.palette.ui01,
-        flexDirection: 'row'
-    },
-
-    knockingParticipantListText: {
-        color: 'white'
-    },
-
-    lobbyButtonAdmit: {
-        position: 'absolute',
-        right: 184,
-        top: 6
-    },
-
-    lobbyButtonChat: {
-        position: 'absolute',
-        right: 104,
-        top: 6
-    },
-
-    lobbyButtonReject: {
-        position: 'absolute',
-        right: 16,
-        top: 6
-    },
-
     lobbyTitle: {
         ...BaseTheme.typography.heading5,
         color: BaseTheme.palette.text01,

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

@@ -25,7 +25,7 @@ import { IconCloseLarge } from '../../../base/icons/svg';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import { getFieldValue } from '../../../base/react/functions';
-import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
+import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
 import { updateSettings } from '../../../base/settings/actions';
 import Button from '../../../base/ui/components/native/Button';
 import Input from '../../../base/ui/components/native/Input';
@@ -51,9 +51,10 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     const dispatch = useDispatch();
     const isFocused = useIsFocused();
     const { t } = useTranslation();
-    const aspectRatio = useSelector(
-        (state: IReduxState) => state['features/base/responsive-ui']?.aspectRatio
+    const { aspectRatio, clientHeight, clientWidth } = useSelector(
+        (state: IReduxState) => state['features/base/responsive-ui']
     );
+    const isTablet = Math.min(clientWidth, clientHeight) >= 768;
     const localParticipant = useSelector((state: IReduxState) => getLocalParticipant(state));
     const isDisplayNameMandatory = useSelector((state: IReduxState) => isDisplayNameRequired(state));
     const isDisplayNameVisible
@@ -147,16 +148,11 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
         });
     }, [ navigation ]);
 
-    let contentWrapperStyles;
-    let contentContainerStyles;
-    let largeVideoContainerStyles;
+    let contentContainerStyles = styles.contentContainer;
+    let largeVideoContainerStyles = styles.largeVideoContainer;
 
-    if (aspectRatio === ASPECT_RATIO_NARROW) {
-        contentWrapperStyles = styles.contentWrapper;
-        contentContainerStyles = styles.contentContainer;
-        largeVideoContainerStyles = styles.largeVideoContainer;
-    } else {
-        contentWrapperStyles = styles.contentWrapperWide;
+    if (isTablet && aspectRatio === ASPECT_RATIO_WIDE) {
+        // @ts-ignore
         contentContainerStyles = styles.contentContainerWide;
         largeVideoContainerStyles = styles.largeVideoContainerWide;
     }
@@ -165,7 +161,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
         <JitsiScreen
             addBottomPadding = { false }
             safeAreaInsets = { [ 'right' ] }
-            style = { contentWrapperStyles }>
+            style = { styles.contentWrapper }>
             <BrandingImageBackground />
             {
                 isFocused
@@ -207,7 +203,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                 }
                 {
                     showDisplayNameError && (
-                        <View style = { styles.errorContainer as StyleProp<TextStyle> }>
+                        <View style = { styles.errorContainer as StyleProp<ViewStyle> }>
                             <Text style = { styles.error as StyleProp<TextStyle> }>
                                 { t('prejoin.errorMissingName') }
                             </Text>

react/features/prejoin/components/native/styles.ts

@@ -10,14 +10,14 @@ export const preJoinStyles = {
     buttonStylesBorderless: {
         iconStyle: {
             color: BaseTheme.palette.icon01,
-            fontSize: 24
+            fontSize: BaseTheme.spacing[5]
         },
         style: {
             flexDirection: 'row',
             justifyContent: 'center',
             margin: BaseTheme.spacing[3],
-            height: 24,
-            width: 24
+            height: BaseTheme.spacing[5],
+            width: BaseTheme.spacing[5]
         },
         underlayColor: 'transparent'
     },
@@ -27,13 +27,8 @@ export const preJoinStyles = {
         flexDirection: 'row'
     },
 
-    contentWrapperWide: {
-        flex: 1,
-        flexDirection: 'row'
-    },
-
     largeVideoContainer: {
-        height: '60%'
+        height: '50%'
     },
 
     largeVideoContainerWide: {
@@ -46,9 +41,9 @@ export const preJoinStyles = {
     contentContainer: {
         alignItems: 'center',
         backgroundColor: BaseTheme.palette.uiBackground,
-        bottom: 0,
+        bottom: BaseTheme.spacing[0],
         display: 'flex',
-        height: 280,
+        height: '50%',
         justifyContent: 'center',
         position: 'absolute',
         width: '100%',
@@ -177,6 +172,6 @@ export const preJoinStyles = {
     },
     warningIcon: {
         color: BaseTheme.palette.ui01,
-        fontSize: 40
+        fontSize: BaseTheme.spacing[7]
     }
 };