feat(DownloadOverflowButton): Implement.

config.js

@@ -423,6 +423,13 @@ var config = {
     // user documentation.
     // userDocumentationURL: 'https://docs.example.com/video-meetings.html'
 
+    // URLs meant to be opened in different windows.
+    // deploymentUrls: {
+    //  // If specified a 'Download our apps' button will be displayed in the overflow menu with a link
+    //  // to the specified URL for an app download page.
+    //  downloadAppsUrl: 'https://docs.example.com/our-apps.html'
+    // }
+
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold

interface_config.js

@@ -51,7 +51,7 @@ var interfaceConfig = {
         'fodeviceselection', 'hangup', 'profile', 'info', 'chat', 'recording',
         'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
         'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-        'tileview', 'videobackgroundblur'
+        'tileview', 'videobackgroundblur', 'download'
     ],
 
     SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar' ],

lang/main.json

@@ -570,6 +570,7 @@
             "cc": "Toggle subtitles",
             "chat": "Toggle chat window",
             "document": "Toggle shared document",
+            "download": "Download our apps",
             "feedback": "Leave feedback",
             "fullScreen": "Toggle full screen",
             "hangup": "Leave the call",
@@ -609,6 +610,7 @@
         "closeChat": "Close chat",
         "documentClose": "Close shared document",
         "documentOpen": "Open shared document",
+        "download": "Download our apps",
         "enterFullScreen": "View full screen",
         "enterTileView": "Enter tile view",
         "exitFullScreen": "Exit full screen",

react/features/base/icons/svg/download.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 13.3705V5C11 4.44772 11.4477 4 12 4C12.5523 4 13 4.44772 13 5V13.4667L15.631 10.5433C16.0005 10.1328 16.6328 10.0995 17.0433 10.469C17.4538 10.8384 17.4871 11.4707 17.1176 11.8812L12.1064 17.4492C12.0727 17.4867 12.0139 17.4867 11.9802 17.4492L6.96897 11.8812C6.59951 11.4707 6.63278 10.8384 7.04329 10.469C7.4538 10.0995 8.08609 10.1328 8.45555 10.5433L11 13.3705ZM20 15C20 14.4477 20.4477 14 21 14C21.5523 14 22 14.4477 22 15V21C22 21.5523 21.5523 22 21 22H3C2.96548 22 2.93137 21.9983 2.89776 21.9948C2.3935 21.9436 2 21.5178 2 21V15C2 14.4477 2.44772 14 3 14C3.55228 14 4 14.4477 4 15V20H20V15Z" fill="#A4B8D1"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -24,6 +24,7 @@ export { default as IconDeviceEarpiece } from './phone-talk.svg';
 export { default as IconDeviceHeadphone } from './headset.svg';
 export { default as IconDeviceSpeaker } from './volume.svg';
 export { default as IconDominantSpeaker } from './dominant-speaker.svg';
+export { default as IconDownload } from './download.svg';
 export { default as IconEventNote } from './event_note.svg';
 export { default as IconExitFullScreen } from './exit-full-screen.svg';
 export { default as IconFeedback } from './feedback.svg';

react/features/toolbox/components/DownloadButton.js

@@ -0,0 +1,56 @@
+// @flow
+
+import { createToolbarEvent, sendAnalytics } from '../../analytics';
+import { translate } from '../../base/i18n';
+import { IconDownload } from '../../base/icons';
+import { connect } from '../../base/redux';
+import { openURLInBrowser } from '../../base/util';
+import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox';
+
+
+type Props = AbstractButtonProps & {
+
+    /**
+     * The URL to the applications page.
+     */
+    _downloadAppsUrl: string
+};
+
+/**
+ * Implements an {@link AbstractButton} to open the applications page in a new window.
+ */
+class DownloadButton extends AbstractButton<Props, *> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.download';
+    icon = IconDownload;
+    label = 'toolbar.download';
+
+    /**
+     * Handles clicking / pressing the button, and opens a new window with the user documentation.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        sendAnalytics(createToolbarEvent('download.pressed'));
+        openURLInBrowser(this.props._downloadAppsUrl);
+    }
+}
+
+
+/**
+ * Maps part of the redux state to the component's props.
+ *
+ * @param {Object} state - The redux store/state.
+ * @returns {Object}
+ */
+function _mapStateToProps(state: Object) {
+    const { downloadAppsUrl } = state['features/base/config'].deploymentUrls || {};
+    const visible = typeof downloadAppsUrl === 'string';
+
+    return {
+        _downloadAppsUrl: downloadAppsUrl,
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(DownloadButton));

react/features/toolbox/components/web/Toolbox.js

@@ -69,6 +69,7 @@ import {
     setToolbarHovered
 } from '../../actions';
 import AudioMuteButton from '../AudioMuteButton';
+import DownloadButton from '../DownloadButton';
 import { isToolboxVisible } from '../../functions';
 import HangupButton from '../HangupButton';
 import HelpButton from '../HelpButton';
@@ -975,6 +976,10 @@ class Toolbox extends Component<Props, State> {
                     key = 'shortcuts'
                     onClick = { this._onToolbarOpenKeyboardShortcuts }
                     text = { t('toolbar.shortcuts') } />,
+            this._shouldShowButton('download')
+                && <DownloadButton
+                    key = 'download'
+                    showLabel = { true } />,
             this._shouldShowButton('help')
                 && <HelpButton
                     key = 'help'