fix(video-menu): Hide "Mute all" option when all participants are moderators (#15461)

* Fixed exception for visibility state of mute all button

* Updated changes as per review: shifted conditional to the toggle

* chore: fix eslint warnings and errors

---------

Co-authored-by: Bhavik Arora <arorabhavik1001>
This commit is contained in:
Bhavik Arora
2025-01-09 21:51:28 +05:30
committed by GitHub
parent a8d123ede4
commit b71b4c8c45
2 changed files with 24 additions and 18 deletions

View File

@@ -2,7 +2,7 @@ import { IReduxState } from '../../app/types';
import { requestDisableAudioModeration, requestEnableAudioModeration } from '../../av-moderation/actions';
import { isEnabledFromState, isSupported } from '../../av-moderation/functions';
import { MEDIA_TYPE } from '../../base/media/constants';
import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants/functions';
import { getLocalParticipant, getParticipantDisplayName, isEveryoneModerator } from '../../base/participants/functions';
import { muteAllParticipants } from '../actions';
import AbstractMuteRemoteParticipantDialog, {
@@ -17,6 +17,7 @@ export interface IProps extends AbstractProps {
content?: string;
exclude: Array<string>;
isAudioModerationEnabled?: boolean;
isEveryoneModerator: boolean;
isModerationSupported?: boolean;
showAdvancedModerationToggle: boolean;
title: string;
@@ -119,10 +120,12 @@ export function abstractMapStateToProps(state: IReduxState, ownProps: IProps) {
return whom.length ? {
content: t('dialog.muteEveryoneElseDialog'),
title: t('dialog.muteEveryoneElseTitle', { whom })
title: t('dialog.muteEveryoneElseTitle', { whom }),
isEveryoneModerator: isEveryoneModerator(state)
} : {
title: t('dialog.muteEveryoneTitle'),
isAudioModerationEnabled: isEnabledFromState(MEDIA_TYPE.AUDIO, state),
isModerationSupported: isSupported()(state)
isModerationSupported: isSupported()(state),
isEveryoneModerator: isEveryoneModerator(state)
};
}

View File

@@ -28,21 +28,24 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<IProps> {
onSubmit = { this._onSubmit }
title = { this.props.title }>
<div className = 'mute-dialog'>
{ this.state.content }
{ this.props.isModerationSupported && this.props.exclude.length === 0 && (
<>
<div className = 'separator-line' />
<div className = 'control-row'>
<label htmlFor = 'moderation-switch'>
{this.props.t('dialog.moderationAudioLabel')}
</label>
<Switch
checked = { !this.state.audioModerationEnabled }
id = 'moderation-switch'
onChange = { this._onToggleModeration } />
</div>
</>
)}
{this.state.content}
{
this.props.isModerationSupported
&& this.props.exclude.length === 0
&& !this.props.isEveryoneModerator && (
<>
<div className = 'separator-line' />
<div className = 'control-row'>
<label htmlFor = 'moderation-switch'>
{this.props.t('dialog.moderationAudioLabel')}
</label>
<Switch
checked = { !this.state.audioModerationEnabled }
id = 'moderation-switch'
onChange = { this._onToggleModeration } />
</div>
</>
)}
</div>
</Dialog>
);