From a9767eda72da152094597575ddc3bc85abe63303 Mon Sep 17 00:00:00 2001
From: horymury <39557534+horymury@users.noreply.github.com>
Date: Wed, 29 Jan 2020 14:30:17 +0200
Subject: [PATCH] Fix chrome extension banner (#5011)

* Fix chrome extension banner

* Address reviews
---
 react/features/app/components/App.web.js      |  2 ++
 react/features/base/app/components/BaseApp.js |  7 -----
 .../features/base/environment/environment.js  | 16 ++---------
 react/features/base/environment/utils.js      | 10 +++++++
 .../components/ChromeExtensionBanner.web.js   | 28 +++++++++++++------
 react/features/deep-linking/functions.js      |  6 ++--
 .../dial-in-info-page/DialInInfoApp.web.js    |  7 ++---
 .../welcome/components/WelcomePage.web.js     |  8 ++----
 8 files changed, 41 insertions(+), 43 deletions(-)
 create mode 100644 react/features/base/environment/utils.js

diff --git a/react/features/app/components/App.web.js b/react/features/app/components/App.web.js
index 56b23c0d5..672442b18 100644
--- a/react/features/app/components/App.web.js
+++ b/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>
         );
diff --git a/react/features/base/app/components/BaseApp.js b/react/features/base/app/components/BaseApp.js
index 2c445df83..ac7ca71e4 100644
--- a/react/features/base/app/components/BaseApp.js
+++ b/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() }
diff --git a/react/features/base/environment/environment.js b/react/features/base/environment/environment.js
index 99ba508d0..7583b8c34 100644
--- a/react/features/base/environment/environment.js
+++ b/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';
-}
diff --git a/react/features/base/environment/utils.js b/react/features/base/environment/utils.js
new file mode 100644
index 000000000..3542217fa
--- /dev/null
+++ b/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';
+}
diff --git a/react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js b/react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js
index bba07eff7..75bf5a969 100644
--- a/react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js
+++ b/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:
-     * 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.
      */
@@ -178,9 +183,13 @@ class ChromeExtensionBanner extends PureComponent<Props, State> {
 
         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;
@@ -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
     };
 };
 
diff --git a/react/features/deep-linking/functions.js b/react/features/deep-linking/functions.js
index 909223179..e686898eb 100644
--- a/react/features/deep-linking/functions.js
+++ b/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;
-    const isUsingMobileBrowser = OS === 'android' || OS === 'ios';
-
-    if (isUsingMobileBrowser) { // mobile
+    if (isMobileBrowser()) { // mobile
         const mobileAppPromo
             = typeof interfaceConfig === 'object'
                 && interfaceConfig.MOBILE_APP_PROMO;
diff --git a/react/features/invite/components/dial-in-info-page/DialInInfoApp.web.js b/react/features/invite/components/dial-in-info-page/DialInInfoApp.web.js
index bbb2cae67..7d2c90990 100644
--- a/react/features/invite/components/dial-in-info-page/DialInInfoApp.web.js
+++ b/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>,
diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js
index 44e1b4e59..873b13cd9 100644
--- a/react/features/welcome/components/WelcomePage.web.js
+++ b/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
-            = Platform.OS === 'android' || Platform.OS === 'ios';
-
-        if (isMobileBrowser) {
+        if (isMobileBrowser()) {
             return null;
         }