Add participantRoleChanged event to external API (#6573)

* Add participantRoleChanged event to external API

* Update API documentation

* Remove unneeded whitespace

* Remove more unneeded whitespace

* Fix jsdoc formatting

* Fix jsdoc formatting

conference.js

@@ -2093,6 +2093,7 @@ export default {
                 logger.info(`My role changed, new role: ${role}`);
 
                 APP.store.dispatch(localParticipantRoleChanged(role));
+                APP.API.notifyUserRoleChanged(id, role);
             } else {
                 APP.store.dispatch(participantRoleChanged(id, role));
             }

doc/api.md

@@ -465,6 +465,14 @@ changes. The listener will receive an object with the following structure:
 }
 ```
 
+* **participantRoleChanged** - event notification fired when the role of the local user has changed (none, moderator, participant). The listener will receive an object with the following structure:
+```javascript
+{
+    id: string // the id of the participant
+    role: string // the new role of the participant
+}
+```
+
 * **passwordRequired** - event notifications fired when failing to join a room because it has a password.
 
 * **videoConferenceJoined** - event notifications fired when the local user has joined the video conference. The listener will receive an object with the following structure:

modules/API/API.js

@@ -439,6 +439,22 @@ class API {
         });
     }
 
+    /**
+     * Notify external application (if API is enabled) that the user role
+     * has changed.
+     *
+     * @param {string} id - User id.
+     * @param {string} role - The new user role.
+     * @returns {void}
+     */
+    notifyUserRoleChanged(id: string, role: string) {
+        this._sendEvent({
+            name: 'participant-role-changed',
+            id,
+            role
+        });
+    }
+
     /**
      * Notify external application (if API is enabled) that user changed their
      * avatar.

modules/API/external/external_api.js

@@ -67,6 +67,7 @@ const events = {
     'participant-joined': 'participantJoined',
     'participant-kicked-out': 'participantKickedOut',
     'participant-left': 'participantLeft',
+    'participant-role-changed': 'participantRoleChanged',
     'password-required': 'passwordRequired',
     'proxy-connection-event': 'proxyConnectionEvent',
     'video-ready-to-close': 'readyToClose',

react/features/base/participants/actionTypes.js

@@ -57,6 +57,19 @@ export const PARTICIPANT_DISPLAY_NAME_CHANGED
  */
 export const PARTICIPANT_ID_CHANGED = 'PARTICIPANT_ID_CHANGED';
 
+/**
+ * Action to signal that participant role has changed. e.
+ *
+ * {
+ *     type: PARTICIPANT_ROLE_CHANGED,
+ *     participant: {
+ *         id: string
+ *     }
+ *     role: string
+ * }
+ */
+export const PARTICIPANT_ROLE_CHANGED = 'PARTICIPANT_ROLE_CHANGED';
+
 /**
  * Action to signal that a participant has joined.
  *

react/features/external-api/middleware.js

@@ -12,6 +12,7 @@ import {
     PARTICIPANT_KICKED,
     PARTICIPANT_LEFT,
     PARTICIPANT_JOINED,
+    PARTICIPANT_ROLE_CHANGED,
     SET_LOADABLE_AVATAR_URL,
     getLocalParticipant,
     getParticipantById
@@ -157,6 +158,10 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
+    case PARTICIPANT_ROLE_CHANGED:
+        APP.API.notifyUserRoleChanged(action.participant.id, action.participant.role);
+        break;
+
     case SET_FILMSTRIP_VISIBLE:
         APP.API.notifyFilmstripDisplayChanged(action.visible);
         break;