Remove obsolete UnsupportedMobileBrowser functionality

The desired behavior of the button 'Start a conference' / 'Join the
conversation' is to launch the mobile app if installed; otherwise, do
nothing i.e. continue to display UnsupportedMobileBrowser.

Anyway, we may change our minds about allowing the user to continue in a
supported mobile browser so preserve the source code that enables that
but give it more appropriate naming.

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;
         }
     }

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
+ * The type of the Redux action which signals that the React Component
- * is shown.
+ * 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 DISMISS_MOBILE_APP_PROMO = Symbol('DISMISS_MOBILE_APP_PROMO');
-export const MOBILE_BROWSER_PAGE_IS_SHOWN = Symbol('MOBILE_BROWSER_PAGE_IS_SHOWN');

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
+ * Returns a Redux action which signals that the UnsupportedMobileBrowser which
- * to show it on other pages.
+ * 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
     };
 }

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);
+        this._onJoinClick = this._onJoinClick.bind(this);
-    }
-
-    /**
-     * React lifecycle method triggered after component is mounted.
-     *
-     * @returns {void}
-     */
-    componentDidMount() {
-        this.props.dispatch(mobileBrowserPageIsShown());
     }
 
     /**
@@ -59,21 +53,11 @@ class UnsupportedMobileBrowser extends Component {
      * @returns {void}
      */
     componentWillMount() {
-        const { room } = this.props;
+        const joinButtonText
-        let btnText;
+            = this.props._room ? 'Join the conversation' : 'Start a conference';
-        let link;
-
-        if (room) {
-            btnText = 'Join the conversation';
-            link = room;
-        } else {
-            btnText = 'Start a conference';
-            link = '';
-        }
 
         this.setState({
-            btnText,
+            joinButtonText
-            link
         });
     }
 
@@ -84,8 +68,7 @@ class UnsupportedMobileBrowser extends Component {
      */
     render() {
         const ns = 'unsupported-mobile-browser';
-        const primaryButtonClasses
+        const downloadButtonClassName = `${ns}__button ${ns}__button_primary`;
-            = `${ns}__button ${ns}__button_primary`;
 
         return (
             <div className = { ns }>
@@ -98,7 +81,7 @@ class UnsupportedMobileBrowser extends Component {
                         conversation on your mobile
                     </p>
                     <a href = { URLS[Platform.OS] }>
-                        <button className = { primaryButtonClasses }>
+                        <button className = { downloadButtonClassName }>
                             Download the App
                         </button>
                     </a>
@@ -109,9 +92,9 @@ class UnsupportedMobileBrowser extends Component {
                     </p>
                     <button
                         className = { `${ns}__button` }
-                        onClick = { this._onClickJoin }>
+                        onClick = { this._onJoinClick }>
                         {
-                            this.state.btnText
+                            this.state.joinButtonText
                         }
                     </button>
                 </div>
@@ -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() {
+    _onJoinClick() {
-        this.props.dispatch(appNavigate(this.state.link));
+        // 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
     };
 }
 

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
                 };
             }