Notify for kick and mute (#4328)

* Updates kick showing who kicked us.

* Notify participants that someone was kicked.

* Shows notification to user who is remotely muted.

* Updates the notification type.

* Muted by notification for mobile.

* Moves code to react and adds the kick notifications to mobile.

* Updates lib-jitsi-meet.

conference.js

@@ -86,6 +86,8 @@ import {
     localParticipantConnectionStatusChanged,
     localParticipantRoleChanged,
     participantConnectionStatusChanged,
+    participantKicked,
+    participantMutedUs,
     participantPresenceChanged,
     participantRoleChanged,
     participantUpdated
@@ -103,6 +105,7 @@ import {
     getLocationContextRoot,
     getJitsiMeetGlobalNS
 } from './react/features/base/util';
+import { notifyKickedOut } from './react/features/conference';
 import { addMessage } from './react/features/chat';
 import { showDesktopPicker } from './react/features/desktop-picker';
 import { appendSuffix } from './react/features/display-name';
@@ -1858,6 +1861,12 @@ export default {
             APP.UI.setAudioLevel(id, newLvl);
         });
 
+        room.on(JitsiConferenceEvents.TRACK_MUTE_CHANGED, (_, participantThatMutedUs) => {
+            if (participantThatMutedUs) {
+                APP.store.dispatch(participantMutedUs(participantThatMutedUs));
+            }
+        });
+
         room.on(JitsiConferenceEvents.TALK_WHILE_MUTED, () => {
             APP.UI.showToolbar(6000);
         });
@@ -1958,13 +1967,17 @@ export default {
                 }
             });
 
-        room.on(JitsiConferenceEvents.KICKED, () => {
+        room.on(JitsiConferenceEvents.KICKED, participant => {
             APP.UI.hideStats();
-            APP.UI.notifyKicked();
+            APP.store.dispatch(notifyKickedOut(participant));
 
             // FIXME close
         });
 
+        room.on(JitsiConferenceEvents.PARTICIPANT_KICKED, (kicker, kicked) => {
+            APP.store.dispatch(participantKicked(kicker, kicked));
+        });
+
         room.on(JitsiConferenceEvents.SUSPEND_DETECTED, () => {
             APP.store.dispatch(suspendDetected());
 

lang/main.json

@@ -197,11 +197,11 @@
         "internalError": "Oops! Something went wrong. The following error occurred: __error__",
         "internalErrorTitle": "Internal error",
         "joinAgain": "Join again",
-        "kickMessage": "Ouch! You have been kicked out of the meet!",
+        "kickMessage": "You can contact __participantDisplayName__ for more details.",
         "kickParticipantButton": "Kick",
         "kickParticipantDialog": "Are you sure you want to kick this participant?",
         "kickParticipantTitle": "Kick this member?",
-        "kickTitle": "Kicked from meeting",
+        "kickTitle": "Ouch! __participantDisplayName__ kicked you out of the meeting",
         "liveStreaming": "Live Streaming",
         "liveStreamingDisabledForGuestTooltip": "Guests can't start live streaming.",
         "liveStreamingDisabledTooltip": "Start live stream disabled.",
@@ -472,10 +472,13 @@
         "focus": "Conference focus",
         "focusFail": "__component__ not available - retry in __ms__ sec",
         "grantedTo": "Moderator rights granted to __to__!",
+        "kickParticipant": "__kicked__ was kicked by __kicker__",
         "me": "Me",
         "moderator": "Moderator rights granted!",
         "muted": "You have started the conversation muted.",
         "mutedTitle": "You're muted!",
+        "mutedRemotelyTitle": "You have been muted by __participantDisplayName__!",
+        "mutedRemotelyDescription": "You can always unmute when you're ready to speak. Mute back when you're done to keep noise away from the meeting.",
         "raisedHand": "__name__ would like to speak.",
         "somebody": "Somebody",
         "startSilentTitle": "You joined with no audio output!",

modules/UI/UI.js

@@ -99,17 +99,6 @@ UI.notifyReservationError = function(code, msg) {
     });
 };
 
-/**
- * Notify user that he has been kicked from the server.
- */
-UI.notifyKicked = function() {
-    messageHandler.showError({
-        hideErrorSupportLink: true,
-        descriptionKey: 'dialog.kickMessage',
-        titleKey: 'dialog.kickTitle'
-    });
-};
-
 /**
  * Notify user that conference was destroyed.
  * @param reason {string} the reason text

package-lock.json

@@ -8946,8 +8946,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#25ca5cbd2a93150e74f029075bc7ac734ed97a2f",
-      "from": "github:jitsi/lib-jitsi-meet#25ca5cbd2a93150e74f029075bc7ac734ed97a2f",
+      "version": "github:jitsi/lib-jitsi-meet#15e09476cdae1dee8f633c628681449be26d12be",
+      "from": "github:jitsi/lib-jitsi-meet#15e09476cdae1dee8f633c628681449be26d12be",
       "requires": {
         "@jitsi/sdp-interop": "0.1.14",
         "@jitsi/sdp-simulcast": "0.2.1",

package.json

@@ -52,7 +52,7 @@
     "js-utils": "github:jitsi/js-utils#73a67a7a60d52f8e895f50939c8fcbd1f20fe7b5",
     "jsrsasign": "8.0.12",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#25ca5cbd2a93150e74f029075bc7ac734ed97a2f",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#15e09476cdae1dee8f633c628681449be26d12be",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.11",
     "moment": "2.19.4",

react/features/base/conference/actions.js

@@ -14,6 +14,8 @@ import {
     dominantSpeakerChanged,
     getNormalizedDisplayName,
     participantConnectionStatusChanged,
+    participantKicked,
+    participantMutedUs,
     participantPresenceChanged,
     participantRoleChanged,
     participantUpdated
@@ -89,7 +91,11 @@ function _addConferenceListeners(conference, dispatch) {
 
     conference.on(
         JitsiConferenceEvents.KICKED,
-        () => dispatch(kickedOut(conference)));
+        (...args) => dispatch(kickedOut(conference, ...args)));
+
+    conference.on(
+        JitsiConferenceEvents.PARTICIPANT_KICKED,
+        (kicker, kicked) => dispatch(participantKicked(kicker, kicked)));
 
     conference.on(
         JitsiConferenceEvents.LOCK_STATE_CHANGED,
@@ -129,6 +135,14 @@ function _addConferenceListeners(conference, dispatch) {
         JitsiConferenceEvents.TRACK_REMOVED,
         t => t && !t.isLocal() && dispatch(trackRemoved(t)));
 
+    conference.on(
+        JitsiConferenceEvents.TRACK_MUTE_CHANGED,
+        (_, participantThatMutedUs) => {
+            if (participantThatMutedUs) {
+                dispatch(participantMutedUs(participantThatMutedUs));
+            }
+        });
+
     // Dispatches into features/base/participants follow:
     conference.on(
         JitsiConferenceEvents.DISPLAY_NAME_CHANGED,
@@ -432,15 +446,19 @@ export function dataChannelOpened() {
  *
  * @param {JitsiConference} conference - The {@link JitsiConference} instance
  * for which the event is being signaled.
+ * @param {JitsiParticipant} participant - The {@link JitsiParticipant}
+ * instance which initiated the kick event.
  * @returns {{
  *     type: KICKED_OUT,
- *     conference: JitsiConference
+ *     conference: JitsiConference,
+ *     participant: JitsiParticipant
  * }}
  */
-export function kickedOut(conference: Object) {
+export function kickedOut(conference: Object, participant: Object) {
     return {
         type: KICKED_OUT,
-        conference
+        conference,
+        participant
     };
 }
 

react/features/base/participants/actions.js

@@ -17,7 +17,11 @@ import {
     PARTICIPANT_UPDATED,
     PIN_PARTICIPANT
 } from './actionTypes';
-import { getLocalParticipant, getNormalizedDisplayName } from './functions';
+import {
+    getLocalParticipant,
+    getNormalizedDisplayName,
+    getParticipantDisplayName
+} from './functions';
 
 /**
  * Create an action for when dominant speaker changes.
@@ -382,6 +386,51 @@ export function participantUpdated(participant = {}) {
     };
 }
 
+/**
+ * Action to signal that a participant has muted us.
+ *
+ * @param {JitsiParticipant} participant - Information about participant.
+ * @returns {Promise}
+ */
+export function participantMutedUs(participant) {
+    return (dispatch, getState) => {
+        if (!participant) {
+            return;
+        }
+
+        dispatch(showNotification({
+            descriptionKey: 'notify.mutedRemotelyDescription',
+            titleKey: 'notify.mutedRemotelyTitle',
+            titleArguments: {
+                participantDisplayName:
+                    getParticipantDisplayName(getState, participant.getId())
+            }
+        }));
+    };
+}
+
+/**
+ * Action to signal that a participant had been kicked.
+ *
+ * @param {JitsiParticipant} kicker - Information about participant performing the kick.
+ * @param {JitsiParticipant} kicked - Information about participant that was kicked.
+ * @returns {Promise}
+ */
+export function participantKicked(kicker, kicked) {
+    return (dispatch, getState) => {
+
+        dispatch(showNotification({
+            titleArguments: {
+                kicked:
+                    getParticipantDisplayName(getState, kicked.getId()),
+                kicker:
+                    getParticipantDisplayName(getState, kicker.getId())
+            },
+            titleKey: 'notify.kickParticipant'
+        }, NOTIFICATION_TIMEOUT * 2)); // leave more time for this
+    };
+}
+
 /**
  * Create an action which pins a conference participant.
  *

react/features/conference/actions.native.js

@@ -0,0 +1,31 @@
+// @flow
+
+import type { Dispatch } from 'redux';
+
+import {
+    AlertDialog,
+    openDialog
+} from '../base/dialog';
+import { getParticipantDisplayName } from '../base/participants';
+
+/**
+ * Notify that we've been kicked out of the conference.
+ *
+ * @param {JitsiParticipant} participant - The {@link JitsiParticipant}
+ * instance which initiated the kick event.
+ * @param {?Function} submit - The function to execute after submiting the dialog.
+ * @returns {Function}
+ */
+export function notifyKickedOut(participant: Object, submit: ?Function) {
+    return (dispatch: Dispatch<any>, getState: Function) => {
+        dispatch(openDialog(AlertDialog, {
+            contentKey: {
+                key: 'dialog.kickTitle',
+                params: {
+                    participantDisplayName: getParticipantDisplayName(getState, participant.getId())
+                }
+            },
+            onSubmit: submit
+        }));
+    };
+}

react/features/conference/actions.web.js

@@ -0,0 +1,35 @@
+// @flow
+
+import type { Dispatch } from 'redux';
+
+import {
+    NOTIFICATION_TYPE,
+    showNotification
+} from '../notifications';
+import { getParticipantDisplayName } from '../base/participants';
+
+/**
+ * Notify that we've been kicked out of the conference.
+ *
+ * @param {JitsiParticipant} participant - The {@link JitsiParticipant}
+ * instance which initiated the kick event.
+ * @param {?Function} _ - Used only in native code.
+ * @returns {Function}
+ */
+export function notifyKickedOut(participant: Object, _: ?Function) { // eslint-disable-line no-unused-vars
+    return (dispatch: Dispatch<any>, getState: Function) => {
+        const args = {
+            participantDisplayName:
+                getParticipantDisplayName(getState, participant.getDisplayName())
+        };
+
+        dispatch(showNotification({
+            appearance: NOTIFICATION_TYPE.ERROR,
+            hideErrorSupportLink: true,
+            descriptionKey: 'dialog.kickMessage',
+            descriptionArguments: args,
+            titleKey: 'dialog.kickTitle',
+            titleArguments: args
+        }));
+    };
+}

react/features/conference/index.js

@@ -1,5 +1,5 @@
 // @flow
-
+export * from './actions';
 export * from './components';
 
 import './middleware';

react/features/conference/middleware.js

@@ -1,5 +1,5 @@
 // @flow
-
+import { notifyKickedOut } from './actions';
 import { appNavigate } from '../app';
 import {
     CONFERENCE_JOINED,
@@ -43,9 +43,15 @@ MiddlewareRegistry.register(store => next => action => {
     case KICKED_OUT: {
         const { dispatch } = store;
 
+        dispatch(notifyKickedOut(
+            action.participant,
+            () => {
                 dispatch(
                     conferenceFailed(action.conference, JitsiConferenceEvents.KICKED));
                 dispatch(appNavigate(undefined));
+            }
+        ));
+
         break;
     }
     }