haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Gabriel Imre 2021-05-13 09:56:53 +03:00 committed by vp8x8
parent cff4ed83f6
commit db5d6a56b8
3 changed files with 63 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
react/features/base/config/functions.web.js
View File

@ -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
react/features/participants-pane/components/MeetingParticipantContextMenu.js
View File

@ -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>
);

95
react/features/toolbox/components/web/Toolbox.js
View File

@ -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)
};