fix(participants-pane): Use selector for displaying chat context item

react/features/base/config/functions.web.js

@@ -44,3 +44,14 @@ export function getToolbarButtons(state: Object): Array<string> {
 
     return Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
 }
+
+/**
+ * Curried selector to check if the specified button is enabled.
+ *
+ * @param {string} buttonName - The name of the button.
+ * {@link interfaceConfig}.
+ * @returns {Function} - Selector that returns a boolean.
+ */
+export const isToolbarButtonEnabled = (buttonName: string) =>
+    (state: Object): boolean =>
+        getToolbarButtons(state).includes(buttonName);

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

@@ -4,6 +4,7 @@ import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { isToolbarButtonEnabled } from '../../base/config/functions.web';
 import { openDialog } from '../../base/dialog';
 import {
     IconCloseCircle,
@@ -65,6 +66,7 @@ export const MeetingParticipantContextMenu = ({
     const dispatch = useDispatch();
     const containerRef = useRef(null);
     const isLocalModerator = useSelector(isLocalParticipantModerator);
+    const isChatButtonEnabled = useSelector(isToolbarButtonEnabled('chat'));
     const isParticipantVideoMuted = useSelector(getIsParticipantVideoMuted(participant));
     const [ isHidden, setIsHidden ] = useState(true);
     const { t } = useTranslation();
@@ -156,10 +158,12 @@ export const MeetingParticipantContextMenu = ({
                         <span>{t('videothumbnail.kick')}</span>
                     </ContextMenuItem>
                 )}
-                <ContextMenuItem onClick = { sendPrivateMessage }>
-                    <ContextMenuIcon src = { IconMessage } />
-                    <span>{t('toolbar.accessibilityLabel.privateMessage')}</span>
-                </ContextMenuItem>
+                {isChatButtonEnabled && (
+                    <ContextMenuItem onClick = { sendPrivateMessage }>
+                        <ContextMenuIcon src = { IconMessage } />
+                        <span>{t('toolbar.accessibilityLabel.privateMessage')}</span>
+                    </ContextMenuItem>
+                )}
             </ContextMenuItemGroup>
         </ContextMenu>
     );

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

@@ -9,6 +9,7 @@ import {
     sendAnalytics
 } from '../../../analytics';
 import { getToolbarButtons } from '../../../base/config';
+import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
 import { openDialog, toggleDialog } from '../../../base/dialog';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
@@ -212,6 +213,11 @@ type Props = {
      */
     _visibleButtons: Array<string>,
 
+    /**
+     * Handler to check if a button is enabled.
+     */
+     _shouldShowButton: Function,
+
     /**
      * Invoked to active other features of the app.
      */
@@ -276,37 +282,37 @@ class Toolbox extends Component<Props> {
      */
     componentDidMount() {
         const KEYBOARD_SHORTCUTS = [
-            this._shouldShowButton('videoquality') && {
+            this.props._shouldShowButton('videoquality') && {
                 character: 'A',
                 exec: this._onShortcutToggleVideoQuality,
                 helpDescription: 'toolbar.callQuality'
             },
-            this._shouldShowButton('chat') && {
+            this.props._shouldShowButton('chat') && {
                 character: 'C',
                 exec: this._onShortcutToggleChat,
                 helpDescription: 'keyboardShortcuts.toggleChat'
             },
-            this._shouldShowButton('desktop') && {
+            this.props._shouldShowButton('desktop') && {
                 character: 'D',
                 exec: this._onShortcutToggleScreenshare,
                 helpDescription: 'keyboardShortcuts.toggleScreensharing'
             },
-            this._shouldShowButton('participants-pane') && {
+            this.props._shouldShowButton('participants-pane') && {
                 character: 'P',
                 exec: this._onShortcutToggleParticipantsPane,
                 helpDescription: 'keyboardShortcuts.toggleParticipantsPane'
             },
-            this._shouldShowButton('raisehand') && {
+            this.props._shouldShowButton('raisehand') && {
                 character: 'R',
                 exec: this._onShortcutToggleRaiseHand,
                 helpDescription: 'keyboardShortcuts.raiseHand'
             },
-            this._shouldShowButton('fullscreen') && {
+            this.props._shouldShowButton('fullscreen') && {
                 character: 'S',
                 exec: this._onShortcutToggleFullScreen,
                 helpDescription: 'keyboardShortcuts.fullScreen'
             },
-            this._shouldShowButton('tileview') && {
+            this.props._shouldShowButton('tileview') && {
                 character: 'W',
                 exec: this._onShortcutToggleTileView,
                 helpDescription: 'toolbar.tileViewToggle'
@@ -943,7 +949,7 @@ class Toolbox extends Component<Props> {
         return (
             (_desktopSharingEnabled
             || _desktopSharingDisabledTooltipKey)
-            && this._shouldShowButton('desktop')
+            && this.props._shouldShowButton('desktop')
         );
     }
 
@@ -955,7 +961,7 @@ class Toolbox extends Component<Props> {
     _isEmbedMeetingVisible() {
         return !this.props._isVpaasMeeting
             && !this.props._isMobile
-            && this._shouldShowButton('embedmeeting');
+            && this.props._shouldShowButton('embedmeeting');
     }
 
     /**
@@ -964,7 +970,7 @@ class Toolbox extends Component<Props> {
      * @returns {boolean}
      */
     _isProfileVisible() {
-        return !this.props._isProfileDisabled && this._shouldShowButton('profile');
+        return !this.props._isProfileDisabled && this.props._shouldShowButton('profile');
     }
 
     /**
@@ -987,15 +993,15 @@ class Toolbox extends Component<Props> {
         const group1 = [
             ...additionalButtons,
 
-            this._shouldShowButton('toggle-camera')
+            this.props._shouldShowButton('toggle-camera')
                 && <ToggleCameraButton
                     key = 'toggle-camera'
                     showLabel = { true } />,
-            this._shouldShowButton('videoquality')
+            this.props._shouldShowButton('videoquality')
                 && <OverflowMenuVideoQualityItem
                     key = 'videoquality'
                     onClick = { this._onToolbarOpenVideoQuality } />,
-            this._shouldShowButton('fullscreen')
+            this.props._shouldShowButton('fullscreen')
                 && !_isMobile
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
@@ -1003,45 +1009,45 @@ class Toolbox extends Component<Props> {
                     key = 'fullscreen'
                     onClick = { this._onToolbarToggleFullScreen }
                     text = { _fullScreen ? t('toolbar.exitFullScreen') : t('toolbar.enterFullScreen') } />,
-            (this._shouldShowButton('security') || this._shouldShowButton('info'))
+            (this.props._shouldShowButton('security') || this.props._shouldShowButton('info'))
             && <SecurityDialogButton
                 key = 'security'
                 showLabel = { true } />,
-            this._shouldShowButton('closedcaptions')
+            this.props._shouldShowButton('closedcaptions')
             && <ClosedCaptionButton
                 key = 'closed-captions'
                 showLabel = { true } />,
-            this._shouldShowButton('recording')
+            this.props._shouldShowButton('recording')
                 && <RecordButton
                     key = 'record'
                     showLabel = { true } />,
-            this._shouldShowButton('localrecording')
+            this.props._shouldShowButton('localrecording')
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.localRecording') }
                     icon = { IconRec }
                     key = 'localrecording'
                     onClick = { this._onToolbarOpenLocalRecordingInfoDialog }
                     text = { t('localRecording.dialogTitle') } />,
-            this._shouldShowButton('mute-everyone')
+            this.props._shouldShowButton('mute-everyone')
                 && <MuteEveryoneButton
                     key = 'mute-everyone'
                     showLabel = { true } />,
-            this._shouldShowButton('mute-video-everyone')
+            this.props._shouldShowButton('mute-video-everyone')
                 && <MuteEveryonesVideoButton
                     key = 'mute-everyones-video'
                     showLabel = { true } />,
-            this._shouldShowButton('livestreaming')
+            this.props._shouldShowButton('livestreaming')
                 && <LiveStreamButton
                     key = 'livestreaming'
                     showLabel = { true } />
         ];
 
         const group2 = [
-            this._shouldShowButton('sharedvideo')
+            this.props._shouldShowButton('sharedvideo')
                 && <SharedVideoButton
                     key = 'sharedvideo'
                     showLabel = { true } />,
-            this._shouldShowButton('shareaudio')
+            this.props._shouldShowButton('shareaudio')
                 && _desktopSharingEnabled
                 && isScreenAudioSupported()
                 && <OverflowMenuItem
@@ -1050,16 +1056,16 @@ class Toolbox extends Component<Props> {
                     key = 'shareaudio'
                     onClick = { this._onToolbarToggleShareAudio }
                     text = { t('toolbar.shareaudio') } />,
-            this._shouldShowButton('etherpad')
+            this.props._shouldShowButton('etherpad')
                 && <SharedDocumentButton
                     key = 'etherpad'
                     showLabel = { true } />,
-            (this._shouldShowButton('select-background') || this._shouldShowButton('videobackgroundblur'))
+            (this.props._shouldShowButton('select-background') || this.props._shouldShowButton('videobackgroundblur'))
                 && <VideoBackgroundButton
                     key = { 'select-background' }
                     showLabel = { true }
                     visible = { !_screensharing && checkBlurSupport() } />,
-            this._shouldShowButton('stats')
+            this.props._shouldShowButton('stats')
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.speakerStats') }
                     icon = { IconPresentation }
@@ -1091,11 +1097,11 @@ class Toolbox extends Component<Props> {
                 className = 'overflow-menu-hr'
                 key = 'hr3' />,
 
-            this._shouldShowButton('settings')
+            this.props._shouldShowButton('settings')
                 && <SettingsButton
                     key = 'settings'
                     showLabel = { true } />,
-            this._shouldShowButton('shortcuts')
+            this.props._shouldShowButton('shortcuts')
                 && !_isMobile
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
@@ -1110,7 +1116,7 @@ class Toolbox extends Component<Props> {
                     key = 'embed'
                     onClick = { this._onToolbarOpenEmbedMeeting }
                     text = { t('toolbar.embedMeeting') } />,
-            this._shouldShowButton('feedback')
+            this.props._shouldShowButton('feedback')
                 && _feedbackConfigured
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.feedback') }
@@ -1118,11 +1124,11 @@ class Toolbox extends Component<Props> {
                     key = 'feedback'
                     onClick = { this._onToolbarOpenFeedback }
                     text = { t('toolbar.feedback') } />,
-            this._shouldShowButton('download')
+            this.props._shouldShowButton('download')
                 && <DownloadButton
                     key = 'download'
                     showLabel = { true } />,
-            this._shouldShowButton('help')
+            this.props._shouldShowButton('help')
                 && <HelpButton
                     key = 'help'
                     showLabel = { true } />
@@ -1169,7 +1175,7 @@ class Toolbox extends Component<Props> {
                     text = { t(`toolbar.${_screensharing ? 'stopScreenSharing' : 'startScreenSharing'}`) } />);
         }
 
-        if (this._shouldShowButton('chat')) {
+        if (this.props._shouldShowButton('chat')) {
             buttons.has('chat')
                 ? mainMenuAdditionalButtons.push(<div
                     className = 'toolbar-button-with-badge'
@@ -1190,7 +1196,7 @@ class Toolbox extends Component<Props> {
                     text = { t(`toolbar.${_chatOpen ? 'closeChat' : 'openChat'}`) } />);
         }
 
-        if (this._shouldShowButton('raisehand')) {
+        if (this.props._shouldShowButton('raisehand')) {
             buttons.has('raisehand')
                 ? mainMenuAdditionalButtons.push(<ToolbarButton
                     accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
@@ -1207,7 +1213,7 @@ class Toolbox extends Component<Props> {
                     text = { t(`toolbar.${_raisedHand ? 'lowerYourHand' : 'raiseYourHand'}`) } />);
         }
 
-        if (this._shouldShowButton('participants-pane') || this._shouldShowButton('invite')) {
+        if (this.props._shouldShowButton('participants-pane') || this.props._shouldShowButton('invite')) {
             buttons.has('participants-pane')
                 ? mainMenuAdditionalButtons.push(
                     <ToolbarButton
@@ -1226,7 +1232,7 @@ class Toolbox extends Component<Props> {
                 );
         }
 
-        if (this._shouldShowButton('tileview')) {
+        if (this.props._shouldShowButton('tileview')) {
             buttons.has('tileview')
                 ? mainMenuAdditionalButtons.push(
                     <TileViewButton
@@ -1250,7 +1256,7 @@ class Toolbox extends Component<Props> {
      * @returns {ReactElement}
      */
     _renderAudioButton() {
-        return this._shouldShowButton('microphone')
+        return this.props._shouldShowButton('microphone')
             ? <AudioSettingsButton
                 key = 'asb'
                 visible = { true } />
@@ -1263,7 +1269,7 @@ class Toolbox extends Component<Props> {
      * @returns {ReactElement}
      */
     _renderVideoButton() {
-        return this._shouldShowButton('camera')
+        return this.props._shouldShowButton('camera')
             ? <VideoSettingsButton
                 key = 'vsb'
                 visible = { true } />
@@ -1317,26 +1323,12 @@ class Toolbox extends Component<Props> {
                         </OverflowMenuButton>}
                         <HangupButton
                             customClass = 'hangup-button'
-                            visible = { this._shouldShowButton('hangup') } />
+                            visible = { this.props._shouldShowButton('hangup') } />
                     </div>
                 </div>
             </div>
         );
     }
-
-    _shouldShowButton: (string) => boolean;
-
-    /**
-     * Returns if a button name has been explicitly configured to be displayed.
-     *
-     * @param {string} buttonName - The name of the button, as expected in
-     * {@link interfaceConfig}.
-     * @private
-     * @returns {boolean} True if the button should be displayed.
-     */
-    _shouldShowButton(buttonName) {
-        return this.props._visibleButtons.includes(buttonName);
-    }
 }
 
 /**
@@ -1394,6 +1386,7 @@ function _mapStateToProps(state) {
         _participantsPaneOpen: getParticipantsPaneOpen(state),
         _raisedHand: localParticipant.raisedHand,
         _screensharing: (localVideo && localVideo.videoType === 'desktop') || isScreenAudioShared(state),
+        _shouldShowButton: buttonName => isToolbarButtonEnabled(buttonName)(state),
         _visible: isToolboxVisible(state),
         _visibleButtons: getToolbarButtons(state)
     };