ref: DialInSummary to JitsiModal

react/features/invite/actionTypes.js

  */
 export const SET_CALLEE_INFO_VISIBLE = 'SET_CALLEE_INFO_VISIBLE';
 
-/**
- * The type of Redux action to set the visibility of the dial in summary.
- *
- * {
- *     type: SET_DIAL_IN_SUMMARY_VISIBLE,
- *     visible: boolean
- * }
- */
-export const SET_DIAL_IN_SUMMARY_VISIBLE = 'SET_DIAL_IN_SUMMARY_VISIBLE';
 
 /**
  * The type of redux action which sets the invite dialog visible or invisible.

react/features/invite/actions.any.js

     BEGIN_ADD_PEOPLE,
     REMOVE_PENDING_INVITE_REQUESTS,
     SET_CALLEE_INFO_VISIBLE,
-    SET_DIAL_IN_SUMMARY_VISIBLE,
     SET_INVITE_DIALOG_VISIBLE,
     UPDATE_DIAL_IN_NUMBERS_FAILED,
     UPDATE_DIAL_IN_NUMBERS_SUCCESS
     };
 }
 
-/**
- * Action to hide the dial in summary.
- *
- * @returns {showDialInSummary}
- */
-export function hideDialInSummary() {
-    return showDialInSummary(undefined);
-}
 
 /**
  * Removes all pending invite requests.
         type: REMOVE_PENDING_INVITE_REQUESTS
     };
 }
-
-/**
- * Action to set the dial in summary url (and show it).
- *
- * @param {?string} locationUrl - The location URL to show the dial in summary for.
- * @returns {{
- *     type: SET_DIAL_IN_SUMMARY_VISIBLE,
- *     summaryUrl: ?string
- * }}
- */
-export function showDialInSummary(locationUrl: ?string) {
-    return {
-        type: SET_DIAL_IN_SUMMARY_VISIBLE,
-        summaryUrl: locationUrl
-    };
-}

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

 
 import { openDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
-import {
-    HeaderWithNavigation,
-    LoadingIndicator,
-    SlidingView
-} from '../../../../base/react';
+import { JitsiModal, setActiveModalId } from '../../../../base/modal';
+import { LoadingIndicator } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
 
-import { hideDialInSummary } from '../../../actions';
+import { DIAL_IN_SUMMARY_VIEW_ID } from '../../../constants';
 import { getDialInfoPageURLForURIString } from '../../../functions';
 
 import DialInSummaryErrorDialog from './DialInSummaryErrorDialog';
     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);
         const { _summaryUrl } = this.props;
 
         return (
-            <SlidingView
-                onHide = { this._onCloseView }
-                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>
+            <JitsiModal
+                headerProps = {{
+                    headerLabelKey: 'info.label'
+                }}
+                modalId = { DIAL_IN_SUMMARY_VIEW_ID }
+                style = { styles.backDrop } >
+                <WebView
+                    onError = { this._onError }
+                    onShouldStartLoadWithRequest = { this._onNavigate }
+                    renderLoading = { this._renderLoading }
+                    source = {{ uri: getDialInfoPageURLForURIString(_summaryUrl) }}
+                    startInLoadingState = { true }
+                    style = { styles.webView } />
+            </JitsiModal>
         );
     }
 
-    _onCloseView: () => boolean;
-
-    /**
-     * Closes the view.
-     *
-     * @returns {boolean}
-     */
-    _onCloseView() {
-        if (this.props._summaryUrl) {
-            this.props.dispatch(hideDialInSummary());
-
-            return true;
-        }
-
-        return false;
-    }
-
     _onError: () => void;
 
     /**
      * @returns {void}
      */
     _onError() {
-        this.props.dispatch(hideDialInSummary());
+        this.props.dispatch(setActiveModalId());
         this.props.dispatch(openDialog(DialInSummaryErrorDialog));
     }
 
 
         if (url.startsWith('tel:')) {
             Linking.openURL(url);
-            this.props.dispatch(hideDialInSummary());
+
+            this.props.dispatch(setActiveModalId());
         }
 
         return url === getDialInfoPageURLForURIString(this.props._summaryUrl);
  */
 function _mapStateToProps(state) {
     return {
-        _summaryUrl: state['features/invite'].summaryUrl
+        _summaryUrl: (state['features/base/modal'].modalProps || {}).summaryUrl
     };
 }
 

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

 
 export const INDICATOR_COLOR = ColorPalette.lightGrey;
 
+const WV_BACKGROUND = 'rgb(71, 71, 71)';
+
 export default {
 
+    backDrop: {
+        backgroundColor: WV_BACKGROUND
+    },
+
     indicatorWrapper: {
         alignItems: 'center',
         backgroundColor: ColorPalette.white,
     },
 
     webView: {
+        backgroundColor: WV_BACKGROUND,
         flex: 1
-    },
-
-    webViewWrapper: {
-        flex: 1,
-        flexDirection: 'column'
     }
 };

react/features/invite/constants.js

+
+/**
+ * Modal ID for the DialInSummary modal.
+ */
+export const DIAL_IN_SUMMARY_VIEW_ID = 'DIAL_IN_SUMMARY_VIEW_ID';
 /**
  * The identifier of the sound to be played when the status of an outgoing call
  * is expired.

react/features/invite/reducer.js

     ADD_PENDING_INVITE_REQUEST,
     REMOVE_PENDING_INVITE_REQUESTS,
     SET_CALLEE_INFO_VISIBLE,
-    SET_DIAL_IN_SUMMARY_VISIBLE,
     SET_INVITE_DIALOG_VISIBLE,
     UPDATE_DIAL_IN_NUMBERS_FAILED,
     UPDATE_DIAL_IN_NUMBERS_SUCCESS
             initialCalleeInfo: action.initialCalleeInfo
         };
 
-    case SET_DIAL_IN_SUMMARY_VISIBLE:
-        return {
-            ...state,
-            summaryUrl: action.summaryUrl
-        };
 
     case SET_INVITE_DIALOG_VISIBLE:
         return {

react/features/recent-list/components/RecentList.native.js

 
 import { getDefaultURL } from '../../app';
 import { translate } from '../../base/i18n';
+import { setActiveModalId } from '../../base/modal';
 import { NavigateSectionList, type Section } from '../../base/react';
 import { connect } from '../../base/redux';
 import { ColorPalette } from '../../base/styles';
-import { showDialInSummary } from '../../invite';
+import { DIAL_IN_SUMMARY_VIEW_ID } from '../../invite/constants';
 
 import { deleteRecentListEntry } from '../actions';
 import { isRecentListEnabled, toDisplayableList } from '../functions';
      * @returns {void}
      */
     _onShowDialInInfo(itemId) {
-        this.props.dispatch(showDialInSummary(itemId.url));
+        this.props.dispatch(setActiveModalId(DIAL_IN_SUMMARY_VIEW_ID, { summaryUrl: itemId.url }));
     }
 }