Add no mobile app component

css/main.scss

@@ -68,7 +68,6 @@
 @import '404';
 @import 'policy';
 @import 'filmstrip';
-@import 'unsupported-browser/unsupported-desktop-browser';
-@import 'unsupported-browser/unsupported-mobile-browser';
+@import 'unsupported-browser/main';
 
 /* Modules END */

css/unsupported-browser/_main.scss

@@ -0,0 +1,3 @@
+@import 'no-mobile-app';
+@import 'unsupported-desktop-browser';
+@import 'unsupported-mobile-browser';

css/unsupported-browser/_no-mobile-app.scss

@@ -0,0 +1,21 @@
+.no-mobile-app {
+    margin: 30% auto 0;
+    width: auto;
+    max-width: 25em;
+    text-align: center;
+
+    &__title {
+        padding-bottom: em(17, 24);
+        border-bottom: 1px solid $auiBorderColor;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        color: #fff;
+    }
+
+    &__description {
+        margin-top: 1em;
+        font-size: 17px;
+        font-weight: 300;
+        letter-spacing: 1px;
+    }
+}

interface_config.js

@@ -72,5 +72,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     LOCAL_THUMBNAIL_RATIO: 16/9, //16:9
     REMOTE_THUMBNAIL_RATIO: 1, //1:1
     // Documentation reference for the live streaming feature.
-    LIVE_STREAMING_HELP_LINK: "https://jitsi.org/live"
+    LIVE_STREAMING_HELP_LINK: "https://jitsi.org/live",
+    // Enabling mobile landing page with the link to mobile app.
+    MOBILE_APP_ENABLED: true
 };

react/features/base/util/interceptComponent.js

@@ -1,9 +1,10 @@
-/* global APP */
+/* global APP, interfaceConfig */
 
 import { Platform } from '../react';
 import {
-    UnsupportedDesktopBrowser,
+    NoMobileApp,
     PluginRequiredBrowser,
+    UnsupportedDesktopBrowser,
     UnsupportedMobileBrowser
 } from '../../unsupported-browser';
 
@@ -30,7 +31,10 @@ const _RULES = [
         const OS = Platform.OS;
 
         if (OS === 'android' || OS === 'ios') {
-            return UnsupportedMobileBrowser;
+            return (
+                interfaceConfig.MOBILE_APP_ENABLED
+                    ? UnsupportedMobileBrowser
+                    : NoMobileApp);
         }
     },
     () => {

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

@@ -0,0 +1,31 @@
+/* global interfaceConfig */
+import React, { Component } from 'react';
+
+/**
+ * React component representing no mobile page.
+ *
+ * @class NoMobileApp
+ */
+export default class NoMobileApp extends Component {
+
+    /**
+     * Renders the component.
+     *
+     * @returns {ReactElement}
+     */
+    render() {
+        const ns = 'no-mobile-app';
+
+        return (
+            <div className = { ns }>
+                <h2 className = { `${ns}__title` }>
+                    Video chat isn't available in the mobile apps
+                </h2>
+                <p className = { `${ns}__description` }>
+                    Please use { interfaceConfig.APP_NAME } on <br />
+                    Desktop top join calls.
+                </p>
+            </div>
+        );
+    }
+}

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

@@ -1,3 +1,4 @@
+export { default as NoMobileApp } from './NoMobileApp';
 export { default as PluginRequiredBrowser } from './PluginRequiredBrowser';
 export { default as UnsupportedDesktopBrowser }
     from './UnsupportedDesktopBrowser';