Some fixes mentioned in the PR

react/features/base/react/Platform.web.js

@@ -7,6 +7,10 @@ if (userAgent.match(/Android/i)) {
     OS = 'android';
 } else if (userAgent.match(/iP(ad|hone|od)/i)) {
     OS = 'ios';
+} else if (userAgent.match(/windows/i)) {
+    OS = 'windows';
+} else if (userAgent.match(/mac/i)) {
+    OS = 'mac';
 }
 
 /**

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

@@ -2,6 +2,8 @@
 
 import React, { Component } from 'react';
 
+import UnsupportedMobileBrowserStyle from './UnsupportedMobileBrowserStyle';
+
 declare var interfaceConfig: Object;
 
 /**
@@ -22,12 +24,13 @@ export default class NoMobileApp extends Component {
         return (
             <div className = { ns }>
                 <h2 className = { `${ns}__title` }>
-                    Video chat isn't available in the mobile apps
+                    Video chat isn't available on mobile
                 </h2>
                 <p className = { `${ns}__description` }>
-                    Video chat isn't available on mobile
+                    Please use {interfaceConfig.APP_NAME} on
                     Desktop to join calls.
                 </p>
+                <UnsupportedMobileBrowserStyle />
             </div>
         );
     }

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

@@ -2,8 +2,17 @@
 
 import React, { Component } from 'react';
 
+import { Platform } from '../../base/react';
+
 import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
 
+/**
+ * Describes styles namespace for this component.
+ *
+ * @type {string}
+ */
+const NS = 'unsupported-desktop-browser';
+
 /**
  * React component representing unsupported browser page.
  *
@@ -16,31 +25,60 @@ export default class UnsupportedDesktopBrowser extends Component {
      * @returns {ReactElement}
      */
     render() {
-        const ns = 'unsupported-desktop-browser';
-        const nsLink = `${ns}__link`;
-
         return (
-            <div className = { ns }>
+            <div className = { NS }>
-                <h2 className = { `${ns}__title` }>
+                <h2 className = { `${NS}__title` }>
                     It looks like you're using a browser we don't support.
                 </h2>
-                <p className = { `${ns}__description` }>
+                <p className = { `${NS}__description` }>
                     Please try again with the latest version of&nbsp;
                     <a
-                        className = { nsLink }
+                        className = { `${NS}__link` }
                         href = { CHROME } >Chrome</a>,&nbsp;
                     <a
-                        className = { nsLink }
+                        className = { `${NS}__link` }
-                        href = { FIREFOX }>Firefox</a>,&nbsp;
+                        href = { FIREFOX }>Firefox</a> or&nbsp;
-                    <a
+                    { this._showSafariLinkIfRequired() }
-                        className = { nsLink }
+                    { this._showIELinkIfRequired() }.
-                        href = { SAFARI }>Safari</a> or&nbsp;
-                    <a
-                        className = { nsLink }
-                        href = { IE }>IE</a>.
                 </p>
             </div>
         );
     }
+
+    /**
+     * Depending on the platform returns the link to IE browser.
+     *
+     * @returns {ReactElement|null}
+     * @private
+     */
+    _showIELinkIfRequired() {
+        if (Platform.OS === 'windows') {
+            return (
+                <a
+                    className = { `${NS}__link` }
+                    href = { IE }>IE</a>
+            );
+        }
+
+        return null;
+    }
+
+    /**
+     * Depending on the platform returns the link to Safari browser.
+     *
+     * @returns {ReactElement|null}
+     * @private
+     */
+    _showSafariLinkIfRequired() {
+        if (Platform.OS === 'mac') {
+            return (
+                <a
+                    className = { `${NS}__link` }
+                    href = { SAFARI }>Safari</a>
+            );
+        }
+
+        return null;
+    }
 }
 

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

@@ -5,6 +5,8 @@ import { connect } from 'react-redux';
 
 import { Platform } from '../../base/react';
 
+import UnsupportedMobileBrowserStyle from './UnsupportedMobileBrowserStyle';
+
 /**
  * The map of platforms to URLs at which the mobile app for the associated
  * platform is available for download.
@@ -101,40 +103,10 @@ class UnsupportedMobileBrowser extends Component {
                         </button>
                     </a>
                 </div>
-
+                <UnsupportedMobileBrowserStyle />
-                {
-                    this._renderStyle()
-                }
             </div>
         );
     }
-
-    /**
-     * Renders an HTML style element with CSS specific to
-     * this UnsupportedMobileBrowser.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderStyle() {
-        // Temasys provide lib-jitsi-meet/modules/RTC/adapter.screenshare.js
-        // which detects whether the browser supports WebRTC. If the browser
-        // does not support WebRTC, it displays an alert in the form of a yellow
-        // bar at the top of the page. The alert notifies the user that the
-        // browser does not support WebRTC and, if Temasys provide a plugin for
-        // the browser, the alert contains a button to initiate installing the
-        // browser. When Temasys do not provide a plugin for the browser, we do
-        // not want the alert on the unsupported-browser page because the
-        // notification about the lack of WebRTC support is the whole point of
-        // the unsupported-browser page.
-        return (
-            <style type = 'text/css'>
-                {
-                    'iframe[name="adapterjs-alert"] { display: none; }'
-                }
-            </style>
-        );
-    }
 }
 
 /**

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

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+
+/**
+ * React component that represents HTML style element with CSS specific to
+ * unsupported mobile browser components.
+ *
+ * @private
+ * @returns {ReactElement}
+ */
+export default class UnsupportedMobileBrowserStyle extends Component {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        // Temasys provide lib-jitsi-meet/modules/RTC/adapter.screenshare.js
+        // which detects whether the browser supports WebRTC. If the browser
+        // does not support WebRTC, it displays an alert in the form of a yellow
+        // bar at the top of the page. The alert notifies the user that the
+        // browser does not support WebRTC and, if Temasys provide a plugin for
+        // the browser, the alert contains a button to initiate installing the
+        // browser. When Temasys do not provide a plugin for the browser, we do
+        // not want the alert on the unsupported-browser page because the
+        // notification about the lack of WebRTC support is the whole point of
+        // the unsupported-browser page.
+        return (
+            <style type = 'text/css'>
+                {
+                    'iframe[name="adapterjs-alert"] { display: none; }'
+                }
+            </style>
+        );
+    }
+}