fix(overflow-menu) hide "more moderation controls" option if moderator settings tab disabled

This commit is contained in:
Shawn Chin 2022-01-27 08:22:26 +00:00 committed by GitHub
parent c9941dedb9
commit a2425f71dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 16 deletions

View File

@ -27,7 +27,11 @@ import {
getParticipantCount, getParticipantCount,
isEveryoneModerator isEveryoneModerator
} from '../../../base/participants'; } from '../../../base/participants';
import { openSettingsDialog, SETTINGS_TABS } from '../../../settings'; import {
SETTINGS_TABS,
openSettingsDialog,
shouldShowModeratorSettings
} from '../../../settings';
import { MuteEveryonesVideoDialog } from '../../../video-menu/components'; import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
const useStyles = makeStyles(theme => { const useStyles = makeStyles(theme => {
@ -81,6 +85,7 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
const dispatch = useDispatch(); const dispatch = useDispatch();
const isModerationSupported = useSelector(isAvModerationSupported()); const isModerationSupported = useSelector(isAvModerationSupported());
const allModerators = useSelector(isEveryoneModerator); const allModerators = useSelector(isEveryoneModerator);
const isModeratorSettingsTabEnabled = useSelector(shouldShowModeratorSettings);
const participantCount = useSelector(getParticipantCount); const participantCount = useSelector(getParticipantCount);
const isAudioModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.AUDIO)); const isAudioModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.AUDIO));
const isVideoModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.VIDEO)); const isVideoModerationEnabled = useSelector(isAvModerationEnabled(MEDIA_TYPE.VIDEO));
@ -146,14 +151,16 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
</div> </div>
</ContextMenuItemGroup> </ContextMenuItemGroup>
)} )}
<ContextMenuItemGroup {isModeratorSettingsTabEnabled && (
actions = { [ { <ContextMenuItemGroup
accessibilityLabel: t('participantsPane.actions.moreModerationControls'), actions = { [ {
id: 'participants-pane-open-moderation-control-settings', accessibilityLabel: t('participantsPane.actions.moreModerationControls'),
icon: IconHorizontalPoints, id: 'participants-pane-open-moderation-control-settings',
onClick: openModeratorSettings, icon: IconHorizontalPoints,
text: t('participantsPane.actions.moreModerationControls') onClick: openModeratorSettings,
} ] } /> text: t('participantsPane.actions.moreModerationControls')
} ] } />
)}
</ContextMenu> </ContextMenu>
); );
}; };

View File

@ -153,16 +153,11 @@ export function getModeratorTabProps(stateful: Object | Function) {
} = state['features/base/conference']; } = state['features/base/conference'];
const { disableReactionsModeration } = state['features/base/config']; const { disableReactionsModeration } = state['features/base/config'];
const followMeActive = isFollowMeActive(state); const followMeActive = isFollowMeActive(state);
const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || []; const showModeratorSettings = shouldShowModeratorSettings(state);
const showModeratorSettings = Boolean(
conference
&& configuredTabs.includes('moderator')
&& isLocalParticipantModerator(state));
// The settings sections to display. // The settings sections to display.
return { return {
showModeratorSettings, showModeratorSettings: Boolean(conference && showModeratorSettings),
disableReactionsModeration: Boolean(disableReactionsModeration), disableReactionsModeration: Boolean(disableReactionsModeration),
followMeActive: Boolean(conference && followMeActive), followMeActive: Boolean(conference && followMeActive),
followMeEnabled: Boolean(conference && followMeEnabled), followMeEnabled: Boolean(conference && followMeEnabled),
@ -172,6 +167,21 @@ export function getModeratorTabProps(stateful: Object | Function) {
}; };
} }
/**
* Returns true if moderator tab in settings should be visible/accessible.
*
* @param {(Function|Object)} stateful - The (whole) redux state, or redux's
* {@code getState} function to be used to retrieve the state.
* @returns {boolean} True to indicate that moderator tab should be visible, false otherwise.
*/
export function shouldShowModeratorSettings(stateful: Object | Function) {
const state = toState(stateful);
return Boolean(
isSettingEnabled('moderator')
&& isLocalParticipantModerator(state));
}
/** /**
* Returns the properties for the "Profile" tab from settings dialog from Redux * Returns the properties for the "Profile" tab from settings dialog from Redux
* state. * state.