Fix chrome extension banner (#5011)

* Fix chrome extension banner

* Address reviews

react/features/app/components/App.web.js

 import React from 'react';
 
 import { DialogContainer } from '../../base/dialog';
+import { ChromeExtensionBanner } from '../../chrome-extension-banner';
 import '../../base/user-interaction';
 import '../../chat';
 import '../../external-api';
     _createMainElement(component, props) {
         return (
             <AtlasKitThemeProvider mode = 'dark'>
+                <ChromeExtensionBanner />
                 { super._createMainElement(component, props) }
             </AtlasKitThemeProvider>
         );

react/features/base/app/components/BaseApp.js

 
 import { appWillMount, appWillUnmount } from '../actions';
 import logger from '../logger';
-import { ChromeExtensionBanner } from '../../../chrome-extension-banner';
 
-declare var interfaceConfig: Object;
 declare var APP: Object;
 
 /**
                 <I18nextProvider i18n = { i18next }>
                     <Provider store = { store }>
                         <Fragment>
-                            {
-                                typeof interfaceConfig !== 'undefined'
-                                && interfaceConfig.SHOW_CHROME_EXTENSION_BANNER
-                                && <ChromeExtensionBanner />
-                            }
                             { this._createMainElement(component) }
                             <SoundCollection />
                             { this._createExtraElement() }

react/features/base/environment/environment.js

 // @flow
 
 import JitsiMeetJS from '../lib-jitsi-meet';
-import { Platform } from '../react';
+import { isMobileBrowser } from './utils';
 
 const { browser } = JitsiMeetJS.util;
 
     }
 
     // Blacklists apply to desktop browsers only right now.
-    if (!_isMobileBrowser() && _isCurrentBrowserInList(
+    if (!isMobileBrowser() && _isCurrentBrowserInList(
         interfaceConfig.UNSUPPORTED_BROWSERS || DEFAULT_UNSUPPORTED_BROWSERS
     )) {
         return false;
     // - the WelcomePage is mobile ready;
     // - if the URL points to a conference then deep-linking will take
     //   care of it.
-    return _isMobileBrowser() || JitsiMeetJS.isWebRtcSupported();
+    return isMobileBrowser() || JitsiMeetJS.isWebRtcSupported();
 }
 
 /**
         return checkFunction ? checkFunction.call(browser) : false;
     }));
 }
-
-/**
- * Returns whether or not the current environment is a mobile device.
- *
- * @private
- * @returns {boolean}
- */
-function _isMobileBrowser() {
-    return Platform.OS === 'android' || Platform.OS === 'ios';
-}

react/features/base/environment/utils.js

+import Platform from '../react/Platform';
+
+/**
+ * Returns whether or not the current environment is a mobile device.
+ *
+ * @returns {boolean}
+ */
+export function isMobileBrowser() {
+    return Platform.OS === 'android' || Platform.OS === 'ios';
+}

react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js

 import { Icon, IconClose } from '../../base/icons';
 import { translate } from '../../base/i18n';
 import { getCurrentConference } from '../../base/conference/functions';
+import { browser } from '../../base/lib-jitsi-meet';
+import { isMobileBrowser } from '../../base/environment/utils';
+
+declare var interfaceConfig: Object;
 
 /**
  * Local storage key name for flag telling if user checked 'Don't show again' checkbox on the banner
      */
     chromeExtensionsInfo: Array<Object>,
 
+    /**
+     * Whether I am the current recorder.
+     */
+    iAmRecorder: boolean,
+
     /**
      * Invoked to obtain translated strings.
      */
     _shouldNotRender: () => boolean;
 
     /**
-     * Checks whether the banner should be displayed based on:
-     * Whether there is a configuration issue with the chrome extensions data.
-     * Whether the user checked don't show again checkbox in a previous session.
-     * Whether the user closed the banner.
-     * Whether the extension is already installed.
+     * Checks whether the banner should not be rendered.
      *
      * @returns {boolean} Whether to show the banner or not.
      */
 
         const dontShowAgain = localStorage.getItem(DONT_SHOW_AGAIN_CHECKED) === 'true';
 
-        return dontShowAgain
-        || this.state.closePressed
-        || !this.state.shouldShow;
+        return !interfaceConfig.SHOW_CHROME_EXTENSION_BANNER
+            || !browser.isChrome()
+            || isMobileBrowser()
+            || dontShowAgain
+            || this.state.closePressed
+            || !this.state.shouldShow
+            || this.props.iAmRecorder;
     }
 
     _onDontShowAgainChange: (object: Object) => void;
     return {
         chromeExtensionUrl: bannerCfg.url,
         chromeExtensionsInfo: bannerCfg.chromeExtensionsInfo || [],
-        conference: getCurrentConference(state)
+        conference: getCurrentConference(state),
+        iAmRecorder: state['features/base/config'].iAmRecorder
     };
 };
 

react/features/deep-linking/functions.js

 /* global interfaceConfig */
 
 import { URI_PROTOCOL_PATTERN } from '../base/util';
+import { isMobileBrowser } from '../base/environment/utils';
 import { Platform } from '../base/react';
 
 import {
         return Promise.resolve();
     }
 
-    const OS = Platform.OS;
-    const isUsingMobileBrowser = OS === 'android' || OS === 'ios';
-
-    if (isUsingMobileBrowser) { // mobile
+    if (isMobileBrowser()) { // mobile
         const mobileAppPromo
             = typeof interfaceConfig === 'object'
                 && interfaceConfig.MOBILE_APP_PROMO;

react/features/invite/components/dial-in-info-page/DialInInfoApp.web.js

 
 import parseURLParams from '../../../base/config/parseURLParams';
 import { i18next } from '../../../base/i18n';
-
+import { isMobileBrowser } from '../../../base/environment/utils';
 import { DialInSummary } from '../dial-in-summary';
 
 import NoRoomError from './NoRoomError';
-import Platform from '../../../base/react/Platform.web';
 
 document.addEventListener('DOMContentLoaded', () => {
     const { room } = parseURLParams(window.location, true, 'search');
-    const OS = Platform.OS;
-    const isUsingMobileBrowser = OS === 'android' || OS === 'ios';
 
     ReactDOM.render(
         <I18nextProvider i18n = { i18next }>
             { room
                 ? <DialInSummary
                     className = 'dial-in-page'
-                    clickableNumbers = { isUsingMobileBrowser }
+                    clickableNumbers = { isMobileBrowser() }
                     room = { decodeURIComponent(room) } />
                 : <NoRoomError className = 'dial-in-page' /> }
         </I18nextProvider>,

react/features/welcome/components/WelcomePage.web.js

 import React from 'react';
 
 import { translate } from '../../base/i18n';
-import { Platform, Watermarks } from '../../base/react';
+import { Watermarks } from '../../base/react';
 import { connect } from '../../base/redux';
+import { isMobileBrowser } from '../../base/environment/utils';
 import { CalendarList } from '../../calendar-sync';
 import { RecentList } from '../../recent-list';
 import { SettingsButton, SETTINGS_TABS } from '../../settings';
      * @returns {ReactElement|null}
      */
     _renderTabs() {
-        const isMobileBrowser
-            = Platform.OS === 'android' || Platform.OS === 'ios';
-
-        if (isMobileBrowser) {
+        if (isMobileBrowser()) {
             return null;
         }