Skip to content

Commit

Permalink
fix(participants-pane): Use selector for displaying chat context item
Browse files Browse the repository at this point in the history
  • Loading branch information
@vp8x8
Gabriel Imre authored and vp8x8 committed May 14, 2021
1 parent cff4ed8 commit db5d6a5
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 55 deletions.
11 changes: 11 additions & 0 deletions react/features/base/config/functions.web.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
12 changes: 8 additions & 4 deletions react/features/participants-pane/components/MeetingParticipantContextMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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>
);
Expand Down
95 changes: 44 additions & 51 deletions react/features/toolbox/components/web/Toolbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -943,7 +949,7 @@ class Toolbox extends Component<Props> {
return (
(_desktopSharingEnabled
|| _desktopSharingDisabledTooltipKey)
&& this._shouldShowButton('desktop')
&& this.props._shouldShowButton('desktop')
);
}

Expand All @@ -955,7 +961,7 @@ class Toolbox extends Component<Props> {
_isEmbedMeetingVisible() {
return !this.props._isVpaasMeeting
&& !this.props._isMobile
&& this._shouldShowButton('embedmeeting');
&& this.props._shouldShowButton('embedmeeting');
}

/**
Expand All @@ -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');
}

/**
Expand All @@ -987,61 +993,61 @@ 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') }
icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
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
Expand All @@ -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 }
Expand Down Expand Up @@ -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') }
Expand All @@ -1110,19 +1116,19 @@ 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') }
icon = { IconFeedback }
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 } />
Expand Down Expand Up @@ -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'
Expand All @@ -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') }
Expand All @@ -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
Expand All @@ -1226,7 +1232,7 @@ class Toolbox extends Component<Props> {
);
}

if (this._shouldShowButton('tileview')) {
if (this.props._shouldShowButton('tileview')) {
buttons.has('tileview')
? mainMenuAdditionalButtons.push(
<TileViewButton
Expand All @@ -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 } />
Expand All @@ -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 } />
Expand Down Expand Up @@ -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);
}
}

/**
Expand Down Expand Up @@ -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)
};
Expand Down

0 comments on commit db5d6a5

Please sign in to comment.