diff --git a/conference.js b/conference.js
index eb69d17b9..b810f464e 100644
--- a/conference.js
+++ b/conference.js
@@ -2165,14 +2165,6 @@ export default {
APP.UI.setSubject(subject);
});
- APP.UI.addListener(UIEvents.USER_KICKED, id => {
- room.kickParticipant(id);
- });
-
- APP.UI.addListener(UIEvents.REMOTE_AUDIO_MUTED, id => {
- room.muteParticipant(id);
- });
-
APP.UI.addListener(UIEvents.AUTH_CLICKED, () => {
AuthHandler.authenticate(room);
});
diff --git a/lang/main.json b/lang/main.json
index 591f2b5e6..1b03a106b 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -2,16 +2,13 @@
"contactlist": "__count__ Member",
"contactlist_plural": "__count__ Members",
"passwordSetRemotely": "set by another member",
- "connectionsettings": "Connection Settings",
"poweredby": "powered by",
- "feedback": "Give us your feedback",
"inviteUrlDefaultMsg": "Your conference is currently being created...",
"me": "me",
"speaker": "Speaker",
"raisedHand": "Would like to speak",
"defaultNickname": "ex. Jane Pink",
"defaultLink": "e.g. __url__",
- "callingName": "__name__",
"audioOnly": {
"audioOnly": "Audio only",
"featureToggleDisabled": "Toggling of __feature__ is disabled while in audio only mode"
diff --git a/react/features/base/participants/middleware.js b/react/features/base/participants/middleware.js
index 5e9972401..3f2194558 100644
--- a/react/features/base/participants/middleware.js
+++ b/react/features/base/participants/middleware.js
@@ -27,6 +27,8 @@ declare var APP: Object;
* @returns {Function}
*/
MiddlewareRegistry.register(store => next => action => {
+ const { conference } = store.getState()['features/base/conference'];
+
switch (action.type) {
case CONFERENCE_JOINED:
store.dispatch(localParticipantIdChanged(action.conference.myUserId()));
@@ -37,29 +39,11 @@ MiddlewareRegistry.register(store => next => action => {
break;
case KICK_PARTICIPANT:
- if (typeof APP !== 'undefined') {
- APP.UI.emitEvent(UIEvents.USER_KICKED, action.id);
- }
+ conference.kickParticipant(action.id);
break;
case MUTE_REMOTE_PARTICIPANT:
- if (typeof APP !== 'undefined') {
- APP.UI.messageHandler.openTwoButtonDialog({
- titleKey: 'dialog.muteParticipantTitle',
- msgString:
- '',
- leftButtonKey: 'dialog.muteParticipantButton',
- dontShowAgain: {
- id: 'dontShowMuteParticipantDialog',
- textKey: 'dialog.doNotShowMessageAgain',
- checked: true,
- buttonValues: [ true ]
- },
- submitFunction: () => {
- APP.UI.emitEvent(UIEvents.REMOTE_AUDIO_MUTED, action.id);
- }
- });
- }
+ conference.muteParticipant(action.id);
break;
// TODO Remove this middleware when the local display name update flow is
diff --git a/react/features/remote-video-menu/components/MuteButton.js b/react/features/remote-video-menu/components/MuteButton.js
index 73f49e844..ac6621564 100644
--- a/react/features/remote-video-menu/components/MuteButton.js
+++ b/react/features/remote-video-menu/components/MuteButton.js
@@ -4,9 +4,10 @@ import { connect } from 'react-redux';
import { sendAnalyticsEvent } from '../../analytics';
import { translate } from '../../base/i18n';
-import { muteRemoteParticipant } from '../../base/participants';
+import { openDialog } from '../../base/dialog';
import RemoteVideoMenuButton from './RemoteVideoMenuButton';
+import MuteRemoteParticipantDialog from './MuteRemoteParticipantDialog';
/**
* Implements a React {@link Component} which displays a button for audio muting
@@ -105,7 +106,7 @@ class MuteButton extends Component {
}
);
- dispatch(muteRemoteParticipant(participantID));
+ dispatch(openDialog(MuteRemoteParticipantDialog, { participantID }));
if (onClick) {
onClick();
diff --git a/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.native.js b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.native.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js
new file mode 100644
index 000000000..05a1f9920
--- /dev/null
+++ b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js
@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { Dialog } from '../../base/dialog';
+import { translate } from '../../base/i18n';
+
+import { sendAnalyticsEvent } from '../../analytics';
+import { muteRemoteParticipant } from '../../base/participants';
+
+/**
+ * A React Component with the contents for a dialog that asks for confirmation
+ * from the user before muting a remote participant.
+ *
+ * @extends Component
+ */
+class MuteRemoteParticipantDialog extends Component {
+ /**
+ * {@code MuteRemoteParticipantDialog} component's property types.
+ *
+ * @static
+ */
+ static propTypes = {
+ /**
+ * Invoked to send a request for muting the participant with the passed
+ * in participantID.
+ */
+ dispatch: PropTypes.func,
+
+ /**
+ * The ID of the participant linked to the onClick callback.
+ */
+ participantID: PropTypes.string,
+
+ /**
+ * Invoked to obtain translated strings.
+ */
+ t: PropTypes.func
+ };
+
+ /**
+ * Initializes a new {@code MuteRemoteParticipantDialog} instance.
+ *
+ * @param {Object} props - The read-only properties with which the new
+ * instance is to be initialized.
+ */
+ constructor(props) {
+ super(props);
+
+ // Bind event handlers so they are only bound once per instance.
+ this._onSubmit = this._onSubmit.bind(this);
+ this._renderContent = this._renderContent.bind(this);
+ }
+
+ /**
+ * Implements React's {@link Component#render()}.
+ *
+ * @inheritdoc
+ * @returns {ReactElement}
+ */
+ render() {
+ return (
+
+ );
+ }
+
+ /**
+ * Handles the submit button action.
+ *
+ * @private
+ * @returns {void}
+ */
+ _onSubmit() {
+ const { dispatch, participantID } = this.props;
+
+ sendAnalyticsEvent(
+ 'remotevideomenu.mute.confirmed',
+ {
+ value: 1,
+ label: participantID
+ }
+ );
+
+ dispatch(muteRemoteParticipant(participantID));
+
+ return true;
+ }
+
+ /**
+ * Renders the content of the dialog.
+ *
+ * @returns {Component} the react component, which is the view of the dialog
+ * content
+ * @private
+ */
+ _renderContent() {
+ const { t } = this.props;
+
+ return (
+
+ { t('dialog.muteParticipantBody') }
+
+ );
+ }
+
+}
+
+export default translate(connect()(MuteRemoteParticipantDialog));
diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js
index 16d267c6e..47e18f200 100644
--- a/service/UI/UIEvents.js
+++ b/service/UI/UIEvents.js
@@ -34,8 +34,6 @@ export default {
* current video playing time.
*/
UPDATE_SHARED_VIDEO: 'UI.update_shared_video',
- USER_KICKED: 'UI.user_kicked',
- REMOTE_AUDIO_MUTED: 'UI.remote_audio_muted',
TOGGLE_FULLSCREEN: 'UI.toogle_fullscreen',
FULLSCREEN_TOGGLED: 'UI.fullscreen_toggled',
AUTH_CLICKED: 'UI.auth_clicked',