feat(API): add dominant speaker changed event

Fixes: https://github.com/jitsi/jitsi-meet/issues/4049

doc/api.md

@@ -322,6 +322,13 @@ changes. The listener will receive an object with the following structure:
 }
 ```
 
+* **dominantSpeakerChanged** - receives event notifications about change in the dominant speaker. The listener will receive object with the following structure:
+```javascript
+{
+    id: string //participantId of the new dominant speaker
+}
+```
+
 * **tileViewChanged** - event notifications about tile view layout mode being entered or exited. The listener will receive object with the following structure:
 ```javascript
 {

modules/API/API.js

@@ -709,6 +709,20 @@ class API {
         });
     }
 
+    /**
+     * Notify external application (if API is enabled) that the dominant speaker
+     * has been turned on/off.
+     *
+     * @param {string} id - Id of the dominant participant.
+     * @returns {void}
+     */
+    notifyDominantSpeakerChanged(id: string) {
+        this._sendEvent({
+            name: 'dominant-speaker-changed',
+            id
+        });
+    }
+
     /**
      * Notify external application (if API is enabled) that the conference
      * changed their subject.

modules/API/external/external_api.js

@@ -73,6 +73,7 @@ const events = {
     'video-availability-changed': 'videoAvailabilityChanged',
     'video-mute-status-changed': 'videoMuteStatusChanged',
     'screen-sharing-status-changed': 'screenSharingStatusChanged',
+    'dominant-speaker-changed': 'dominantSpeakerChanged',
     'subject-change': 'subjectChange',
     'suspend-detected': 'suspendDetected',
     'tile-view-changed': 'tileViewChanged'
@@ -521,13 +522,13 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
      * {{
      * jid: jid //the jid of the participant
      * }}
-     * {@code video-conference-joined} - receives event notifications about the
+     * {@code videoConferenceJoined} - receives event notifications about the
      * local user has successfully joined the video conference.
      * The listener will receive object with the following structure:
      * {{
      * roomName: room //the room name of the conference
      * }}
-     * {@code video-conference-left} - receives event notifications about the
+     * {@code videoConferenceLeft} - receives event notifications about the
      * local user has left the video conference.
      * The listener will receive object with the following structure:
      * {{
@@ -539,6 +540,12 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
      * {{
      * on: on //whether screen sharing is on
      * }}
+     * {@code dominantSpeakerChanged} - receives event notifications about
+     * change in the dominant speaker.
+     * The listener will receive object with the following structure:
+     * {{
+     * id: participantId //participantId of the new dominant speaker
+     * }}
      * {@code suspendDetected} - receives event notifications about detecting suspend event in host computer.
      * {@code readyToClose} - all hangup operations are completed and Jitsi Meet
      * is ready to be disposed.

react/features/external-api/middleware.js

@@ -8,6 +8,7 @@ import {
 import { NOTIFY_CAMERA_ERROR, NOTIFY_MIC_ERROR } from '../base/devices';
 import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
 import {
+    DOMINANT_SPEAKER_CHANGED,
     PARTICIPANT_KICKED,
     PARTICIPANT_LEFT,
     PARTICIPANT_JOINED,
@@ -99,6 +100,10 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
+    case DOMINANT_SPEAKER_CHANGED:
+        APP.API.notifyDominantSpeakerChanged(action.participant.id);
+        break;
+
     case KICKED_OUT:
         APP.API.notifyKickedOut(
             {