ref: Use openURLInBrowser whenever possible

If action is null (observed on some old devices) we'll get an exception.
Reversing the check fixes it since Actions.XXX is statically defined.

.travis.yml

@@ -1,4 +1,4 @@
-osx_image: xcode10.2
+osx_image: xcode11.1
 language: objective-c
 script:
 - "./ios/travis-ci/build-ipa.sh"

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetOngoingConferenceService.java

@@ -87,7 +87,7 @@ public class JitsiMeetOngoingConferenceService extends Service
     @Override
     public int onStartCommand(Intent intent, int flags, int startId) {
         final String action = intent.getAction();
-        if (action.equals(Actions.START)) {
+        if (Actions.START.equals(action)) {
             Notification notification = OngoingNotification.buildOngoingConferenceNotification();
             if (notification == null) {
                 stopSelf();
@@ -96,7 +96,7 @@ public class JitsiMeetOngoingConferenceService extends Service
                 startForeground(OngoingNotification.NOTIFICATION_ID, notification);
                 JitsiMeetLogger.i(TAG + " Service started");
             }
-        } else if (action.equals(Actions.HANGUP)) {
+        } else if (Actions.HANGUP.equals(action)) {
             JitsiMeetLogger.i(TAG + " Hangup requested");
             // Abort all ongoing calls
             if (AudioModeModule.useConnectionService()) {

android/settings.gradle

@@ -10,7 +10,7 @@ project(':react-native-community-async-storage').projectDir = new File(rootProje
 include ':react-native-community_netinfo'
 project(':react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
 include ':react-native-google-signin'
-project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')
+project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/google-signin/android')
 include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'

css/_variables.scss

@@ -164,9 +164,45 @@ $watermarkHeight: 74px;
  */
 $welcomePageDescriptionColor: #fff;
 $welcomePageFontFamily: inherit;
-$welcomePageHeaderBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
+$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
 $welcomePageTitleColor: #fff;
 
+$welcomePageHeaderBackground: none;
+$welcomePageHeaderBackgroundSmall: none;
+$welcomePageHeaderBackgroundPosition: none;
+$welcomePageHeaderBackgroundRepeat: none;
+$welcomePageHeaderBackgroundSize: none;
+$welcomePageHeaderPaddingBottom: 0px;
+
+$welcomePageHeaderTextMarginTop: 35px;
+$welcomePageHeaderTextMarginBottom: 35px;
+
+$welcomePageHeaderTextTitleMarginBottom: 16px;
+
+$welcomePageHeaderTextDescriptionDisplay: inherit;
+
+$welcomePageEnterRoomWidth: 680px;
+$welcomePageEnterRoomPadding: 25px 30px;
+$welcomePageEnterRoomBorderRadius: 0px;
+
+$welcomePageEnterRoomInputContainerPadding: 0 8px 5px 0px;
+$welcomePageEnterRoomInputContainerBorderWidth: 0px 0px 2px 0px;
+$welcomePageEnterRoomInputContainerBorderStyle: solid;
+$welcomePageEnterRoomInputContainerBorderImage: linear-gradient(to right, #dee1e6, #fff) 1;
+
+$welcomePageEnterRoomTitleDisplay: inherit;
+
+$welcomePageTabContainerDisplay: flex;
+$welcomePageTabContentDisplay: inherit;
+$welcomePageTabButtonsDisplay: flex;
+$welcomePageTabDisplay: block;
+
+$welcomePageButtonWidth: 51px;
+$welcomePageButtonHeight: 35px;
+$welcomePageButtonFontWeight: inherit;
+$welcomePageButtonBorderRadius: 4px;
+$welcomePageButtonLineHeight: 35px;
+
 /**
  * Deep-linking page variables.
  */

css/_welcome_page.scss

@@ -4,7 +4,7 @@ body.welcome-page {
 }
 
 .welcome {
-    background-image: $welcomePageHeaderBackground;
+    background-image: $welcomePageBackground;
     display: flex;
     flex-direction: column;
     font-family: $welcomePageFontFamily;
@@ -13,6 +13,11 @@ body.welcome-page {
     position: relative;
 
     .header {
+        background-image: $welcomePageHeaderBackground;
+        background-position: $welcomePageHeaderBackgroundPosition;
+        background-repeat: $welcomePageHeaderBackgroundRepeat;
+        background-size: $welcomePageHeaderBackgroundSize;
+        padding-bottom: $welcomePageHeaderPaddingBottom;
         align-items: center;
         display: flex;
         flex-direction: column;
@@ -24,8 +29,8 @@ body.welcome-page {
         .header-text {
             display: flex;
             flex-direction: column;
-            margin-top: $watermarkHeight + 35;
-            margin-bottom: 35px;
+            margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop;
+            margin-bottom: $welcomePageHeaderTextMarginBottom;
             max-width: calc(100% - 40px);
             width: 650px;
             z-index: $zindex2;
@@ -36,10 +41,11 @@ body.welcome-page {
             font-size: 2.5rem;
             font-weight: 500;
             line-height: 1.18;
-            margin-bottom: 16px;
+            margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
         }
 
         .header-text-description {
+            display: $welcomePageHeaderTextDescriptionDisplay;
             color: $welcomePageDescriptionColor;
             font-size: 1rem;
             font-weight: 400;
@@ -51,23 +57,24 @@ body.welcome-page {
             display: flex;
             align-items: center;
             max-width: calc(100% - 40px);
-            width: 680px;
+            width: $welcomePageEnterRoomWidth;
             z-index: $zindex2;
             background-color: #fff;
-            padding: 25px 30px;
+            padding: $welcomePageEnterRoomPadding;
+            border-radius: $welcomePageEnterRoomBorderRadius;
 
             .enter-room-input-container {
                 width: 100%;
-                padding-right: 8px;
-                padding-bottom: 5px;
+                padding: $welcomePageEnterRoomInputContainerPadding;
                 text-align: left;
                 color: #253858;
                 height: fit-content;
-                border-width: 0px 0px 2px 0px;
-                border-style: solid;
-                border-image: linear-gradient(to right, #dee1e6, #fff) 1;
+                border-width: $welcomePageEnterRoomInputContainerBorderWidth;
+                border-style: $welcomePageEnterRoomInputContainerBorderStyle;
+                border-image: $welcomePageEnterRoomInputContainerBorderImage;
 
                 .enter-room-title {
+                    display: $welcomePageEnterRoomTitleDisplay;
                     font-size: 18px;
                     font-weight: bold;
                     padding-bottom: 5px;
@@ -94,10 +101,11 @@ body.welcome-page {
             min-height: 354px;
             width: 710px;
             background: #75A7E7;
-            display: flex;
+            display: $welcomePageTabContainerDisplay;
             flex-direction: column;
 
             .tab-content{
+                display: $welcomePageTabContentDisplay;
                 margin: 5px 0px;
                 overflow: hidden;
                 flex-grow: 1;
@@ -111,13 +119,14 @@ body.welcome-page {
             .tab-buttons {
                 font-size: 18px;
                 color: #FFFFFF;
-                display: flex;
+                display: $welcomePageTabButtonsDisplay;
                 flex-grow: 0;
                 flex-direction: row;
                 min-height: 54px;
                 width: 100%;
 
                 .tab {
+                    display: $welcomePageTabDisplay;
                     text-align: center;
                     background: rgba(9,30,66,0.37);
                     height: 55px;
@@ -138,15 +147,16 @@ body.welcome-page {
     }
 
     .welcome-page-button {
-        width: 51px;
-        height: 35px;
+        width: $welcomePageButtonWidth;
+        height: $welcomePageButtonHeight;
         font-size: 14px;
+        font-weight: $welcomePageButtonFontWeight;
         background: #0074E0;
-        border-radius: 4px;
+        border-radius: $welcomePageButtonBorderRadius;
         color: #FFFFFF;
         text-align: center;
         vertical-align: middle;
-        line-height: 35px;
+        line-height: $welcomePageButtonLineHeight;
         cursor: pointer;
     }
 

css/_welcome_page_settings_toolbar.scss

@@ -0,0 +1 @@
+/** Insert custom CSS for any additional content in the welcome page settings toolbar **/

css/main.scss

@@ -51,6 +51,7 @@ $flagsImagePath: "../images/";
 @import 'ringing/ringing';
 @import 'welcome_page';
 @import 'welcome_page_content';
+@import 'welcome_page_settings_toolbar';
 @import 'toolbars';
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';

index.html

@@ -148,6 +148,7 @@
     <!--#include virtual="title.html" -->
     <!--#include virtual="plugin.head.html" -->
     <!--#include virtual="static/welcomePageAdditionalContent.html" -->
+    <!--#include virtual="static/settingsToolbarAdditionalContent.html" -->
   </head>
   <body>
     <div id="react"></div>

interface_config.js

@@ -27,6 +27,7 @@ var interfaceConfig = {
     SHOW_DEEP_LINKING_IMAGE: false,
     GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
     DISPLAY_WELCOME_PAGE_CONTENT: true,
+    DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT: false,
     APP_NAME: 'Jitsi Meet',
     NATIVE_APP_NAME: 'Jitsi Meet',
     PROVIDER_NAME: 'Jitsi',

ios/Podfile

@@ -62,7 +62,7 @@ target 'JitsiMeet' do
   pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
   pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
   pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
-  pod 'RNGoogleSignin', :path => '../node_modules/react-native-google-signin'
+  pod 'RNGoogleSignin', :path => '../node_modules/@react-native-community/google-signin'
   pod 'RNSound', :path => '../node_modules/react-native-sound'
   pod 'RNSVG', :path => '../node_modules/react-native-svg'
   pod 'RNWatch', :path => '../node_modules/react-native-watch-connectivity'

ios/Podfile.lock

@@ -1,5 +1,10 @@
 PODS:
   - Amplitude-iOS (4.0.4)
+  - AppAuth (1.2.0):
+    - AppAuth/Core (= 1.2.0)
+    - AppAuth/ExternalUserAgent (= 1.2.0)
+  - AppAuth/Core (1.2.0)
+  - AppAuth/ExternalUserAgent (1.2.0)
   - boost-for-react-native (1.63.0)
   - BVLinearGradient (2.5.6):
     - React
@@ -62,18 +67,10 @@ PODS:
     - GoogleUtilities/Network (~> 5.2)
     - "GoogleUtilities/NSData+zlib (~> 5.2)"
     - nanopb (~> 0.3)
-  - GoogleSignIn (4.4.0):
-    - "GoogleToolboxForMac/NSDictionary+URLArguments (~> 2.1)"
-    - "GoogleToolboxForMac/NSString+URLArguments (~> 2.1)"
+  - GoogleSignIn (5.0.1):
+    - AppAuth (~> 1.2)
+    - GTMAppAuth (~> 1.0)
     - GTMSessionFetcher/Core (~> 1.1)
-  - GoogleToolboxForMac/DebugUtils (2.2.0):
-    - GoogleToolboxForMac/Defines (= 2.2.0)
-  - GoogleToolboxForMac/Defines (2.2.0)
-  - "GoogleToolboxForMac/NSDictionary+URLArguments (2.2.0)":
-    - GoogleToolboxForMac/DebugUtils (= 2.2.0)
-    - GoogleToolboxForMac/Defines (= 2.2.0)
-    - "GoogleToolboxForMac/NSString+URLArguments (= 2.2.0)"
-  - "GoogleToolboxForMac/NSString+URLArguments (2.2.0)"
   - GoogleUtilities/AppDelegateSwizzler (5.4.1):
     - GoogleUtilities/Environment
     - GoogleUtilities/Logger
@@ -92,7 +89,14 @@ PODS:
     - GoogleUtilities/Logger
   - GoogleUtilities/UserDefaults (5.4.1):
     - GoogleUtilities/Logger
-  - GTMSessionFetcher/Core (1.2.1)
+  - GTMAppAuth (1.0.0):
+    - AppAuth/Core (~> 1.0)
+    - GTMSessionFetcher (~> 1.1)
+  - GTMSessionFetcher (1.2.2):
+    - GTMSessionFetcher/Full (= 1.2.2)
+  - GTMSessionFetcher/Core (1.2.2)
+  - GTMSessionFetcher/Full (1.2.2):
+    - GTMSessionFetcher/Core (= 1.2.2)
   - nanopb (0.3.901):
     - nanopb/decode (= 0.3.901)
     - nanopb/encode (= 0.3.901)
@@ -330,8 +334,8 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.61.1)
   - RNCAsyncStorage (1.3.4):
     - React
-  - RNGoogleSignin (2.0.0):
-    - GoogleSignIn (~> 4.4.0)
+  - RNGoogleSignin (3.0.1):
+    - GoogleSignIn (~> 5.0.0)
     - React
   - RNSound (0.11.0):
     - React
@@ -386,7 +390,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/turbomodule (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
-  - RNGoogleSignin (from `../node_modules/react-native-google-signin`)
+  - "RNGoogleSignin (from `../node_modules/@react-native-community/google-signin`)"
   - RNSound (from `../node_modules/react-native-sound`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNWatch (from `../node_modules/react-native-watch-connectivity`)
@@ -406,12 +410,14 @@ SPEC REPOS:
     - FirebaseDynamicLinks
     - FirebaseInstanceID
     - GoogleAppMeasurement
-    - GoogleSignIn
-    - GoogleToolboxForMac
     - GoogleUtilities
-    - GTMSessionFetcher
     - nanopb
     - ObjectiveDropboxOfficial
+  trunk:
+    - AppAuth
+    - GoogleSignIn
+    - GTMAppAuth
+    - GTMSessionFetcher
 
 EXTERNAL SOURCES:
   BVLinearGradient:
@@ -479,7 +485,7 @@ EXTERNAL SOURCES:
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-community/async-storage"
   RNGoogleSignin:
-    :path: "../node_modules/react-native-google-signin"
+    :path: "../node_modules/@react-native-community/google-signin"
   RNSound:
     :path: "../node_modules/react-native-sound"
   RNSVG:
@@ -491,6 +497,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   Amplitude-iOS: 2ad4d7270c99186236c1272a3a9425463b1ae1a7
+  AppAuth: bce82c76043657c99d91e7882e8a9e1a93650cd4
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CocoaLumberjack: 2f44e60eb91c176d471fdba43b9e3eae6a721947
@@ -508,10 +515,10 @@ SPEC CHECKSUMS:
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   GoogleAppMeasurement: 6cf307834da065863f9faf4c0de0a936d81dd832
-  GoogleSignIn: 7ff245e1a7b26d379099d3243a562f5747e23d39
-  GoogleToolboxForMac: ff31605b7d66400dcec09bed5861689aebadda4d
+  GoogleSignIn: 3a51b9bb8e48b635fd7f4272cee06ca260345b86
   GoogleUtilities: 1e25823cbf46540b4284f6ef8e17b3a68ee12bbc
-  GTMSessionFetcher: 32aeca0aa144acea523e1c8e053089dec2cb98ca
+  GTMAppAuth: 4deac854479704f348309e7b66189e604cf5e01e
+  GTMSessionFetcher: 61bb0f61a4cb560030f1222021178008a5727a23
   nanopb: 2901f78ea1b7b4015c860c2fdd1ea2fee1a18d48
   ObjectiveDropboxOfficial: a5afefc83f6467c42c45f2253f583f2ad1ffc701
   RCTRequired: 53825815218847d3e9c7b6d92ad2d197a926d51e
@@ -540,12 +547,12 @@ SPEC CHECKSUMS:
   React-RCTVibration: 8be61459e3749d1fb02cf414edd05b3007622882
   ReactCommon: 4fba5be89efdf0b5720e0adb3d8d7edf6e532db0
   RNCAsyncStorage: 8e31405a9f12fbf42c2bb330e4560bfd79c18323
-  RNGoogleSignin: d030c6c6591db24c3cee649f64c7babf0a1699a0
+  RNGoogleSignin: 39336070b35fc4cea6a98cf111e00480317be0ae
   RNSound: c980916b596cc15c8dcd2f6ecd3b13c4881dbe20
   RNSVG: aac12785382e8fd4f28d072fe640612e34914631
   RNWatch: 09738b339eceb66e4d80a2371633ca5fb380fa42
   Yoga: d8c572ddec8d05b7dba08e4e5f1924004a177078
 
-PODFILE CHECKSUM: 0ac392c47cc78d9db03eea7b58950184336d6cf4
+PODFILE CHECKSUM: cb84b325b724c6ef7c8b24aa52ca7b6f681a095c
 
 COCOAPODS: 1.8.1

ios/sdk/src/JitsiMeet.m

@@ -90,8 +90,7 @@
 
     if ([RNGoogleSignin application:app
                             openURL:url
-                  sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
-                         annotation:options[UIApplicationOpenURLOptionsAnnotationKey]]) {
+                            options:options]) {
         return YES;
     }
 

package-lock.json

@@ -3062,6 +3062,11 @@
         }
       }
     },
+    "@react-native-community/google-signin": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/google-signin/-/google-signin-3.0.1.tgz",
+      "integrity": "sha512-RC9c7ATGdq5IKFqw/h4d8eVTDve8FZxMtsarBHKfP09SrQfEgvOebzVr7YNC+4qs7dFqR+0E2vD7nle1s/dQ3A=="
+    },
     "@react-native-community/netinfo": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-4.1.5.tgz",
@@ -15441,11 +15446,6 @@
         "jssha": "^2.2.0"
       }
     },
-    "react-native-google-signin": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-google-signin/-/react-native-google-signin-2.0.0.tgz",
-      "integrity": "sha512-9loM4lcCIdbco5BnmNio7yGaXQKCpCaY1VRmYiTSvC5NjuSf6Ui6jZRee46p/YdaU4yRnS3u5Vct6Psrvr0HNg=="
-    },
     "react-native-immersive": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "@atlaskit/tooltip": "12.1.13",
     "@microsoft/microsoft-graph-client": "1.1.0",
     "@react-native-community/async-storage": "1.3.4",
+    "@react-native-community/google-signin": "3.0.1",
     "@react-native-community/netinfo": "4.1.5",
     "@svgr/webpack": "4.3.2",
     "@tensorflow-models/body-pix": "1.1.2",
@@ -71,7 +72,6 @@
     "react-native-background-timer": "2.1.1",
     "react-native-calendar-events": "github:jitsi/react-native-calendar-events#902e6e92d6bae450a6052f76ba4d02f977ffd8f2",
     "react-native-callstats": "3.61.0",
-    "react-native-google-signin": "2.0.0",
     "react-native-immersive": "2.0.0",
     "react-native-keep-awake": "4.0.0",
     "react-native-linear-gradient": "2.5.6",

react/features/google-api/googleApi.native.js

@@ -5,7 +5,7 @@ import { NativeModules } from 'react-native';
 let GoogleSignin;
 
 if (NativeModules.RNGoogleSignin) {
-    GoogleSignin = require('react-native-google-signin').GoogleSignin;
+    GoogleSignin = require('@react-native-community/google-signin').GoogleSignin;
 }
 
 import {

react/features/recording/components/LiveStream/constants.js

@@ -2,5 +2,4 @@
  * The URL that is the main landing page for YouTube live streaming and should
  * have a user's live stream key.
  */
-export const YOUTUBE_LIVE_DASHBOARD_URL
-    = 'https://www.youtube.com/live_dashboard';
+export const YOUTUBE_LIVE_DASHBOARD_URL = 'https://www.youtube.com/live_dashboard';

react/features/recording/components/LiveStream/native/StreamKeyForm.js

@@ -1,12 +1,13 @@
 // @flow
 
 import React from 'react';
-import { Linking, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { _abstractMapStateToProps } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
 import { StyleType } from '../../../../base/styles';
+import { openURLInBrowser } from '../../../../base/util';
 
 import AbstractStreamKeyForm, {
     type Props as AbstractProps
@@ -120,7 +121,7 @@ class StreamKeyForm extends AbstractStreamKeyForm<Props> {
         const { helpURL } = this;
 
         if (typeof helpURL === 'string') {
-            Linking.openURL(helpURL);
+            openURLInBrowser(helpURL);
         }
     }
 }

react/features/recording/components/LiveStream/native/StreamKeyPicker.js

@@ -2,7 +2,6 @@
 
 import React, { Component } from 'react';
 import {
-    Linking,
     Text,
     TouchableHighlight,
     TouchableOpacity,
@@ -13,6 +12,7 @@ import { _abstractMapStateToProps } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { connect } from '../../../../base/redux';
 import { StyleType } from '../../../../base/styles';
+import { openURLInBrowser } from '../../../../base/util';
 
 import { YOUTUBE_LIVE_DASHBOARD_URL } from '../constants';
 
@@ -153,7 +153,7 @@ class StreamKeyPicker extends Component<Props, State> {
      * @returns {void}
      */
     _onOpenYoutubeDashboard() {
-        Linking.openURL(YOUTUBE_LIVE_DASHBOARD_URL);
+        openURLInBrowser(YOUTUBE_LIVE_DASHBOARD_URL);
     }
 
     _onStreamPick: string => Function

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

@@ -53,6 +53,15 @@ class WelcomePage extends AbstractWelcomePage {
          */
         this._additionalContentRef = null;
 
+        /**
+         * The HTML Element used as the container for additional toolbar content. Used
+         * for directly appending the additional content template to the dom.
+         *
+         * @private
+         * @type {HTMLTemplateElement|null}
+         */
+        this._additionalToolbarContentRef = null;
+
         /**
          * The template to use as the main content for the welcome page. If
          * not found then only the welcome page head will display.
@@ -63,11 +72,24 @@ class WelcomePage extends AbstractWelcomePage {
         this._additionalContentTemplate = document.getElementById(
             'welcome-page-additional-content-template');
 
+        /**
+         * The template to use as the additional content for the welcome page header toolbar.
+         * If not found then only the settings icon will be displayed.
+         *
+         * @private
+         * @type {HTMLTemplateElement|null}
+         */
+        this._additionalToolbarContentTemplate = document.getElementById(
+            'settings-toolbar-additional-content-template'
+        );
+
         // Bind event handlers so they are only bound once per instance.
         this._onFormSubmit = this._onFormSubmit.bind(this);
         this._onRoomChange = this._onRoomChange.bind(this);
         this._setAdditionalContentRef
             = this._setAdditionalContentRef.bind(this);
+        this._setAdditionalToolbarContentRef
+            = this._setAdditionalToolbarContentRef.bind(this);
         this._onTabSelected = this._onTabSelected.bind(this);
     }
 
@@ -90,6 +112,12 @@ class WelcomePage extends AbstractWelcomePage {
             this._additionalContentRef.appendChild(
                 this._additionalContentTemplate.content.cloneNode(true));
         }
+
+        if (this._shouldShowAdditionalToolbarContent()) {
+            this._additionalToolbarContentRef.appendChild(
+                this._additionalToolbarContentTemplate.content.cloneNode(true)
+            );
+        }
     }
 
     /**
@@ -114,6 +142,7 @@ class WelcomePage extends AbstractWelcomePage {
         const { t } = this.props;
         const { APP_NAME } = interfaceConfig;
         const showAdditionalContent = this._shouldShowAdditionalContent();
+        const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
 
         return (
             <div
@@ -127,6 +156,12 @@ class WelcomePage extends AbstractWelcomePage {
                     <div className = 'welcome-page-settings'>
                         <SettingsButton
                             defaultTab = { SETTINGS_TABS.CALENDAR } />
+                        { showAdditionalToolbarContent
+                            ? <div
+                                className = 'settings-toolbar-content'
+                                ref = { this._setAdditionalToolbarContentRef } />
+                            : null
+                        }
                     </div>
                     <div className = 'header-image' />
                     <div className = 'header-text'>
@@ -263,6 +298,19 @@ class WelcomePage extends AbstractWelcomePage {
         this._additionalContentRef = el;
     }
 
+    /**
+     * Sets the internal reference to the HTMLDivElement used to hold the
+     * toolbar additional content.
+     *
+     * @param {HTMLDivElement} el - The HTMLElement for the div that is the root
+     * of the additional toolbar content.
+     * @private
+     * @returns {void}
+     */
+    _setAdditionalToolbarContentRef(el) {
+        this._additionalToolbarContentRef = el;
+    }
+
     /**
      * Returns whether or not additional content should be displayed below
      * the welcome page's header for entering a room name.
@@ -276,6 +324,20 @@ class WelcomePage extends AbstractWelcomePage {
             && this._additionalContentTemplate.content
             && this._additionalContentTemplate.innerHTML.trim();
     }
+
+    /**
+     * Returns whether or not additional content should be displayed inside
+     * the header toolbar.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _shouldShowAdditionalToolbarContent() {
+        return interfaceConfig.DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT
+            && this._additionalToolbarContentTemplate
+            && this._additionalToolbarContentTemplate.content
+            && this._additionalToolbarContentTemplate.innerHTML.trim();
+    }
 }
 
 export default translate(connect(_mapStateToProps)(WelcomePage));

static/settingsToolbarAdditionalContent.html

@@ -0,0 +1 @@
+<template id="settings-toolbar-additional-content-template"></template>