You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AbstractMuteEveryoneDialog.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. // @flow
  2. import React from 'react';
  3. import { requestDisableAudioModeration, requestEnableAudioModeration } from '../../av-moderation/actions';
  4. import { isEnabledFromState } from '../../av-moderation/functions';
  5. import { Dialog } from '../../base/dialog';
  6. import { MEDIA_TYPE } from '../../base/media';
  7. import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants';
  8. import { muteAllParticipants } from '../actions';
  9. import AbstractMuteRemoteParticipantDialog, {
  10. type Props as AbstractProps
  11. } from './AbstractMuteRemoteParticipantDialog';
  12. /**
  13. * The type of the React {@code Component} props of
  14. * {@link AbstractMuteEveryoneDialog}.
  15. */
  16. export type Props = AbstractProps & {
  17. content: string,
  18. exclude: Array<string>,
  19. title: string,
  20. showAdvancedModerationToggle: boolean,
  21. isAudioModerationEnabled: boolean
  22. };
  23. type State = {
  24. audioModerationEnabled: boolean,
  25. content: string
  26. };
  27. /**
  28. *
  29. * An abstract Component with the contents for a dialog that asks for confirmation
  30. * from the user before muting all remote participants.
  31. *
  32. * @extends AbstractMuteRemoteParticipantDialog
  33. */
  34. export default class AbstractMuteEveryoneDialog<P: Props> extends AbstractMuteRemoteParticipantDialog<P, State> {
  35. static defaultProps = {
  36. exclude: [],
  37. muteLocal: false
  38. };
  39. /**
  40. * Initializes a new {@code AbstractMuteRemoteParticipantDialog} instance.
  41. *
  42. * @param {Object} props - The read-only properties with which the new
  43. * instance is to be initialized.
  44. */
  45. constructor(props: P) {
  46. super(props);
  47. this.state = {
  48. audioModerationEnabled: props.isAudioModerationEnabled,
  49. content: props.content || props.t(props.isAudioModerationEnabled
  50. ? 'dialog.muteEveryoneDialogModerationOn' : 'dialog.muteEveryoneDialog'
  51. )
  52. };
  53. // Bind event handlers so they are only bound once per instance.
  54. this._onSubmit = this._onSubmit.bind(this);
  55. this._onToggleModeration = this._onToggleModeration.bind(this);
  56. }
  57. /**
  58. * Implements React's {@link Component#render()}.
  59. *
  60. * @inheritdoc
  61. * @returns {ReactElement}
  62. */
  63. render() {
  64. const { content, title } = this.props;
  65. return (
  66. <Dialog
  67. okKey = 'dialog.muteParticipantButton'
  68. onSubmit = { this._onSubmit }
  69. titleString = { title }
  70. width = 'small'>
  71. <div>
  72. { content }
  73. </div>
  74. </Dialog>
  75. );
  76. }
  77. _onSubmit: () => boolean;
  78. _onToggleModeration: () => void;
  79. /**
  80. * Callback to be invoked when the value of this dialog is submitted.
  81. *
  82. * @returns {boolean}
  83. */
  84. _onSubmit() {
  85. const {
  86. dispatch,
  87. exclude
  88. } = this.props;
  89. dispatch(muteAllParticipants(exclude, MEDIA_TYPE.AUDIO));
  90. if (this.state.audioModerationEnabled) {
  91. dispatch(requestEnableAudioModeration());
  92. } else {
  93. dispatch(requestDisableAudioModeration());
  94. }
  95. return true;
  96. }
  97. }
  98. /**
  99. * Maps (parts of) the Redux state to the associated {@code AbstractMuteEveryoneDialog}'s props.
  100. *
  101. * @param {Object} state - The redux state.
  102. * @param {Object} ownProps - The properties explicitly passed to the component.
  103. * @returns {Props}
  104. */
  105. export function abstractMapStateToProps(state: Object, ownProps: Props) {
  106. const { exclude = [], t } = ownProps;
  107. const whom = exclude
  108. // eslint-disable-next-line no-confusing-arrow
  109. .map(id => id === getLocalParticipant(state).id
  110. ? t('dialog.muteEveryoneSelf')
  111. : getParticipantDisplayName(state, id))
  112. .join(', ');
  113. return whom.length ? {
  114. content: t('dialog.muteEveryoneElseDialog'),
  115. title: t('dialog.muteEveryoneElseTitle', { whom })
  116. } : {
  117. title: t('dialog.muteEveryoneTitle'),
  118. isAudioModerationEnabled: isEnabledFromState(MEDIA_TYPE.AUDIO, state)
  119. };
  120. }