fix(rn) removes settings dialog webviews and opens urls in browser

lang/main.json

@@ -442,9 +442,6 @@
         "noResults": "No results found :(",
         "search": "Search GIPHY"
     },
-    "helpView": {
-        "title": "Help center"
-    },
     "incomingCall": {
         "answer": "Answer",
         "audioCallTitle": "Incoming call",
@@ -864,9 +861,6 @@
         "rejected": "Rejected",
         "ringing": "Ringing..."
     },
-    "privacyView": {
-        "title": "Privacy"
-    },
     "profile": {
         "avatar": "avatar",
         "setDisplayNameLabel": "Set your display name",

react/features/base/modal/components/JitsiScreenWebView.js

@@ -1,29 +0,0 @@
-// @flow
-
-import React from 'react';
-import WebView from 'react-native-webview';
-
-import JitsiScreen from './JitsiScreen';
-
-type Props = {
-
-    /**
-     * The URL to display.
-     */
-    source: string,
-
-    /**
-     * The component's external style.
-     */
-    style: Object
-}
-
-const JitsiScreenWebView = ({ source, style }: Props) => (
-    <JitsiScreen
-        disableForcedKeyboardDismiss = { true }
-        style = { style }>
-        <WebView source = {{ uri: source }} />
-    </JitsiScreen>
-);
-
-export default JitsiScreenWebView;

react/features/mobile/navigation/components/settings/components/SettingsNavigationContainer.js

@@ -3,14 +3,10 @@ import { createStackNavigator } from '@react-navigation/stack';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import HelpView from '../../../../../settings/components/native/HelpView';
-import PrivacyView from '../../../../../settings/components/native/PrivacyView';
 import SettingsView
     from '../../../../../settings/components/native/SettingsView';
-import TermsView from '../../../../../settings/components/native/TermsView';
 import { screen } from '../../../routes';
 import {
-    linkScreenOptions,
     navigationContainerTheme,
     settingsScreenOptions,
     welcomeScreenOptions
@@ -61,27 +57,6 @@ const SettingsNavigationContainer = ({ isInWelcomePage }: Props) => {
                     }}>
                     { SettingsScreen }
                 </SettingsStack.Screen>
-                <SettingsStack.Screen
-                    component = { HelpView }
-                    name = { screen.settings.links.help }
-                    options = {{
-                        ...linkScreenOptions,
-                        title: t('helpView.title')
-                    }} />
-                <SettingsStack.Screen
-                    component = { TermsView }
-                    name = { screen.settings.links.terms }
-                    options = {{
-                        ...linkScreenOptions,
-                        title: t('termsView.title')
-                    }} />
-                <SettingsStack.Screen
-                    component = { PrivacyView }
-                    name = { screen.settings.links.privacy }
-                    options = {{
-                        ...linkScreenOptions,
-                        title: t('privacyView.title')
-                    }} />
             </SettingsStack.Navigator>
         </NavigationContainer>
     );

react/features/mobile/navigation/screenOptions.js

@@ -26,14 +26,6 @@ export const fullScreenOptions = {
     headerShown: false
 };
 
-export const linkScreenOptions = {
-    gestureEnabled: true,
-    headerShown: true,
-    headerTitleStyle: {
-        color: BaseTheme.palette.text01
-    }
-};
-
 /**
  * Navigation container theme.
  */

react/features/settings/components/native/HelpView.tsx

@@ -1,85 +0,0 @@
-/* eslint-disable lines-around-comment */
-
-import React, { PureComponent } from 'react';
-
-import { IReduxState } from '../../../app/types';
-// @ts-ignore
-import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
-import { connect } from '../../../base/redux/functions';
-// @ts-ignore
-import { renderArrowBackButton }
-// @ts-ignore
-    from '../../../mobile/navigation/components/welcome/functions';
-
-// @ts-ignore
-import styles from './styles';
-
-
-const DEFAULT_HELP_CENTRE_URL = 'https://web-cdn.jitsi.net/faq/meet-faq.html';
-
-interface IProps {
-
-    /**
-     * The URL to display in the Help Centre.
-     */
-    _url: string;
-
-    /**
-     * Default prop for navigating between screen components(React Navigation).
-     */
-    navigation: Object;
-}
-
-/**
- * Implements a page that renders the help content for the app.
- */
-class HelpView extends PureComponent<IProps> {
-    /**
-     * Implements React's {@link Component#componentDidMount()}. Invoked
-     * immediately after mounting occurs.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount() {
-        const {
-            navigation
-        } = this.props;
-
-        // @ts-ignore
-        navigation.setOptions({
-            headerLeft: () =>
-                renderArrowBackButton(() =>
-                    // @ts-ignore
-                    navigation.goBack())
-        });
-    }
-
-    /**
-     * Implements {@code PureComponent#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        return (
-            <JitsiScreenWebView
-                source = { this.props._url }
-                style = { styles.screenContainer } />
-        );
-    }
-}
-
-/**
- * Maps part of the Redux state to the props of this component.
- *
- * @param {Object} state - The Redux state.
- * @returns {IProps}
- */
-function _mapStateToProps(state: IReduxState) {
-    return {
-        _url: state['features/base/config'].helpCentreURL || DEFAULT_HELP_CENTRE_URL
-    };
-}
-
-export default connect(_mapStateToProps)(HelpView);

react/features/settings/components/native/PrivacyView.tsx

@@ -1,48 +0,0 @@
-/* eslint-disable lines-around-comment */
-
-import React, { useEffect } from 'react';
-
-// @ts-ignore
-import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
-// @ts-ignore
-import { renderArrowBackButton }
-// @ts-ignore
-    from '../../../mobile/navigation/components/welcome/functions';
-
-// @ts-ignore
-import styles from './styles';
-
-
-interface IProps {
-
-    /**
-     * Default prop for navigating between screen components(React Navigation).
-     */
-    navigation: Object;
-}
-
-/**
- * The URL at which the privacy policy is available to the user.
- */
-const PRIVACY_URL = 'https://jitsi.org/meet/privacy';
-
-const PrivacyView = ({ navigation }: IProps) => {
-
-    useEffect(() => {
-        // @ts-ignore
-        navigation.setOptions({
-            headerLeft: () =>
-                renderArrowBackButton(() =>
-                    // @ts-ignore
-                    navigation.goBack())
-        });
-    });
-
-    return (
-        <JitsiScreenWebView
-            source = { PRIVACY_URL }
-            style = { styles.screenContainer } />
-    );
-};
-
-export default PrivacyView;

react/features/settings/components/native/SettingsView.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable lines-around-comment  */
 
-import { Link } from '@react-navigation/native';
 import _ from 'lodash';
 import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import {
     Alert,
+    Linking,
     NativeModules,
     Platform,
     ScrollView,
@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import { Divider } from 'react-native-paper';
 
+
 import { getDefaultURL } from '../../../app/functions.native';
 import { IReduxState } from '../../../app/types';
 // @ts-ignore
@@ -24,10 +25,11 @@ import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
 import { updateSettings } from '../../../base/settings/actions';
+import Button from '../../../base/ui/components/native/Button';
 import Input from '../../../base/ui/components/native/Input';
 import Switch from '../../../base/ui/components/native/Switch';
 // @ts-ignore
-import { screen } from '../../../mobile/navigation/routes';
+import { BUTTON_TYPES } from '../../../base/ui/constants.any';
 // @ts-ignore
 import { AVATAR_SIZE } from '../../../welcome/components/styles';
 import { isServerURLChangeEnabled, normalizeUserInputURL } from '../../functions.native';
@@ -44,6 +46,18 @@ import styles from './styles';
  */
 const { AppInfo } = NativeModules;
 
+/**
+ * The URL at which the terms (of service/use) are available to the user.
+ */
+const TERMS_URL = 'https://jitsi.org/meet/terms';
+
+/**
+ * The URL at which the privacy policy is available to the user.
+ */
+const PRIVACY_URL = 'https://jitsi.org/meet/privacy';
+
+
+const DEFAULT_HELP_CENTRE_URL = 'https://web-cdn.jitsi.net/faq/meet-faq.html';
 
 interface IState {
 
@@ -104,6 +118,13 @@ interface IState {
  */
 interface IProps extends WithTranslation {
 
+    /**
+     * The URL for when the help link.
+     *
+     * @protected
+     */
+    _helpCentreUrl: string;
+
     /**
      * The ID of the local participant.
      */
@@ -225,6 +246,9 @@ class SettingsView extends Component<IProps, IState> {
         this._onStartVideoMutedChange
             = this._onStartVideoMutedChange.bind(this);
         this._setURLFieldReference = this._setURLFieldReference.bind(this);
+        this._onShowHelpPressed = this._onShowHelpPressed.bind(this);
+        this._onShowPrivacyPressed = this._onShowPrivacyPressed.bind(this);
+        this._onShowTermsPressed = this._onShowTermsPressed.bind(this);
         this._showURLAlert = this._showURLAlert.bind(this);
     }
 
@@ -349,26 +373,23 @@ class SettingsView extends Component<IProps, IState> {
                     </FormSectionAccordion>
                     <FormSectionAccordion
                         label = 'settingsView.links'>
-                        <Link
+                        <Button
-                            style = { styles.sectionLink }
+                            accessibilityLabel = 'settingsView.help'
-                            // @ts-ignore
+                            labelKey = 'settingsView.help'
-                            to = {{ screen: screen.settings.links.help }}>
+                            onClick = { this._onShowHelpPressed }
-                            { t('settingsView.help') }
+                            type = { BUTTON_TYPES.TERTIARY } />
-                        </Link>
                         <Divider style = { styles.fieldSeparator } />
-                        <Link
+                        <Button
-                            style = { styles.sectionLink }
+                            accessibilityLabel = 'settingsView.terms'
-                            // @ts-ignore
+                            labelKey = 'settingsView.terms'
-                            to = {{ screen: screen.settings.links.terms }}>
+                            onClick = { this._onShowTermsPressed }
-                            { t('settingsView.terms') }
+                            type = { BUTTON_TYPES.TERTIARY } />
-                        </Link>
                         <Divider style = { styles.fieldSeparator } />
-                        <Link
+                        <Button
-                            style = { styles.sectionLink }
+                            accessibilityLabel = 'settingsView.privacy'
-                            // @ts-ignore
+                            labelKey = 'settingsView.privacy'
-                            to = {{ screen: screen.settings.links.privacy }}>
+                            onClick = { this._onShowPrivacyPressed }
-                            { t('settingsView.privacy') }
+                            type = { BUTTON_TYPES.TERTIARY } />
-                        </Link>
                     </FormSectionAccordion>
                     <FormSectionAccordion
                         label = 'settingsView.buildInfoSection'>
@@ -668,6 +689,33 @@ class SettingsView extends Component<IProps, IState> {
         );
     }
 
+    /**
+     * Opens the help url into the browser.
+     *
+     * @returns {void}
+     */
+    _onShowHelpPressed() {
+        Linking.openURL(this.props._helpCentreUrl);
+    }
+
+    /**
+     * Opens the privacy url into the browser.
+     *
+     * @returns {void}
+     */
+    _onShowPrivacyPressed() {
+        Linking.openURL(PRIVACY_URL);
+    }
+
+    /**
+     * Opens the terms url into the browser.
+     *
+     * @returns {void}
+     */
+    _onShowTermsPressed() {
+        Linking.openURL(TERMS_URL);
+    }
+
     /**
      * Shows an alert warning the user about disabling crash reporting.
      *
@@ -732,6 +780,7 @@ function _mapStateToProps(state: IReduxState) {
     const localParticipant = getLocalParticipant(state);
 
     return {
+        _helpCentreUrl: state['features/base/config'].helpCentreURL || DEFAULT_HELP_CENTRE_URL,
         _localParticipantId: localParticipant?.id,
         _serverURL: getDefaultURL(state),
         _serverURLChangeEnabled: isServerURLChangeEnabled(state),

react/features/settings/components/native/TermsView.tsx

@@ -1,48 +0,0 @@
-/* eslint-disable lines-around-comment */
-
-import React, { useEffect } from 'react';
-
-// @ts-ignore
-import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
-// @ts-ignore
-import { renderArrowBackButton }
-// @ts-ignore
-    from '../../../mobile/navigation/components/welcome/functions';
-
-// @ts-ignore
-import styles from './styles';
-
-
-interface IProps {
-
-    /**
-     * Default prop for navigating between screen components(React Navigation).
-     */
-    navigation: Object;
-}
-
-/**
- * The URL at which the terms (of service/use) are available to the user.
- */
-const TERMS_URL = 'https://jitsi.org/meet/terms';
-
-const TermsView = ({ navigation }: IProps) => {
-
-    useEffect(() => {
-        // @ts-ignore
-        navigation.setOptions({
-            headerLeft: () =>
-                renderArrowBackButton(() =>
-                    // @ts-ignore
-                    navigation.goBack())
-        });
-    });
-
-    return (
-        <JitsiScreenWebView
-            source = { TERMS_URL }
-            style = { styles.screenContainer } />
-    );
-};
-
-export default TermsView;

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

@@ -109,23 +109,6 @@ export default {
         fontSize: 14
     },
 
-    sectionLink: {
-        ...BaseTheme.typography.bodyShortBoldLarge,
-        color: BaseTheme.palette.link01,
-        margin: BaseTheme.spacing[3],
-        textAlign: 'center'
-    },
-
-    sectionLinkContainer: {
-        margin: BaseTheme.spacing[3]
-    },
-
-    sectionLinkText: {
-        ...BaseTheme.typography.bodyShortBoldLarge,
-        color: BaseTheme.palette.link01,
-        textAlign: 'center'
-    },
-
     /**
      * Global {@code Text} color for the components.
      */