Introduce interceptComponent function

react/features/app/functions.web.js

@@ -2,10 +2,9 @@
 
 import { isRoomValid } from '../base/conference';
 import { RouteRegistry } from '../base/navigator';
-import { Platform } from '../base/react';
 import { Conference } from '../conference';
-import { MobileBrowserPage } from '../unsupported-browser';
 import { WelcomePage } from '../welcome';
+import { interceptComponent } from '../base/util';
 
 import URLProcessor from '../../../modules/config/URLProcessor';
 import KeyboardShortcut
@@ -27,21 +26,19 @@ export { _getRoomAndDomainFromUrlString } from './functions.native';
  * @returns {Route}
  */
 export function _getRouteToRender(stateOrGetState) {
-    const OS = Platform.OS;
     const state
         = typeof stateOrGetState === 'function'
             ? stateOrGetState()
             : stateOrGetState;
 
     // If mobile browser page was shown, there is no need to show it again.
-    const { mobileBrowserPageIsShown } = state['features/unsupported-browser'];
     const { room } = state['features/base/conference'];
     const component = isRoomValid(room) ? Conference : WelcomePage;
     const route = RouteRegistry.getRouteByComponent(component);
 
-    if ((OS === 'android' || OS === 'ios') && !mobileBrowserPageIsShown) {
+    // Intercepts route components if any of component interceptor rules
-        route.component = MobileBrowserPage;
+    // is satisfied.
-    }
+    route.component = interceptComponent(state, component);
 
     return route;
 }

react/features/base/util/componentInterceptor.js

@@ -0,0 +1,78 @@
+import { Platform } from '../react';
+
+import {
+    MobileBrowserPage,
+    UnsupportedBrowserPage
+} from '../../unsupported-browser';
+
+/**
+ * Array of rules defining whether we should intercept component to render
+ * or not.
+ *
+ * @type {Array<Function>}
+ * @param {Object} state - Redux state object.
+ * @returns {ReactElement|void}
+ */
+const RULES = [
+
+    /**
+     * This rule describes case when user opens application using mobile
+     * browser. In order to promote the app, we choose to suggest the mobile
+     * 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 {MobileBrowserPage|void} If the rule is satisfied then
+     * we should intercept existing component by MobileBrowserPage.
+     */
+    state => {
+        const OS = Platform.OS;
+        const { mobileBrowserPageIsShown }
+        = state['features/unsupported-browser'];
+
+        if ((OS === 'android' || OS === 'ios') && !mobileBrowserPageIsShown) {
+            return MobileBrowserPage;
+        }
+    },
+
+    /**
+     * This rule describes case when user opens application using web browser
+     * that doesn't support WebRTC or Temasys plugin should be installed.
+     *
+     * @returns {UnsupportedBrowserPage|void} If the rule is satisfied
+     * then we should intercept existing component by UnsupportedBrowserPage.
+     */
+    () => {
+        if (true) {
+            return UnsupportedBrowserPage;
+        }
+    }
+];
+
+/**
+ * Utility method that responsible for intercepting of route components based on
+ * the set of defined rules.
+ *
+ * @param {Object|Function} stateOrGetState - Either Redux state object or
+ * getState() function.
+ * @param {ReactElement} currentComponent - Current route component to render.
+ * @returns {ReactElement} If any of rules is satisfied returns intercepted
+ * component.
+ */
+export function interceptComponent(stateOrGetState, currentComponent) {
+    let result;
+    const state
+        = typeof stateOrGetState === 'function'
+        ? stateOrGetState()
+        : stateOrGetState;
+
+    for (const rule of RULES) {
+        result = rule(state);
+
+        if (result) {
+            break;
+        }
+    }
+
+    return result || currentComponent;
+}

react/features/base/util/index.js

@@ -1,2 +1,3 @@
 export * from './loadScript';
 export * from './roomnameGenerator';
+export * from './componentInterceptor';

react/features/unsupported-browser/components/MobileBrowserPage.js

@@ -100,7 +100,7 @@ class MobileBrowserPage extends Component {
         const textClasses = `${blockPrefix}__text ${blockPrefix}__text_small`;
         let primaryButtonClasses = `${blockPrefix}__button`;
 
-        primaryButtonClasses += `${blockPrefix}__button_primary`;
+        primaryButtonClasses += ` ${blockPrefix}__button_primary`;
 
         return (
             <div className = { blockPrefix }>

react/features/unsupported-browser/components/UnsupportedBrowserPage.js

@@ -98,7 +98,9 @@ export default class UnsupportedBrowserPage extends Component {
         }
 
         return (
-            <div className = 'browser'>
+            <div
+                className = 'browser'
+                key = { browser.name }>
                 <div className = 'browser__text'>
                     { browser.title }
                     { pluginHtml }