Fix chrome extension banner (#5011)

* Fix chrome extension banner

* Address reviews

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

@@ -4,6 +4,7 @@ import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React from 'react';
 
 import { DialogContainer } from '../../base/dialog';
+import { ChromeExtensionBanner } from '../../chrome-extension-banner';
 import '../../base/user-interaction';
 import '../../chat';
 import '../../external-api';
@@ -31,6 +32,7 @@ export class App extends AbstractApp {
     _createMainElement(component, props) {
         return (
             <AtlasKitThemeProvider mode = 'dark'>
+                <ChromeExtensionBanner />
                 { super._createMainElement(component, props) }
             </AtlasKitThemeProvider>
         );

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

@@ -18,9 +18,7 @@ import { PersistenceRegistry } from '../../storage';
 
 import { appWillMount, appWillUnmount } from '../actions';
 import logger from '../logger';
-import { ChromeExtensionBanner } from '../../../chrome-extension-banner';
 
-declare var interfaceConfig: Object;
 declare var APP: Object;
 
 /**
@@ -131,11 +129,6 @@ export default class BaseApp extends Component<*, State> {
                 <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

@@ -1,7 +1,7 @@
 // @flow
 
 import JitsiMeetJS from '../lib-jitsi-meet';
-import { Platform } from '../react';
+import { isMobileBrowser } from './utils';
 
 const { browser } = JitsiMeetJS.util;
 
@@ -67,7 +67,7 @@ export function isSupportedBrowser() {
     }
 
     // Blacklists apply to desktop browsers only right now.
-    if (!_isMobileBrowser() && _isCurrentBrowserInList(
+    if (!isMobileBrowser() && _isCurrentBrowserInList(
         interfaceConfig.UNSUPPORTED_BROWSERS || DEFAULT_UNSUPPORTED_BROWSERS
     )) {
         return false;
@@ -77,7 +77,7 @@ export function isSupportedBrowser() {
     // - 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();
 }
 
 /**
@@ -96,13 +96,3 @@ function _isCurrentBrowserInList(list) {
         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

@@ -0,0 +1,10 @@
+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

@@ -4,6 +4,10 @@ import { connect } from '../../base/redux';
 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
@@ -32,6 +36,11 @@ type Props = {
      */
     chromeExtensionsInfo: Array<Object>,
 
+    /**
+     * Whether I am the current recorder.
+     */
+    iAmRecorder: boolean,
+
     /**
      * Invoked to obtain translated strings.
      */
@@ -161,11 +170,7 @@ class ChromeExtensionBanner extends PureComponent<Props, State> {
     _shouldNotRender: () => boolean;
 
     /**
-     * Checks whether the banner should be displayed based on:
+     * Checks whether the banner should not be rendered.
-     * 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.
      *
      * @returns {boolean} Whether to show the banner or not.
      */
@@ -178,9 +183,13 @@ class ChromeExtensionBanner extends PureComponent<Props, State> {
 
         const dontShowAgain = localStorage.getItem(DONT_SHOW_AGAIN_CHECKED) === 'true';
 
-        return dontShowAgain
+        return !interfaceConfig.SHOW_CHROME_EXTENSION_BANNER
+            || !browser.isChrome()
+            || isMobileBrowser()
+            || dontShowAgain
             || this.state.closePressed
-        || !this.state.shouldShow;
+            || !this.state.shouldShow
+            || this.props.iAmRecorder;
     }
 
     _onDontShowAgainChange: (object: Object) => void;
@@ -269,7 +278,8 @@ const _mapStateToProps = state => {
     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

@@ -1,6 +1,7 @@
 /* global interfaceConfig */
 
 import { URI_PROTOCOL_PATTERN } from '../base/util';
+import { isMobileBrowser } from '../base/environment/utils';
 import { Platform } from '../base/react';
 
 import {
@@ -55,10 +56,7 @@ export function getDeepLinkingPage(state) {
         return Promise.resolve();
     }
 
-    const OS = Platform.OS;
+    if (isMobileBrowser()) { // mobile
-    const isUsingMobileBrowser = OS === 'android' || OS === 'ios';
-
-    if (isUsingMobileBrowser) { // mobile
         const mobileAppPromo
             = typeof interfaceConfig === 'object'
                 && interfaceConfig.MOBILE_APP_PROMO;

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

@@ -4,23 +4,20 @@ import { I18nextProvider } from 'react-i18next';
 
 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

@@ -3,8 +3,9 @@
 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';
@@ -280,10 +281,7 @@ class WelcomePage extends AbstractWelcomePage {
      * @returns {ReactElement|null}
      */
     _renderTabs() {
-        const isMobileBrowser
+        if (isMobileBrowser()) {
-            = Platform.OS === 'android' || Platform.OS === 'ios';
-
-        if (isMobileBrowser) {
             return null;
         }