rn: add DialInSummary

react/features/invite/components/dial-in-summary/index.native.js

@@ -0,0 +1,3 @@
+// @flow
+
+export * from './native';

react/features/invite/components/dial-in-summary/index.web.js

@@ -0,0 +1,3 @@
+// @flow
+
+export * from './web';

react/features/invite/components/dial-in-summary/native/DialInSummary.js

@@ -0,0 +1,156 @@
+// @flow
+
+import React, { Component } from 'react';
+import { Linking, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { type Dispatch } from 'redux';
+
+import { openDialog } from '../../../../base/dialog';
+import { translate } from '../../../../base/i18n';
+import {
+    HeaderWithNavigation,
+    LoadingIndicator,
+    SlidingView
+} from '../../../../base/react';
+import { connect } from '../../../../base/redux';
+
+import { hideDialInSummary } from '../../../actions';
+import { getDialInfoPageURLForURIString } from '../../../functions';
+
+import DialInSummaryErrorDialog from './DialInSummaryErrorDialog';
+import styles, { INDICATOR_COLOR } from './styles';
+
+type Props = {
+
+    /**
+     * The URL to display the summary for.
+     */
+    _summaryUrl: ?string,
+
+    dispatch: Dispatch<any>
+};
+
+/**
+ * Implements a React native component that displays the dial in info page for a specific room.
+ */
+class DialInSummary extends Component<Props> {
+
+    /**
+     * Initializes a new instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onCloseView = this._onCloseView.bind(this);
+        this._onError = this._onError.bind(this);
+        this._onNavigate = this._onNavigate.bind(this);
+        this._renderLoading = this._renderLoading.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { _summaryUrl } = this.props;
+
+        return (
+            <SlidingView
+                position = 'bottom'
+                show = { Boolean(_summaryUrl) } >
+                <View style = { styles.webViewWrapper }>
+                    <HeaderWithNavigation
+                        headerLabelKey = 'info.label'
+                        onPressBack = { this._onCloseView } />
+                    <WebView
+                        onError = { this._onError }
+                        onShouldStartLoadWithRequest = { this._onNavigate }
+                        renderLoading = { this._renderLoading }
+                        source = {{ uri: getDialInfoPageURLForURIString(_summaryUrl) }}
+                        startInLoadingState = { true }
+                        style = { styles.webView } />
+                </View>
+            </SlidingView>
+        );
+    }
+
+    _onCloseView: () => void;
+
+    /**
+     * Closes the view.
+     *
+     * @returns {void}
+     */
+    _onCloseView() {
+        this.props.dispatch(hideDialInSummary());
+    }
+
+    _onError: () => void;
+
+    /**
+     * Callback to handle the error if the page fails to load.
+     *
+     * @returns {void}
+     */
+    _onError() {
+        this.props.dispatch(hideDialInSummary());
+        this.props.dispatch(openDialog(DialInSummaryErrorDialog));
+    }
+
+    _onNavigate: Object => Boolean;
+
+    /**
+     * Callback to intercept navigation inside the webview and make the native app handle the dial requests.
+     *
+     * NOTE: We don't navigate to anywhere else form that view.
+     *
+     * @param {any} request - The request object.
+     * @returns {boolean}
+     */
+    _onNavigate(request) {
+        const { url } = request;
+
+        if (url.startsWith('tel:')) {
+            Linking.openURL(url);
+            this.props.dispatch(hideDialInSummary());
+        }
+
+        return url === getDialInfoPageURLForURIString(this.props._summaryUrl);
+    }
+
+    _renderLoading: () => React$Component<any>;
+
+    /**
+     * Renders the loading indicator.
+     *
+     * @returns {React$Component<any>}
+     */
+    _renderLoading() {
+        return (
+            <View style = { styles.indicatorWrapper }>
+                <LoadingIndicator
+                    color = { INDICATOR_COLOR }
+                    size = 'large' />
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *      _summaryUrl: ?string
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _summaryUrl: state['features/invite'].summaryUrl
+    };
+}
+
+export default translate(connect(_mapStateToProps)(DialInSummary));

react/features/invite/components/dial-in-summary/native/DialInSummaryErrorDialog.js

@@ -0,0 +1,29 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { AlertDialog } from '../../../../base/dialog';
+import { translate } from '../../../../base/i18n';
+import { connect } from '../../../../base/redux';
+
+/**
+ * Dialog to inform the user that we could't fetch the dial-in info page.
+ */
+class DialInSummaryErrorDialog extends Component<{}> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <AlertDialog
+                contentKey = 'info.dialInSummaryError' />
+        );
+    }
+
+    _onSubmit: () => boolean;
+}
+
+export default translate(connect()(DialInSummaryErrorDialog));

react/features/invite/components/dial-in-summary/native/index.js

@@ -1 +1,3 @@
+// @flow
+
 export { default as DialInSummary } from './DialInSummary';

react/features/invite/components/dial-in-summary/native/styles.js

@@ -0,0 +1,24 @@
+// @flow
+
+import { ColorPalette } from '../../../../base/styles';
+
+export const INDICATOR_COLOR = ColorPalette.lightGrey;
+
+export default {
+
+    indicatorWrapper: {
+        alignItems: 'center',
+        backgroundColor: ColorPalette.white,
+        flex: 1,
+        justifyContent: 'center'
+    },
+
+    webView: {
+        flex: 1
+    },
+
+    webViewWrapper: {
+        flex: 1,
+        flexDirection: 'column'
+    }
+};

react/features/invite/components/dial-in-summary/web/ConferenceID.js

@@ -1,8 +1,8 @@
-/* @flow */
+// @flow
 
 import React, { Component } from 'react';
 
-import { translate } from '../../../base/i18n';
+import { translate } from '../../../../base/i18n';
 
 /**
  * The type of the React {@code Component} props of {@link ConferenceID}.

react/features/invite/components/dial-in-summary/web/DialInSummary.js

@@ -1,8 +1,8 @@
-/* @flow */
+// @flow
 
 import React, { Component } from 'react';
 
-import { translate } from '../../../base/i18n';
+import { translate } from '../../../../base/i18n';
 
 import ConferenceID from './ConferenceID';
 import NumbersList from './NumbersList';

react/features/invite/components/dial-in-summary/web/NumbersList.js

@@ -1,8 +1,8 @@
-/* @flow */
+// @flow
 
 import React, { Component } from 'react';
 
-import { translate } from '../../../base/i18n';
+import { translate } from '../../../../base/i18n';
 
 type Props = {
 

react/features/invite/components/dial-in-summary/web/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { default as DialInSummary } from './DialInSummary';

react/features/invite/components/index.js

@@ -1,6 +1,6 @@
 // @flow
 
 export * from './add-people-dialog';
-export { DialInSummary } from './dial-in-summary';
+export * from './dial-in-summary';
 export * from './info-dialog';
 export * from './callee-info';