mirror of https://github.com/jitsi/jitsi-meet
Gabriel Imre
5 years ago
committed by
Saúl Ibarra Corretgé
parent
d7ece58c6f
commit
24a1a60f04
@ -0,0 +1,123 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
|
||||
import { Dialog } from '../../../base/dialog'; |
||||
import { translate } from '../../../base/i18n'; |
||||
import { connect } from '../../../base/redux'; |
||||
|
||||
import AbstractMuteRemoteParticipantDialog, { |
||||
type Props as AbstractProps |
||||
} from '../AbstractMuteRemoteParticipantDialog'; |
||||
import { muteAllParticipants } from '../../actions'; |
||||
|
||||
declare var APP: Object; |
||||
|
||||
/** |
||||
* The type of the React {@code Component} props of |
||||
* {@link MuteEveryoneDialog}. |
||||
*/ |
||||
type Props = AbstractProps & { |
||||
|
||||
/** |
||||
* The IDs of the remote participants to exclude from being muted. |
||||
*/ |
||||
exclude: Array<string> |
||||
}; |
||||
|
||||
/** |
||||
* Translations needed for dialog rendering. |
||||
*/ |
||||
type Translations = { |
||||
|
||||
/** |
||||
* Content text. |
||||
*/ |
||||
content: string, |
||||
|
||||
/** |
||||
* Title text. |
||||
*/ |
||||
title: string |
||||
} |
||||
|
||||
/** |
||||
* A React Component with the contents for a dialog that asks for confirmation |
||||
* from the user before muting a remote participant. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class MuteEveryoneDialog extends AbstractMuteRemoteParticipantDialog<Props> { |
||||
static defaultProps = { |
||||
exclude: [], |
||||
muteLocal: false |
||||
}; |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { content, title } = this._getTranslations(); |
||||
|
||||
return ( |
||||
<Dialog |
||||
okKey = 'dialog.muteParticipantButton' |
||||
onSubmit = { this._onSubmit } |
||||
titleString = { title } |
||||
width = 'small'> |
||||
<div> |
||||
{ content } |
||||
</div> |
||||
</Dialog> |
||||
); |
||||
} |
||||
|
||||
_onSubmit: () => boolean; |
||||
|
||||
/** |
||||
* Callback to be invoked when the value of this dialog is submitted. |
||||
* |
||||
* @returns {boolean} |
||||
*/ |
||||
_onSubmit() { |
||||
const { |
||||
dispatch, |
||||
exclude |
||||
} = this.props; |
||||
|
||||
dispatch(muteAllParticipants(exclude)); |
||||
|
||||
return true; |
||||
} |
||||
|
||||
/** |
||||
* Method to get translations depending on whether we have an exclusive |
||||
* mute or not. |
||||
* |
||||
* @returns {Translations} |
||||
* @private |
||||
*/ |
||||
_getTranslations(): Translations { |
||||
const { exclude, t } = this.props; |
||||
const { conference } = APP; |
||||
const whom = exclude |
||||
// eslint-disable-next-line no-confusing-arrow
|
||||
.map(id => conference.isLocalId(id) |
||||
? t('dialog.muteEveryoneSelf') |
||||
: conference.getParticipantDisplayName(id)) |
||||
.join(', '); |
||||
|
||||
return whom.length ? { |
||||
content: t('dialog.muteEveryoneElseDialog'), |
||||
title: t('dialog.muteEveryoneElseTitle', { whom }) |
||||
} : { |
||||
content: t('dialog.muteEveryoneDialog'), |
||||
title: t('dialog.muteEveryoneTitle') |
||||
}; |
||||
} |
||||
} |
||||
|
||||
export default translate(connect()(MuteEveryoneDialog)); |
||||
@ -0,0 +1,71 @@ |
||||
// @flow
|
||||
|
||||
import React from 'react'; |
||||
|
||||
import { createToolbarEvent, sendAnalytics } from '../../../analytics'; |
||||
import { openDialog } from '../../../base/dialog'; |
||||
import { translate } from '../../../base/i18n'; |
||||
import { IconMicDisabled } from '../../../base/icons'; |
||||
import { connect } from '../../../base/redux'; |
||||
|
||||
import AbstractMuteButton, { |
||||
_mapStateToProps, |
||||
type Props |
||||
} from '../AbstractMuteButton'; |
||||
import MuteEveryoneDialog from './MuteEveryoneDialog'; |
||||
import RemoteVideoMenuButton from './RemoteVideoMenuButton'; |
||||
|
||||
/** |
||||
* Implements a React {@link Component} which displays a button for audio muting |
||||
* every participant in the conference except the one with the given |
||||
* participantID |
||||
*/ |
||||
class MuteEveryoneElseButton extends AbstractMuteButton { |
||||
/** |
||||
* Instantiates a new {@code MuteEveryoneElseButton}. |
||||
* |
||||
* @inheritdoc |
||||
*/ |
||||
constructor(props: Props) { |
||||
super(props); |
||||
|
||||
this._handleClick = this._handleClick.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const { participantID, t } = this.props; |
||||
|
||||
return ( |
||||
<RemoteVideoMenuButton |
||||
buttonText = { t('videothumbnail.domuteOthers') } |
||||
displayClass = { 'mutelink' } |
||||
icon = { IconMicDisabled } |
||||
id = { `mutelink_${participantID}` } |
||||
// eslint-disable-next-line react/jsx-handler-names
|
||||
onClick = { this._handleClick } /> |
||||
); |
||||
} |
||||
|
||||
_handleClick: () => void; |
||||
|
||||
/** |
||||
* Handles clicking / pressing the button, and opens a confirmation dialog. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_handleClick() { |
||||
const { dispatch, participantID } = this.props; |
||||
|
||||
sendAnalytics(createToolbarEvent('mute.everyoneelse.pressed')); |
||||
dispatch(openDialog(MuteEveryoneDialog, { exclude: [ participantID ] })); |
||||
} |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(MuteEveryoneElseButton)); |
||||
@ -0,0 +1,75 @@ |
||||
// @flow
|
||||
|
||||
import { createToolbarEvent, sendAnalytics } from '../../../analytics'; |
||||
import { openDialog } from '../../../base/dialog'; |
||||
import { translate } from '../../../base/i18n'; |
||||
import { IconMicDisabled } from '../../../base/icons'; |
||||
import { getLocalParticipant, PARTICIPANT_ROLE } from '../../../base/participants'; |
||||
import { connect } from '../../../base/redux'; |
||||
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox'; |
||||
import { MuteEveryoneDialog } from '../../../remote-video-menu'; |
||||
|
||||
type Props = AbstractButtonProps & { |
||||
|
||||
/** |
||||
* The Redux dispatch function. |
||||
*/ |
||||
dispatch: Function, |
||||
|
||||
/* |
||||
** Whether the local participant is a moderator or not. |
||||
*/ |
||||
isModerator: Boolean, |
||||
|
||||
/** |
||||
* The ID of the local participant. |
||||
*/ |
||||
localParticipantId: string |
||||
}; |
||||
|
||||
/** |
||||
* Implements a React {@link Component} which displays a button for audio muting |
||||
* every participant (except the local one) |
||||
*/ |
||||
class MuteEveryoneButton extends AbstractButton<Props, *> { |
||||
accessibilityLabel = 'toolbar.accessibilityLabel.muteEveryone'; |
||||
icon = IconMicDisabled; |
||||
label = 'toolbar.muteEveryone'; |
||||
tooltip = 'toolbar.muteEveryone'; |
||||
|
||||
/** |
||||
* Handles clicking / pressing the button, and opens a confirmation dialog. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_handleClick() { |
||||
const { dispatch, localParticipantId } = this.props; |
||||
|
||||
sendAnalytics(createToolbarEvent('mute.everyone.pressed')); |
||||
dispatch(openDialog(MuteEveryoneDialog, { |
||||
exclude: [ localParticipantId ] |
||||
})); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps part of the redux state to the component's props. |
||||
* |
||||
* @param {Object} state - The redux store/state. |
||||
* @param {Props} ownProps - The component's own props. |
||||
* @returns {Object} |
||||
*/ |
||||
function _mapStateToProps(state: Object, ownProps: Props) { |
||||
const localParticipant = getLocalParticipant(state); |
||||
const isModerator = localParticipant.role === PARTICIPANT_ROLE.MODERATOR; |
||||
const { visible } = ownProps; |
||||
|
||||
return { |
||||
isModerator, |
||||
localParticipantId: localParticipant.id, |
||||
visible: visible && isModerator |
||||
}; |
||||
} |
||||
|
||||
export default translate(connect(_mapStateToProps)(MuteEveryoneButton)); |
||||
Loading…
Reference in new issue