Reactify mute remote participant (#2145)

* fix(remote-mute): Moves remote participant mute to react

* fix(translation): Removes unused strings

* [squash] Addressing comments

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);
         });

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"

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') {
+        conference.kickParticipant(action.id);
-            APP.UI.emitEvent(UIEvents.USER_KICKED, action.id);
-        }
         break;
 
     case MUTE_REMOTE_PARTICIPANT:
-        if (typeof APP !== 'undefined') {
+        conference.muteParticipant(action.id);
-            APP.UI.messageHandler.openTwoButtonDialog({
-                titleKey: 'dialog.muteParticipantTitle',
-                msgString:
-                    '<div data-i18n="dialog.muteParticipantBody"></div>',
-                leftButtonKey: 'dialog.muteParticipantButton',
-                dontShowAgain: {
-                    id: 'dontShowMuteParticipantDialog',
-                    textKey: 'dialog.doNotShowMessageAgain',
-                    checked: true,
-                    buttonValues: [ true ]
-                },
-                submitFunction: () => {
-                    APP.UI.emitEvent(UIEvents.REMOTE_AUDIO_MUTED, action.id);
-                }
-            });
-        }
         break;
 
     // TODO Remove this middleware when the local display name update flow is

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();

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 (
+            <Dialog
+                okTitleKey = 'dialog.muteParticipantButton'
+                onSubmit = { this._onSubmit }
+                titleKey = 'dialog.muteParticipantTitle'
+                width = 'small'>
+                { this._renderContent() }
+            </Dialog>
+        );
+    }
+
+    /**
+     * 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 (
+            <div>
+                { t('dialog.muteParticipantBody') }
+            </div>
+        );
+    }
+
+}
+
+export default translate(connect()(MuteRemoteParticipantDialog));

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',