theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
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;
|