feat(toolbar-buttons): Add event for notify overwritten toolbar buttons

config.js

     //    '__end'
     // ],
 
+    // Toolbar buttons which have their click event exposed through the API on
+    // `toolbarButtonClicked` event instead of executing the normal click routine.
+    // buttonsWithNotifyClick: [
+    //    'camera',
+    //    'chat',
+    //    'closedcaptions',
+    //    'desktop',
+    //    'download',
+    //    'embedmeeting',
+    //    'etherpad',
+    //    'feedback',
+    //    'filmstrip',
+    //    'fullscreen',
+    //    'hangup',
+    //    'help',
+    //    'invite',
+    //    'livestreaming',
+    //    'microphone',
+    //    'mute-everyone',
+    //    'mute-video-everyone',
+    //    'participants-pane',
+    //    'profile',
+    //    'raisehand',
+    //    'recording',
+    //    'security',
+    //    'select-background',
+    //    'settings',
+    //    'shareaudio',
+    //    'sharedvideo',
+    //    'shortcuts',
+    //    'stats',
+    //    'tileview',
+    //    'toggle-camera',
+    //    'videoquality',
+    //    '__end'
+    // ],
+
     // List of pre meeting screens buttons to hide. The values must be one or more of the 5 allowed buttons:
     // 'microphone', 'camera', 'select-background', 'invite', 'settings'
     // hiddenPremeetingButtons: [],

modules/API/API.js

         });
     }
 
+    /**
+     * Notify external application ( if API is enabled) that a toolbar button was clicked.
+     *
+     * @param {string} key - The key of the toolbar button.
+     * @returns {void}
+     */
+    notifyToolbarButtonClicked(key: string) {
+        this._sendEvent({
+            name: 'toolbar-button-clicked',
+            key
+        });
+    }
+
     /**
      * Disposes the allocated resources.
      *

modules/API/external/external_api.js

     'dominant-speaker-changed': 'dominantSpeakerChanged',
     'subject-change': 'subjectChange',
     'suspend-detected': 'suspendDetected',
-    'tile-view-changed': 'tileViewChanged'
+    'tile-view-changed': 'tileViewChanged',
+    'toolbar-button-clicked': 'toolbarButtonClicked'
 };
 
 /**

react/features/base/config/configWhitelist.js

     'apiLogLevels',
     'avgRtpStatsN',
     'backgroundAlpha',
+    'buttonsWithNotifyClick',
 
     /**
      * The display name of the CallKit call representing the conference/meeting

react/features/base/toolbox/components/AbstractAudioMuteButton.js

      * @returns {void}
      */
     _handleClick() {
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         this._setAudioMuted(!this._isAudioMuted());
     }
 

react/features/base/toolbox/components/AbstractButton.js

      */
     disabledStyles: ?Styles,
 
+    /**
+     * External handler for click action.
+     */
+     handleClick?: Function,
+
     /**
      * Whether to show the label or not.
      */

react/features/base/toolbox/components/AbstractVideoMuteButton.js

      * @returns {void}
      */
     _handleClick() {
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         this._setVideoMuted(!this._isVideoMuted());
     }
 

react/features/chat/components/web/ChatButton.js

      * Whether or not the chat feature is currently displayed.
      */
      _chatOpen: boolean,
-
-    /**
-     * External handler for click action.
-     */
-    handleClick: Function
 };
 
 /**
      * @returns {void}
      */
     _handleClick() {
-        this.props.handleClick();
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
     }
 
     /**

react/features/embed-meeting/components/EmbedMeetingButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch } = this.props;
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('embed.meeting'));
         dispatch(openDialog(EmbedMeetingDialog));

react/features/etherpad/components/SharedDocumentButton.js

      * @returns {void}
      */
     _handleClick() {
+        const { _editing, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         sendAnalytics(createToolbarEvent(
             'toggle.etherpad',
             {
-                enable: !this.props._editing
+                enable: !_editing
             }));
-        this.props.dispatch(toggleDocument());
+        dispatch(toggleDocument());
     }
 
     /**

react/features/feedback/components/FeedbackButton.web.js

      * @returns {void}
      */
     _handleClick() {
-        const { _conference, dispatch } = this.props;
+        const { _conference, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('feedback'));
         dispatch(openFeedbackDialog(_conference));

react/features/invite/components/add-people-dialog/web/InviteButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch } = this.props;
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('invite'));
         dispatch(beginAddPeople());

react/features/keyboard-shortcuts/components/KeyboardShortcutsButton.web.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch } = this.props;
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('shortcuts'));
         dispatch(openKeyboardShortcutsDialog());

react/features/local-recording/components/LocalRecordingButton.web.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch } = this.props;
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('local.recording'));
         dispatch(openDialog(LocalRecordingInfoDialog));

react/features/participants-pane/components/ParticipantsPaneButton.js

      * Whether or not the participants pane is open.
      */
     _isOpen: boolean,
-
-    /**
-     * External handler for click action.
-     */
-    handleClick: Function
 };
 
 /**
      * @returns {void}
      */
     _handleClick() {
-        this.props.handleClick();
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
     }
 
     /**

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

      * @returns {void}
      */
     async _handleClick() {
-        const { _isLiveStreamRunning, dispatch } = this.props;
+        const { _isLiveStreamRunning, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         const dialogShown = await dispatch(maybeShowPremiumFeatureDialog(FEATURES.RECORDING));
 

react/features/recording/components/Recording/AbstractRecordButton.js

      * @returns {void}
      */
     async _handleClick() {
-        const { _isRecordingRunning, dispatch } = this.props;
+        const { _isRecordingRunning, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent(
             'recording.button',

react/features/screen-share/components/ShareAudioButton.js

      * @returns {void}
      */
     _handleClick() {
-        this.props.dispatch(startAudioScreenShareFlow());
-        this.props.dispatch(setOverflowMenuVisible(false));
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
+        dispatch(startAudioScreenShareFlow());
+        dispatch(setOverflowMenuVisible(false));
     }
 
     /**

react/features/security/components/security-dialog/SecurityDialogButton.js

      * @returns {void}
      */
     _handleClick() {
-        sendAnalytics(createToolbarEvent('toggle.security', { enable: !this.props._locked }));
-        this.props.dispatch(toggleSecurityDialog());
+        const { _locked, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
+        sendAnalytics(createToolbarEvent('toggle.security', { enable: !_locked }));
+        dispatch(toggleSecurityDialog());
     }
 
     /**

react/features/settings/components/web/SettingsButton.js

     _handleClick() {
         const {
             defaultTab = SETTINGS_TABS.DEVICES,
-            dispatch } = this.props;
+            dispatch,
+            handleClick
+        } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('settings'));
         dispatch(openSettingsDialog(defaultTab));

react/features/shared-video/components/web/SharedVideoButton.js

      * @returns {void}
      */
     _handleClick() {
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         this._doToggleSharedVideo();
     }
 

react/features/speaker-stats/components/SpeakerStatsButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { _conference, dispatch } = this.props;
+        const { _conference, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('speaker.stats'));
         dispatch(openDialog(SpeakerStats, {

react/features/subtitles/components/AbstractClosedCaptionButton.js

      * @returns {void}
      */
     async _handleClick() {
-        const { _requestingSubtitles, dispatch } = this.props;
+        const { _requestingSubtitles, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('transcribing.ccButton',
             {

react/features/toolbox/components/DownloadButton.js

      * @returns {void}
      */
     _handleClick() {
+        const { _downloadAppsUrl, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         sendAnalytics(createToolbarEvent('download.pressed'));
-        openURLInBrowser(this.props._downloadAppsUrl);
+        openURLInBrowser(_downloadAppsUrl);
     }
 }
 

react/features/toolbox/components/HelpButton.js

      * @returns {void}
      */
     _handleClick() {
+        const { _userDocumentationURL, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         sendAnalytics(createToolbarEvent('help.pressed'));
-        openURLInBrowser(this.props._userDocumentationURL);
+        openURLInBrowser(_userDocumentationURL);
     }
 }
 

react/features/toolbox/components/MuteEveryoneButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, localParticipantId } = this.props;
+        const { dispatch, localParticipantId, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('mute.everyone.pressed'));
         dispatch(openDialog(MuteEveryoneDialog, {

react/features/toolbox/components/MuteEveryonesVideoButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, localParticipantId } = this.props;
+        const { dispatch, localParticipantId, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         sendAnalytics(createToolbarEvent('mute.everyone.pressed'));
         dispatch(openDialog(MuteEveryonesVideoDialog, {

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

 
 type Props = {
 
+    /**
+     * External handler for click action.
+     */
+     handleClick: Function,
+
     /**
      * Indicates whether audio permissions have been granted or denied.
      */
         super(props);
 
         this._onEscClick = this._onEscClick.bind(this);
+        this._onClick = this._onClick.bind(this);
     }
 
     _onEscClick: (KeyboardEvent) => void;
         if (event.key === 'Escape' && this.props.isOpen) {
             event.preventDefault();
             event.stopPropagation();
-            this.props.onAudioOptionsClick();
+            this._onClick();
         }
     }
 
+    _onClick: () => void;
+
+    /**
+     * Click handler for the more actions entries.
+     *
+     * @returns {void}
+     */
+    _onClick() {
+        const { handleClick, onAudioOptionsClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
+        onAudioOptionsClick();
+    }
+
     /**
      * Implements React's {@link Component#render}.
      *
      * @inheritdoc
      */
     render() {
-        const { hasPermissions, isDisabled, onAudioOptionsClick, visible, isOpen, t } = this.props;
+        const { handleClick, hasPermissions, isDisabled, visible, isOpen, t } = this.props;
         const settingsDisabled = !hasPermissions
             || isDisabled
             || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
                     iconDisabled = { settingsDisabled }
                     iconId = 'audio-settings-button'
                     iconTooltip = { t('toolbar.audioSettings') }
-                    onIconClick = { onAudioOptionsClick }
+                    onIconClick = { this._onClick }
                     onIconKeyDown = { this._onEscClick }>
-                    <AudioMuteButton />
+                    <AudioMuteButton handleClick = { handleClick } />
                 </ToolboxButtonWithIcon>
             </AudioSettingsPopup>
-        ) : <AudioMuteButton />;
+        ) : <AudioMuteButton handleClick = { handleClick } />;
     }
 }
 

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

    * Whether or not the app is currently in full screen.
    */
    _fullScreen: boolean,
-
-    /**
-     * External handler for click action.
-     */
-    handleClick: Function
 };
 
 /**
      * @returns {void}
      */
     _handleClick() {
-        this.props.handleClick();
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
     }
 
     /**

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

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch, _unclickable } = this.props;
+        const { dispatch, _unclickable, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         if (!_unclickable) {
             sendAnalytics(createToolbarEvent('profile'));

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

      * Whether or not the local participant's hand is raised.
      */
     _raisedHand: boolean,
-
-    /**
-     * External handler for click action.
-     */
-    handleClick: Function
 };
 
 /**
      * @returns {void}
      */
     _handleClick() {
-        this.props.handleClick();
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
     }
 
     /**

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

      * The redux {@code dispatch} function.
      */
      dispatch: Function,
-
-     /**
-      * External handler for click action.
-      */
-      handleClick: Function
 };
 
 /**
      * @returns {void}
      */
     _handleClick() {
-        this.props.handleClick();
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
     }
 
     /**

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

      * @returns {void}
      */
     _handleClick() {
-        this.props.dispatch(toggleCamera());
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
+        dispatch(toggleCamera());
     }
 
     /**

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

      */
     _backgroundType: String,
 
+    /**
+     * Toolbar buttons which have their click exposed through the API.
+     */
+    _buttonsWithNotifyClick: Array<string>,
+
     /**
      * Whether or not the chat feature is currently displayed.
      */
         };
     }
 
+    /**
+     * Overwrites click handlers for buttons in case click is exposed through the iframe API.
+     *
+     * @param {Object} buttons - The list of toolbar buttons.
+     * @returns {void}
+     */
+    _overwriteButtonsClickHandlers(buttons) {
+        if (typeof APP === 'undefined' || !this.props._buttonsWithNotifyClick?.length) {
+            return;
+        }
+
+        Object.values(buttons).forEach((button: any) => {
+            if (this.props._buttonsWithNotifyClick.includes(button.key)) {
+                button.handleClick = () => APP.API.notifyToolbarButtonClicked(button.key);
+            }
+        });
+    }
+
     /**
      * Returns all buttons that need to be rendered.
      *
 
 
         const buttons = this._getAllButtons();
+
+        this._overwriteButtonsClickHandlers(buttons);
         const isHangupVisible = isToolbarButtonEnabled('hangup', _toolbarButtons);
         const { order } = THRESHOLDS.find(({ width }) => _clientWidth > width)
             || THRESHOLDS[THRESHOLDS.length - 1];
     let desktopSharingEnabled = JitsiMeetJS.isDesktopSharingEnabled();
     const {
         callStatsID,
-        enableFeaturesBasedOnToken
+        disableProfile,
+        enableFeaturesBasedOnToken,
+        buttonsWithNotifyClick
     } = state['features/base/config'];
     const {
         fullScreen,
 
     return {
         _backgroundType: state['features/virtual-background'].backgroundType,
+        _buttonsWithNotifyClick: buttonsWithNotifyClick,
         _chatOpen: state['features/chat'].isOpen,
         _clientWidth: clientWidth,
         _conference: conference,
         _dialog: Boolean(state['features/base/dialog'].component),
         _feedbackConfigured: Boolean(callStatsID),
         _fullScreen: fullScreen,
-        _isProfileDisabled: Boolean(state['features/base/config'].disableProfile),
+        _isProfileDisabled: Boolean(disableProfile),
         _isMobile: isMobileBrowser(),
         _isVpaasMeeting: isVpaasMeeting(state),
         _localParticipantID: localParticipant?.id,

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

 
 type Props = {
 
+    /**
+     * External handler for click action.
+     */
+    handleClick: Function,
+
     /**
      * Click handler for the small icon. Opens video options.
      */
  */
 class VideoSettingsButton extends Component<Props> {
     /**
-     * Initializes a new {@code AudioSettingsButton} instance.
+     * Initializes a new {@code VideoSettingsButton} instance.
      *
      * @inheritdoc
      */
         super(props);
 
         this._onEscClick = this._onEscClick.bind(this);
+        this._onClick = this._onClick.bind(this);
     }
 
     /**
         if (event.key === 'Escape' && this.props.isOpen) {
             event.preventDefault();
             event.stopPropagation();
-            this.props.onVideoOptionsClick();
+            this._onClick();
         }
     }
 
+    _onClick: () => void;
+
+    /**
+     * Click handler for the more actions entries.
+     *
+     * @returns {void}
+     */
+    _onClick() {
+        const { handleClick, onVideoOptionsClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
+        onVideoOptionsClick();
+    }
+
     /**
      * Implements React's {@link Component#render}.
      *
      * @inheritdoc
      */
     render() {
-        const { onVideoOptionsClick, t, visible, isOpen } = this.props;
+        const { handleClick, t, visible, isOpen } = this.props;
 
         return visible ? (
             <VideoSettingsPopup>
                     iconDisabled = { this._isIconDisabled() }
                     iconId = 'video-settings-button'
                     iconTooltip = { t('toolbar.videoSettings') }
-                    onIconClick = { onVideoOptionsClick }
+                    onIconClick = { this._onClick }
                     onIconKeyDown = { this._onEscClick }>
-                    <VideoMuteButton />
+                    <VideoMuteButton handleClick = { handleClick } />
                 </ToolboxButtonWithIcon>
             </VideoSettingsPopup>
-        ) : <VideoMuteButton />;
+        ) : <VideoMuteButton handleClick = { handleClick } />;
     }
 }
 

react/features/video-layout/components/TileViewButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { _tileViewEnabled, dispatch } = this.props;
+        const { _tileViewEnabled, dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
+
         const value = !_tileViewEnabled;
 
         sendAnalytics(createToolbarEvent(

react/features/video-quality/components/VideoQualityButton.web.js

      */
     _videoQuality: number,
 
-    /**
-     * Callback to invoke when {@link VideoQualityButton} is clicked.
-     */
-     handleClick: Function,
-
     /**
      * Invoked to obtain translated strings.
      */
      * @returns {void}
      */
     _handleClick() {
-        this.props.handleClick();
+        const { handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
     }
 }
 

react/features/virtual-background/components/VideoBackgroundButton.js

      * @returns {void}
      */
     _handleClick() {
-        const { dispatch } = this.props;
+        const { dispatch, handleClick } = this.props;
+
+        if (handleClick) {
+            handleClick();
+
+            return;
+        }
 
         dispatch(openDialog(VirtualBackgroundDialog));
     }