Add Install chrome extension banner (jitsi#4996)

config.js

@@ -385,6 +385,20 @@ var config = {
         // userRegion: "asia"
     }
 
+    // Information for the chrome extension banner
+    // chromeExtensionBanner: {
+    //     // The chrome extension to be installed address
+    //     url: 'https://chrome.google.com/webstore/detail/jitsi-meetings/kglhbbefdnlheedjiejgomgmfplipfeb',
+
+    //     // Extensions info which allows checking if they are installed or not
+    //     chromeExtensionsInfo: [
+    //         {
+    //             id: 'kglhbbefdnlheedjiejgomgmfplipfeb',
+    //             path: 'jitsi-logo-48x48.png'
+    //         }
+    //     ]
+    // }
+
     // Local Recording
     //
 

css/_base.scss

@@ -37,6 +37,11 @@ body {
     fill: white;
 }
 
+.jitsi-icon.gray svg {
+    fill: #5E6D7A;
+    cursor: pointer;
+}
+
 /**
  * AtlasKitThemeProvider sets a background color on an app-wrapping div, thereby
  * preventing transparency in filmstrip-only mode. The selector chosen to

css/_chrome-extension-banner.scss

@@ -0,0 +1,93 @@
+.chrome-extension-banner {
+  position: fixed;
+  width: 406px;
+  height: $chromeExtensionBannerHeight;
+  background: #FFF;
+  box-shadow: 0px 2px 48px rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  z-index: 1000;
+  float: right;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 20px;
+  top: $chromeExtensionBannerTop;
+  right: $chromeExtensionBannerRight;
+    &__pos_in_meeting {
+      top: $chromeExtensionBannerTopInMeeting;
+      right: $chromeExtensionBannerRightInMeeeting;
+    }
+
+    &__container {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    &__button-container {
+      display: flex;
+    }
+
+    &__checkbox-container {
+        display: $chromeExtensionBannerDontShowAgainDisplay;
+        margin-left: 45px;
+        margin-top: 16px;
+    }
+
+    &__checkbox-label {
+        font-size: 14px;
+        line-height: 18px;
+        display: flex;
+        align-items: center;
+        letter-spacing: -0.006em;
+        color: #1C2025;
+    }
+
+    &__icon-container {
+      display: flex;
+      background: url('../images/chromeLogo.svg');
+      background-repeat: no-repeat;
+      width: 27px;
+      height: 27px;
+    }
+
+    &__text-container {
+      font-size: 14px;
+      line-height: 18px;
+      display: flex;
+      align-items: center;
+      letter-spacing: -0.006em;
+      color: #151531;
+      width: 329px;
+    }
+
+    &__close-container {
+      display: flex;
+      width: 12px;
+      height: 12px;
+    }
+
+    &__gray-close-icon {
+      fill: #5E6D7A;
+      width: 12px;
+      height: 12px;
+      cursor: pointer;
+    }
+
+    &__button-open-url {
+      background: #0A57EB;
+      border-radius: 24px;
+      margin-left: 45px;
+      width: 236px;
+      height: 40px;
+      cursor: pointer;
+    }
+
+    &__button-text {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 40px;
+      text-align: center;
+      letter-spacing: -0.006em;
+      color: #FFFFFF;
+    }
+}

css/_variables.scss

@@ -260,3 +260,14 @@ $deepLinkingMobileButtonFontWeight: bold;
 $deepLinkingMobileButtonFontSize: inherit;
 
 $primaryDeepLinkingMobileButtonBorderRadius: inherit;
+
+/**
+* Chrome extension banner variables.
+*/
+$chromeExtensionBannerDontShowAgainDisplay: flex;
+$chromeExtensionBannerHeight: 128px;
+$chromeExtensionBannerTop: 80px;
+$chromeExtensionBannerRight: 16px;
+$chromeExtensionBannerTopInMeeting: 10px;
+$chromeExtensionBannerRightInMeeeting: 10px;
+

css/main.scss

@@ -85,5 +85,6 @@ $flagsImagePath: "../images/";
 @import 'third-party-branding/microsoft';
 @import 'avatar';
 @import 'promotional-footer';
+@import 'chrome-extension-banner';
 
 /* Modules END */

interface_config.js

@@ -199,7 +199,14 @@ var interfaceConfig = {
     DISABLE_PRESENCE_STATUS: false,
 
     // If true, notifications regarding joining/leaving are no longer displayed
-    DISABLE_JOIN_LEAVE_NOTIFICATIONS: false
+    DISABLE_JOIN_LEAVE_NOTIFICATIONS: false,
+
+    /**
+    * Decides whether the chrome extension banner should be rendered on the landing page and during the meeting.
+    * If this is set to false, the banner will not be rendered at all. If set to true, the check for extension(s)
+    * being already installed is done before rendering.
+    */
+    SHOW_CHROME_EXTENSION_BANNER: false
 
     /**
      * How many columns the tile view can expand to. The respected range is

lang/main.json

@@ -59,6 +59,11 @@
         "title": "Chat",
         "you": "you"
     },
+    "chromeExtensionBanner": {
+        "installExtensionText": "Install the extension for Google Calendar and Office 365 integration",
+        "buttonText": "Install Chrome Extension",
+        "dontShowAgain": "Don’t show me this again"
+    },
     "connectingOverlay": {
         "joiningRoom": "Connecting you to your meeting..."
     },
@@ -277,7 +282,7 @@
     "dialOut": {
         "statusMessage": "is now {{status}}"
     },
-    "documentSharing" : {
+    "documentSharing": {
         "title": "Shared Document"
     },
     "feedback": {
@@ -630,7 +635,6 @@
         "lowerYourHand": "Lower your hand",
         "moreActions": "More actions",
         "mute": "Mute / Unmute",
-
         "noAudioSignalTitle": "There is no input coming from your mic!",
         "noAudioSignalDesc": "If you did not purposely mute it from system settings or hardware, consider changing the device.",
         "noAudioSignalDescSuggestion": "If you did not purposely mute it from system settings or hardware, consider using the following device:",

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

@@ -18,7 +18,9 @@ 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;
 
 /**
@@ -129,6 +131,11 @@ 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() }