init

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

@@ -0,0 +1,226 @@
+import { useIsFocused } from '@react-navigation/native';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    BackHandler,
+    Platform,
+    StyleProp,
+    Text,
+    TextStyle,
+    View,
+    ViewStyle
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setPermanentProperty } from '../../../analytics/actions';
+import { appNavigate } from '../../../app/actions.native';
+import { IReduxState } from '../../../app/types';
+import { setAudioOnly } from '../../../base/audio-only/actions';
+import { getConferenceName } from '../../../base/conference/functions';
+import { isNameReadOnly } from '../../../base/config/functions.any';
+import { connect } from '../../../base/connection/actions.native';
+import { PREJOIN_PAGE_HIDE_DISPLAY_NAME } from '../../../base/flags/constants';
+import { getFeatureFlag } from '../../../base/flags/functions';
+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 { updateSettings } from '../../../base/settings/actions';
+import Button from '../../../base/ui/components/native/Button';
+import Input from '../../../base/ui/components/native/Input';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import { openDisplayNamePrompt } from '../../../display-name/actions';
+import BrandingImageBackground from '../../../dynamic-branding/components/native/BrandingImageBackground';
+import LargeVideo from '../../../large-video/components/LargeVideo.native';
+import HeaderNavigationButton from '../../../mobile/navigation/components/HeaderNavigationButton';
+import { navigateRoot } from '../../../mobile/navigation/rootNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import AudioMuteButton from '../../../toolbox/components/native/AudioMuteButton';
+import VideoMuteButton from '../../../toolbox/components/native/VideoMuteButton';
+import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions';
+import { IPrejoinProps } from '../../types';
+import { hasDisplayName } from '../../utils';
+
+import { preJoinStyles as styles } from './styles';
+
+
+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 localParticipant = useSelector((state: IReduxState) => getLocalParticipant(state));
+    const isDisplayNameMandatory = useSelector((state: IReduxState) => isDisplayNameRequired(state));
+    const isDisplayNameVisible
+        = useSelector((state: IReduxState) => !getFeatureFlag(state, PREJOIN_PAGE_HIDE_DISPLAY_NAME, false));
+    const isDisplayNameReadonly = useSelector(isNameReadOnly);
+    const roomName = useSelector((state: IReduxState) => getConferenceName(state));
+    const roomNameEnabled = useSelector((state: IReduxState) => isRoomNameEnabled(state));
+    const participantName = localParticipant?.name;
+    const [ displayName, setDisplayName ]
+        = useState(participantName || '');
+    const isDisplayNameMissing = useMemo(
+        () => !displayName && isDisplayNameMandatory, [ displayName, isDisplayNameMandatory ]);
+    const showDisplayNameError = useMemo(
+        () => !isDisplayNameReadonly && isDisplayNameMissing && isDisplayNameVisible,
+        [ isDisplayNameMissing, isDisplayNameReadonly, isDisplayNameVisible ]);
+    const showDisplayNameInput = useMemo(
+        () => isDisplayNameVisible && (displayName || !isDisplayNameReadonly),
+        [ displayName, isDisplayNameReadonly, isDisplayNameVisible ]);
+    const onChangeDisplayName = useCallback(event => {
+        const fieldValue = getFieldValue(event);
+
+        setDisplayName(fieldValue);
+        dispatch(updateSettings({
+            displayName: fieldValue
+        }));
+    }, [ displayName ]);
+
+    const onJoin = useCallback(() => {
+        dispatch(connect());
+        navigateRoot(screen.conference.root);
+    }, [ dispatch ]);
+
+    const maybeJoin = useCallback(() => {
+        if (isDisplayNameMissing) {
+            dispatch(openDisplayNamePrompt({
+                onPostSubmit: onJoin,
+                validateInput: hasDisplayName
+            }));
+        } else {
+            onJoin();
+        }
+    }, [ dispatch, hasDisplayName, isDisplayNameMissing, onJoin ]);
+
+    const onJoinLowBandwidth = useCallback(() => {
+        dispatch(setAudioOnly(true));
+        maybeJoin();
+    }, [ dispatch ]);
+
+    const goBack = useCallback(() => {
+        dispatch(appNavigate(undefined));
+
+        return true;
+    }, [ dispatch ]);
+
+    const { PRIMARY, TERTIARY } = BUTTON_TYPES;
+
+    useEffect(() => {
+        const hardwareBackPressSubscription = BackHandler.addEventListener('hardwareBackPress', goBack);
+
+        dispatch(setPermanentProperty({
+            wasPrejoinDisplayed: true
+        }));
+
+        return () => hardwareBackPressSubscription.remove();
+    }, []); // dispatch is not in the dependency list because we want the action to be dispatched only once when
+    // the component is mounted.
+
+    const headerLeft = () => {
+        if (Platform.OS === 'ios') {
+            return (
+                <HeaderNavigationButton
+                    label = { t('dialog.close') }
+                    onPress = { goBack } />
+            );
+        }
+
+        return (
+            <HeaderNavigationButton
+                onPress = { goBack }
+                src = { IconCloseLarge } />
+        );
+    };
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerLeft,
+            headerTitle: t('prejoin.joinMeeting')
+        });
+    }, [ navigation ]);
+
+    let contentWrapperStyles;
+    let contentContainerStyles;
+    let largeVideoContainerStyles;
+
+    if (aspectRatio === ASPECT_RATIO_NARROW) {
+        contentWrapperStyles = styles.contentWrapper;
+        contentContainerStyles = styles.contentContainer;
+        largeVideoContainerStyles = styles.largeVideoContainer;
+    } else {
+        contentWrapperStyles = styles.contentWrapperWide;
+        contentContainerStyles = styles.contentContainerWide;
+        largeVideoContainerStyles = styles.largeVideoContainerWide;
+    }
+
+    return (
+        <JitsiScreen
+            addBottomPadding = { false }
+            safeAreaInsets = { [ 'right' ] }
+            style = { contentWrapperStyles }>
+            <BrandingImageBackground />
+            {
+                isFocused
+                && <View style = { largeVideoContainerStyles as StyleProp<ViewStyle> }>
+                    <View style = { styles.conferenceInfo as StyleProp<ViewStyle> }>
+                        {roomNameEnabled && (
+                            <View style = { styles.displayRoomNameBackdrop as StyleProp<TextStyle> }>
+                                <Text
+                                    numberOfLines = { 1 }
+                                    style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
+                                    { roomName }
+                                </Text>
+                            </View>
+                        )}
+                    </View>
+                    <LargeVideo />
+                </View>
+            }
+            <View style = { contentContainerStyles as ViewStyle }>
+                <View style = { styles.toolboxContainer as ViewStyle }>
+                    <AudioMuteButton
+                        styles = { styles.buttonStylesBorderless } />
+                    <VideoMuteButton
+                        styles = { styles.buttonStylesBorderless } />
+                </View>
+                {
+                    showDisplayNameInput && <Input
+                        customStyles = {{ input: styles.customInput }}
+                        disabled = { isDisplayNameReadonly }
+                        error = { showDisplayNameError }
+                        onChange = { onChangeDisplayName }
+                        placeholder = { t('dialog.enterDisplayName') }
+                        value = { displayName } />
+                }
+                {
+                    showDisplayNameError && (
+                        <View style = { styles.errorContainer as StyleProp<TextStyle> }>
+                            <Text style = { styles.error as StyleProp<TextStyle> }>
+                                { t('prejoin.errorMissingName') }
+                            </Text>
+                        </View>
+                    )
+                }
+                <Button
+                    accessibilityLabel = 'prejoin.joinMeeting'
+                    disabled = { showDisplayNameError }
+                    labelKey = 'prejoin.joinMeeting'
+                    onClick = { maybeJoin }
+                    style = { styles.joinButton }
+                    type = { PRIMARY } />
+                <Button
+                    accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
+                    disabled = { showDisplayNameError }
+                    labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
+                    onClick = { onJoinLowBandwidth }
+                    style = { styles.joinButton }
+                    type = { TERTIARY } />
+            </View>
+        </JitsiScreen>
+    );
+};
+
+export default Prejoin;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    StyleProp,
+    Text,
+    TextStyle,
+    View,
+    ViewStyle
+} from 'react-native';
+
+import { preJoinStyles as styles } from './styles';
+
+
+const RecordingWarning = (): JSX.Element => {
+    const { t } = useTranslation();
+
+    return (
+        <View style = { styles.recordingWarning as StyleProp<ViewStyle> }>
+            <Text
+                numberOfLines = { 1 }
+                style = { styles.recordingWarningText as StyleProp<TextStyle> }>
+                { t('prejoin.recordingWarning') }
+            </Text>
+        </View>
+    );
+};
+
+export default RecordingWarning;

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

@@ -0,0 +1,120 @@
+import React, { useCallback, useLayoutEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    Platform,
+    StyleProp,
+    Text,
+    TextStyle,
+    View,
+    ViewStyle
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { appNavigate } from '../../../app/actions.native';
+import { IReduxState } from '../../../app/types';
+import { getConferenceName } from '../../../base/conference/functions';
+import Icon from '../../../base/icons/components/Icon';
+import { IconCloseLarge, IconWarning } from '../../../base/icons/svg';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.native';
+import getUnsafeRoomText from '../../../base/util/getUnsafeRoomText.native';
+import HeaderNavigationButton from '../../../mobile/navigation/components/HeaderNavigationButton';
+import { navigateRoot } from '../../../mobile/navigation/rootNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import { IPrejoinProps } from '../../types';
+
+import { preJoinStyles as styles } from './styles';
+
+
+const UnsafeRoomWarning: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const roomName = useSelector((state: IReduxState) => getConferenceName(state));
+    const aspectRatio = useSelector(
+        (state: IReduxState) => state['features/base/responsive-ui']?.aspectRatio
+    );
+    const unsafeRoomText = useSelector((state: IReduxState) => getUnsafeRoomText(state, t, 'prejoin'));
+
+    const goBack = useCallback(() => {
+        dispatch(appNavigate(undefined));
+
+        return true;
+    }, [ dispatch ]);
+
+    const onProceed = useCallback(() => {
+        navigateRoot(screen.preJoin);
+
+        return true;
+    }, [ dispatch ]);
+
+    const headerLeft = () => {
+        if (Platform.OS === 'ios') {
+            return (
+                <HeaderNavigationButton
+                    label = { t('dialog.close') }
+                    onPress = { goBack } />
+            );
+        }
+
+        return (
+            <HeaderNavigationButton
+                onPress = { goBack }
+                src = { IconCloseLarge } />
+        );
+    };
+
+    useLayoutEffect(() => {
+        navigation.setOptions({
+            headerLeft,
+            headerTitle: t('prejoin.joinMeeting')
+        });
+    }, [ navigation ]);
+
+    let unsafeRoomContentContainer;
+
+    if (aspectRatio === ASPECT_RATIO_NARROW) {
+        unsafeRoomContentContainer = styles.unsafeRoomContentContainer;
+    } else {
+        unsafeRoomContentContainer = styles.unsafeRoomContentContainerWide;
+    }
+
+
+    return (
+        <JitsiScreen
+            addBottomPadding = { false }
+            safeAreaInsets = { [ 'right' ] }
+            style = { styles.unsafeRoomWarningContainer } >
+            <View style = { styles.displayRoomNameBackdrop as StyleProp<TextStyle> }>
+                <Text
+                    numberOfLines = { 1 }
+                    style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
+                    { roomName }
+                </Text>
+            </View>
+            <View style = { unsafeRoomContentContainer as StyleProp<ViewStyle> }>
+                <View style = { styles.warningIconWrapper as StyleProp<ViewStyle> }>
+                    <Icon
+                        src = { IconWarning }
+                        style = { styles.warningIcon } />
+                </View>
+
+                <Text
+                    dataDetectorType = 'link'
+                    style = { styles.warningText as StyleProp<TextStyle> }>
+                    { unsafeRoomText }
+                </Text>
+                <Button
+                    accessibilityLabel = 'prejoin.proceedAnyway'
+                    disabled = { false }
+                    labelKey = 'prejoin.proceedAnyway'
+                    onClick = { onProceed }
+                    style = { styles.joinButton }
+                    type = { BUTTON_TYPES.SECONDARY } />
+            </View>
+        </JitsiScreen>
+    );
+};
+
+export default UnsafeRoomWarning;

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

@@ -0,0 +1,182 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+export const preJoinStyles = {
+
+    joinButton: {
+        marginTop: BaseTheme.spacing[3],
+        width: 352
+    },
+
+    buttonStylesBorderless: {
+        iconStyle: {
+            color: BaseTheme.palette.icon01,
+            fontSize: 24
+        },
+        style: {
+            flexDirection: 'row',
+            justifyContent: 'center',
+            margin: BaseTheme.spacing[3],
+            height: 24,
+            width: 24
+        },
+        underlayColor: 'transparent'
+    },
+
+    contentWrapper: {
+        flex: 1,
+        flexDirection: 'row'
+    },
+
+    contentWrapperWide: {
+        flex: 1,
+        flexDirection: 'row'
+    },
+
+    largeVideoContainer: {
+        height: '60%'
+    },
+
+    largeVideoContainerWide: {
+        height: '100%',
+        marginRight: 'auto',
+        position: 'absolute',
+        width: '50%'
+    },
+
+    contentContainer: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.uiBackground,
+        bottom: 0,
+        display: 'flex',
+        height: 280,
+        justifyContent: 'center',
+        position: 'absolute',
+        width: '100%',
+        zIndex: 1
+    },
+
+    contentContainerWide: {
+        alignItems: 'center',
+        height: '100%',
+        justifyContent: 'center',
+        left: '50%',
+        padding: BaseTheme.spacing[3],
+        position: 'absolute',
+        width: '50%'
+    },
+
+    toolboxContainer: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.ui01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        display: 'flex',
+        flexDirection: 'row',
+        height: 60,
+        justifyContent: 'space-between',
+        marginBottom: BaseTheme.spacing[3],
+        paddingHorizontal: BaseTheme.spacing[2],
+        width: 148
+    },
+
+    customInput: {
+        textAlign: 'center',
+        width: 352
+    },
+
+    errorContainer: {
+        backgroundColor: BaseTheme.palette.actionDanger,
+        borderBottomRightRadius: BaseTheme.shape.borderRadius,
+        borderBottomLeftRadius: BaseTheme.shape.borderRadius,
+        boxSizing: 'border-box',
+        marginTop: -BaseTheme.spacing[2],
+        overflow: 'visible',
+        wordBreak: 'normal',
+        width: 352
+    },
+
+    error: {
+        padding: BaseTheme.spacing[1],
+        color: BaseTheme.palette.text01,
+        textAlign: 'center'
+    },
+
+    preJoinRoomName: {
+        ...BaseTheme.typography.heading5,
+        color: BaseTheme.palette.text01,
+        textAlign: 'center'
+    },
+
+    conferenceInfo: {
+        alignSelf: 'center',
+        marginTop: BaseTheme.spacing[3],
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingVertical: BaseTheme.spacing[1],
+        position: 'absolute',
+        maxWidth: 273,
+        zIndex: 1
+    },
+    displayRoomNameBackdrop: {
+        backgroundColor: BaseTheme.palette.uiBackground,
+        borderRadius: BaseTheme.shape.borderRadius,
+        opacity: 0.7,
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingVertical: BaseTheme.spacing[1]
+    },
+    recordingWarning: {
+        display: 'flex',
+        justifyContent: 'center',
+        lineHeight: 22,
+        marginBottom: BaseTheme.spacing[2],
+        marginTop: BaseTheme.spacing[1],
+        width: 'auto'
+    },
+    recordingWarningText: {
+        color: BaseTheme.palette.text03
+    },
+    unsafeRoomWarningContainer: {
+        height: '100%',
+        width: '100%',
+        backgroundColor: BaseTheme.palette.ui01,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'white'
+    },
+    unsafeRoomContentContainer: {
+        justifySelf: 'center',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: BaseTheme.spacing[4]
+    },
+
+    unsafeRoomContentContainerWide: {
+        alignItems: 'center',
+        justifySelf: 'center',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        marginLeft: BaseTheme.spacing[7],
+        paddingHorizontal: BaseTheme.spacing[6]
+    },
+
+    warningText: {
+        ...BaseTheme.typography.bodyLongRegularLarge,
+        color: BaseTheme.palette.text01,
+        textAlign: 'center',
+        marginBottom: BaseTheme.spacing[4]
+    },
+    warningIconWrapper: {
+        backgroundColor: BaseTheme.palette.warning01,
+        borderRadius: BaseTheme.shape.circleRadius,
+        padding: BaseTheme.spacing[4],
+        marginBottom: BaseTheme.spacing[4],
+        zIndex: 0
+
+    },
+    warningIcon: {
+        color: BaseTheme.palette.ui01,
+        fontSize: 40
+    }
+};