Configurable (sub)optimal and unsupported browsers (#4351)

* Configurable (sub)optimal and unsupported browsers

* maybe this helps somehow

interface_config.js

@@ -167,7 +167,17 @@ var interfaceConfig = {
      *
      * @type {boolean}
      */
-    RECENT_LIST_ENABLED: true
+    RECENT_LIST_ENABLED: true,
+
+    // Names of browsers which should show a warning stating the current browser
+    // has a suboptimal experience. Browsers which are not listed as optimal or
+    // unsupported are considered suboptimal. Valid values are:
+    // chrome, edge, electron, firefox, nwjs, opera, safari
+    OPTIMAL_BROWSERS: [ 'chrome', 'firefox', 'nwjs', 'electron' ],
+
+    // Browsers, in addition to those which do not fully support WebRTC, that
+    // are not supported and should show the unsupported browser page.
+    UNSUPPORTED_BROWSERS: []
 
     /**
      * How many columns the tile view can expand to. The respected range is

react/features/base/environment/environment.js

@@ -3,15 +3,74 @@
 import JitsiMeetJS from '../lib-jitsi-meet';
 import { Platform } from '../react';
 
-import { isBlacklistedEnvironment } from './isBlacklistedEnvironment';
+const { browser } = JitsiMeetJS.util;
+
+const DEFAULT_OPTIMAL_BROWSERS = [
+    'chrome',
+    'electron',
+    'firefox',
+    'nwjs'
+];
+
+const DEFAULT_UNSUPPORTED_BROWSERS = [];
+
+const browserNameToCheck = {
+    chrome: browser.isChrome.bind(browser),
+    edge: browser.isEdge.bind(browser),
+    electron: browser.isElectron.bind(browser),
+    firefox: browser.isFirefox.bind(browser),
+    nwjs: browser.isNWJS.bind(browser),
+    opera: browser.isOpera.bind(browser),
+    safari: browser.isSafari.bind(browser)
+};
+
+declare var interfaceConfig: Object;
+
+/**
+ * Returns whether or not jitsi is optimized and targeted for the  provided
+ * browser name.
+ *
+ * @param {string} browserName - The name of the browser to check.
+ * @returns {boolean}
+ */
+export function isBrowsersOptimal(browserName: string) {
+    return (interfaceConfig.OPTIMAL_BROWSERS || DEFAULT_OPTIMAL_BROWSERS)
+        .includes(browserName);
+}
+
+/**
+ * Returns whether or not the current browser or the list of passed in browsers
+ * is considered suboptimal. Suboptimal means it is a supported browser but has
+ * not been explicitly listed as being optimal, possibly due to functionality
+ * issues.
+ *
+ * @param {Array<string>} [browsers] - A list of browser names to check. Will
+ * default to a whitelist.
+ * @returns {boolean}
+ */
+export function isSuboptimalBrowser() {
+    const optimalBrowsers
+        = interfaceConfig.OPTIMAL_BROWSERS || DEFAULT_OPTIMAL_BROWSERS;
+
+    return !_isCurrentBrowserInList(optimalBrowsers) && isSupportedBrowser();
+}
 
 /**
  * Returns whether or not the current browser should allow the app to display.
+ * A supported browser is assumed to be able to support WebRtc.
  *
  * @returns {boolean}
  */
 export function isSupportedBrowser() {
-    if (navigator.product === 'ReactNative' || isBlacklistedEnvironment()) {
+    if (navigator.product === 'ReactNative') {
+        return false;
+    }
+
+    const isBlacklistedBrowser = _isCurrentBrowserInList(
+        interfaceConfig.UNSUPPORTED_BROWSERS || DEFAULT_UNSUPPORTED_BROWSERS
+    );
+
+    if (isBlacklistedBrowser) {
         return false;
     }
 
@@ -23,3 +82,20 @@ export function isSupportedBrowser() {
         || Platform.OS === 'ios'
         || JitsiMeetJS.isWebRtcSupported();
 }
+
+/**
+ * Runs various browser checks to know if the current browser is found within
+ * the list.
+ *
+ * @param {Array<string>} list - Browser names to check. The names should be
+ * keys in {@link browserNameToCheck}.
+ * @private
+ * @returns {boolean}
+ */
+function _isCurrentBrowserInList(list) {
+    return Boolean(list.find(browserName => {
+        const checkFunction = browserNameToCheck[browserName];
+
+        return checkFunction ? checkFunction.call(browser) : false;
+    }));
+}

react/features/base/environment/isBlacklistedEnvironment.js

@@ -1,11 +0,0 @@
-/**
- * Returns whether or not the current browser is supported for showing meeting
- * based on any custom overrides. This file should be overridden with branding
- * as needed to fit deployment needs.
- *
- * @returns {boolean} True the browser is unsupported due to being  blacklisted
- * by the logic within this function.
- */
-export function isBlacklistedEnvironment() {
-    return false;
-}

react/features/conference/functions.js

@@ -1,5 +1,5 @@
 import { translateToHTML } from '../base/i18n';
-import { browser } from '../base/lib-jitsi-meet';
+import { isSuboptimalBrowser } from '../base/environment';
 import { toState } from '../base/redux';
 
 import { getName } from '../app';
@@ -17,16 +17,7 @@ import { getOverlayToRender } from '../overlay';
  * @returns {void}
  */
 export function maybeShowSuboptimalExperienceNotification(dispatch, t) {
-    if (!browser.isChrome()
+    if (isSuboptimalBrowser()) {
-            && !browser.isFirefox()
-            && !browser.isNWJS()
-            && !browser.isElectron()
-
-            // Adding react native to the list of recommended browsers is not
-            // necessary for now because the function won't be executed at all
-            // in this case but I'm adding it for completeness.
-            && !browser.isReactNative()
-    ) {
         dispatch(
             showWarningNotification(
                 {

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

@@ -2,6 +2,7 @@
 
 import React, { Component } from 'react';
 
+import { isBrowsersOptimal } from '../../base/environment';
 import { translate } from '../../base/i18n';
 
 import { CHROME, FIREFOX } from './browserLinks';
@@ -47,14 +48,26 @@ class UnsupportedDesktopBrowser extends Component<Props> {
                     Please try again with the latest version of&nbsp;
                     <a
                         className = { `${_SNS}__link` }
-                        href = { CHROME } >Chrome</a> and&nbsp;
+                        href = { CHROME } >Chrome</a>&nbsp;
-                    <a
+                    {
-                        className = { `${_SNS}__link` }
+                        this._showFirefox() && <>and <a
-                        href = { FIREFOX }>Firefox</a>
+                            className = { `${_SNS}__link` }
+                            href = { FIREFOX }>Firefox</a></>
+                    }
                 </p>
             </div>
         );
     }
+
+    /**
+     * Returns whether or not a link to download Firefox is displayed.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _showFirefox() {
+        return isBrowsersOptimal('firefox');
+    }
 }
 
 export default translate(UnsupportedDesktopBrowser);