feat(external-api) Add participants pane toggled event (#11718)

modules/API/API.js

@@ -1695,6 +1695,19 @@ class API {
         });
     }
 
+    /**
+     * Notify the external application that the state of the participants pane changed.
+     *
+     * @param {boolean} open - Wether the panel is open or not.
+     * @returns {void}
+     */
+    notifyParticipantsPaneToggled(open) {
+        this._sendEvent({
+            name: 'participants-pane-toggled',
+            open
+        });
+    }
+
     /**
      * Disposes the allocated resources.
      *

modules/API/external/external_api.js

@@ -126,6 +126,7 @@ const events = {
     'participant-kicked-out': 'participantKickedOut',
     'participant-left': 'participantLeft',
     'participant-role-changed': 'participantRoleChanged',
+    'participants-pane-toggled': 'participantsPaneToggled',
     'password-required': 'passwordRequired',
     'proxy-connection-event': 'proxyConnectionEvent',
     'raise-hand-updated': 'raiseHandUpdated',

react/features/app/middlewares.any.js

@@ -36,6 +36,7 @@ import '../large-video/middleware';
 import '../lobby/middleware';
 import '../notifications/middleware';
 import '../overlay/middleware';
+import '../participants-pane/middleware';
 import '../polls/middleware';
 import '../reactions/middleware';
 import '../recent-list/middleware';

react/features/participants-pane/middleware.ts

@@ -0,0 +1,30 @@
+// @ts-ignore
+import { IStore } from '../app/types';
+// @ts-ignore
+import { MiddlewareRegistry } from '../base/redux';
+import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from './actionTypes';
+
+
+declare var APP: any;
+
+/**
+ * Middleware which intercepts participants pane actions.
+ *
+ * @param {IStore} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register((store: IStore) => (next:Function) => (action:any) => {
+    switch(action.type) {
+        case PARTICIPANTS_PANE_OPEN:
+            if (typeof APP !== 'undefined') {
+                APP.API.notifyParticipantsPaneToggled(true);
+            }
+            break;
+        case PARTICIPANTS_PANE_CLOSE:
+            if (typeof APP !== 'undefined') {
+                APP.API.notifyParticipantsPaneToggled(false);
+            }
+            break;
+    }
+    return next(action);
+});