Reactify mute remote participant (#2145)

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

* fix(translation): Removes unused strings

* [squash] Addressing comments
This commit is contained in:
yanas 2017-11-09 11:23:17 -06:00 committed by virtuacoplenny
parent c4239ad7f9
commit db71de97af
7 changed files with 121 additions and 35 deletions

View File

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

View File

@ -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"

View File

@ -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:
'<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);
}
});
}
conference.muteParticipant(action.id);
break;
// TODO Remove this middleware when the local display name update flow is

View File

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

View File

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

View File

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