diff --git a/react/features/base/util/interceptComponent.js b/react/features/base/util/interceptComponent.js index 1156215d9..6e923e7d2 100644 --- a/react/features/base/util/interceptComponent.js +++ b/react/features/base/util/interceptComponent.js @@ -17,16 +17,13 @@ const RULES = [ * app even if the browser supports the app (e.g. Google Chrome with * WebRTC support on Android). * - * @param {Object} state - Object containing Redux state. * @returns {UnsupportedMobileBrowser|void} If the rule is satisfied then * we should intercept existing component by UnsupportedMobileBrowser. */ - state => { + () => { const OS = Platform.OS; - const { mobileBrowserPageIsShown } - = state['features/unsupported-browser']; - if ((OS === 'android' || OS === 'ios') && !mobileBrowserPageIsShown) { + if (OS === 'android' || OS === 'ios') { return UnsupportedMobileBrowser; } } diff --git a/react/features/unsupported-browser/actionTypes.js b/react/features/unsupported-browser/actionTypes.js index 495bd3026..599fa4d94 100644 --- a/react/features/unsupported-browser/actionTypes.js +++ b/react/features/unsupported-browser/actionTypes.js @@ -1,12 +1,18 @@ import { Symbol } from '../base/react'; /** - * The type of the Redux action which signals that a mobile browser page - * is shown. + * The type of the Redux action which signals that the React Component + * UnsupportedMobileBrowser which was rendered as a promotion of the mobile app + * on a browser was dismissed by the user. For example, the Web app may possibly + * run in Google Chrome on Android but we choose to promote the mobile app + * anyway claiming the user experience provided by the Web app is inferior to + * that of the mobile app. Eventually, the user may choose to dismiss the + * promotion of the mobile app and take their chances with the Web app instead. + * If unused, then we have chosen to force the mobile app and not allow the Web + * app in mobile browsers. * * { - * type: MOBILE_BROWSER_PAGE_IS_SHOWN + * type: DISMISS_MOBILE_APP_PROMO * } */ -// eslint-disable-next-line max-len -export const MOBILE_BROWSER_PAGE_IS_SHOWN = Symbol('MOBILE_BROWSER_PAGE_IS_SHOWN'); +export const DISMISS_MOBILE_APP_PROMO = Symbol('DISMISS_MOBILE_APP_PROMO'); diff --git a/react/features/unsupported-browser/actions.js b/react/features/unsupported-browser/actions.js index d1e93cbb4..dadb934f2 100644 --- a/react/features/unsupported-browser/actions.js +++ b/react/features/unsupported-browser/actions.js @@ -1,16 +1,22 @@ -import { MOBILE_BROWSER_PAGE_IS_SHOWN } from './actionTypes'; +import { DISMISS_MOBILE_APP_PROMO } from './actionTypes'; import './reducer'; /** - * Returns an action that mobile browser page is shown and there is no need - * to show it on other pages. + * Returns a Redux action which signals that the UnsupportedMobileBrowser which + * was rendered as a promotion of the mobile app on a browser was dismissed by + * the user. For example, the Web app may possibly run in Google Chrome + * on Android but we choose to promote the mobile app anyway claiming the user + * experience provided by the Web app is inferior to that of the mobile app. + * Eventually, the user may choose to dismiss the promotion of the mobile app + * and take their chances with the Web app instead. If unused, then we have + * chosen to force the mobile app and not allow the Web app in mobile browsers. * * @returns {{ - * type: MOBILE_BROWSER_PAGE_IS_SHOWN + * type: DISMISS_MOBILE_APP_PROMO * }} */ -export function mobileBrowserPageIsShown() { +export function dismissMobileAppPromo() { return { - type: MOBILE_BROWSER_PAGE_IS_SHOWN + type: DISMISS_MOBILE_APP_PROMO }; } diff --git a/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js b/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js index bd7eb0304..97ae1f6f5 100644 --- a/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js +++ b/react/features/unsupported-browser/components/UnsupportedMobileBrowser.js @@ -1,11 +1,8 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { appNavigate } from '../../app'; import { Platform } from '../../base/react'; -import { mobileBrowserPageIsShown } from '../actions'; - /** * The map of platforms to URLs at which the mobile app for the associated * platform is available for download. @@ -27,8 +24,14 @@ class UnsupportedMobileBrowser extends Component { * @static */ static propTypes = { - dispatch: React.PropTypes.func, - room: React.PropTypes.string + /** + * The name of the conference room to be joined upon clicking the + * respective button. + * + * @private + * @type {string} + */ + _room: React.PropTypes.string } /** @@ -41,16 +44,7 @@ class UnsupportedMobileBrowser extends Component { super(props); // Bind methods - this._onClickJoin = this._onClickJoin.bind(this); - } - - /** - * React lifecycle method triggered after component is mounted. - * - * @returns {void} - */ - componentDidMount() { - this.props.dispatch(mobileBrowserPageIsShown()); + this._onJoinClick = this._onJoinClick.bind(this); } /** @@ -59,21 +53,11 @@ class UnsupportedMobileBrowser extends Component { * @returns {void} */ componentWillMount() { - const { room } = this.props; - let btnText; - let link; - - if (room) { - btnText = 'Join the conversation'; - link = room; - } else { - btnText = 'Start a conference'; - link = ''; - } + const joinButtonText + = this.props._room ? 'Join the conversation' : 'Start a conference'; this.setState({ - btnText, - link + joinButtonText }); } @@ -84,8 +68,7 @@ class UnsupportedMobileBrowser extends Component { */ render() { const ns = 'unsupported-mobile-browser'; - const primaryButtonClasses - = `${ns}__button ${ns}__button_primary`; + const downloadButtonClassName = `${ns}__button ${ns}__button_primary`; return (
@@ -98,7 +81,7 @@ class UnsupportedMobileBrowser extends Component { conversation on your mobile

- @@ -109,9 +92,9 @@ class UnsupportedMobileBrowser extends Component {

@@ -120,13 +103,19 @@ class UnsupportedMobileBrowser extends Component { } /** - * Navigates to the next state of the app. + * Handles clicks on the button that joins the local participant in a + * conference. * * @private * @returns {void} */ - _onClickJoin() { - this.props.dispatch(appNavigate(this.state.link)); + _onJoinClick() { + // If the user installed the app while this Component was displayed + // (e.g. the user clicked the Download the App button), then we would + // like to open the current URL in the mobile app. + + // TODO The only way to do it appears to be a link with an app-specific + // scheme, not a Universal Link. } } @@ -136,12 +125,19 @@ class UnsupportedMobileBrowser extends Component { * * @param {Object} state - Redux state. * @returns {{ - * room: string + * _room: string * }} */ function mapStateToProps(state) { return { - room: state['features/base/conference'].room + /** + * The name of the conference room to be joined upon clicking the + * respective button. + * + * @private + * @type {string} + */ + _room: state['features/base/conference'].room }; } diff --git a/react/features/unsupported-browser/reducer.js b/react/features/unsupported-browser/reducer.js index 37ea43a6c..72fc5393a 100644 --- a/react/features/unsupported-browser/reducer.js +++ b/react/features/unsupported-browser/reducer.js @@ -1,21 +1,25 @@ import { ReducerRegistry } from '../base/redux'; -import { MOBILE_BROWSER_PAGE_IS_SHOWN } from './actionTypes'; +import { DISMISS_MOBILE_APP_PROMO } from './actionTypes'; ReducerRegistry.register( 'features/unsupported-browser', (state = {}, action) => { switch (action.type) { - case MOBILE_BROWSER_PAGE_IS_SHOWN: + case DISMISS_MOBILE_APP_PROMO: return { ...state, /** - * Flag that shows that mobile browser page is shown. + * The indicator which determines whether the React + * Component UnsupportedMobileBrowser which was rendered as + * a promotion of the mobile app on a browser was dismissed + * by the user. If unused, then we have chosen to force the + * mobile app and not allow the Web app in mobile browsers. * * @type {boolean} */ - mobileBrowserPageIsShown: true + mobileAppPromoDismissed: true }; }