diff --git a/css/_settings_toolbar.scss b/css/_settings_toolbar.scss
new file mode 100644
index 0000000000..c0e892562c
--- /dev/null
+++ b/css/_settings_toolbar.scss
@@ -0,0 +1 @@
+/** Insert custom CSS for any additional content in the welcome page settings toolbar **/
diff --git a/index.html b/index.html
index 6f42cce929..ab731cfe3a 100644
--- a/index.html
+++ b/index.html
@@ -148,6 +148,7 @@
+
diff --git a/interface_config.js b/interface_config.js
index 1bb86142db..5daa3b5844 100644
--- a/interface_config.js
+++ b/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_CONTENT: false,
APP_NAME: 'Jitsi Meet',
NATIVE_APP_NAME: 'Jitsi Meet',
PROVIDER_NAME: 'Jitsi',
diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js
index d2ee3acd6c..2cdd33bdc5 100644
--- a/react/features/welcome/components/WelcomePage.web.js
+++ b/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 (
+ { showAdditionalToolbarContent
+ ?
+ : null
+ }
@@ -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_CONTENT
+ && this._additionalToolbarContentTemplate
+ && this._additionalToolbarContentTemplate.content
+ && this._additionalToolbarContentTemplate.innerHTML.trim();
+ }
}
export default translate(connect(_mapStateToProps)(WelcomePage));
diff --git a/static/settingsToolbarAdditionalContent.html b/static/settingsToolbarAdditionalContent.html
new file mode 100644
index 0000000000..a63bae990c
--- /dev/null
+++ b/static/settingsToolbarAdditionalContent.html
@@ -0,0 +1 @@
+