feat(api): add notification for when filmstrip gets toggled (#3974)

doc/api.md

@@ -214,6 +214,12 @@ changes. The listener will receive an object with the following structure:
 "email": email // the new email
 }
 ```
+* **filmstripDisplayChanged** - event notifications about the visibility of the filmstrip being updated.
+```javascript
+{
+"visible": visible, // Whether or not the filmstrip is displayed or hidden.
+}
+```
 
 * **participantJoined** - event notifications about new participants who join the room. The listener will receive an object with the following structure:
 ```javascript

modules/API/API.js

@@ -551,6 +551,21 @@ class API {
         this._sendEvent({ name: 'feedback-prompt-displayed' });
     }
 
+    /**
+     * Notify external application (if API is enabled) that the display
+     * configuration of the filmstrip has been changed.
+     *
+     * @param {boolean} visible - Whether or not the filmstrip has been set to
+     * be displayed or hidden.
+     * @returns {void}
+     */
+    notifyFilmstripDisplayChanged(visible: boolean) {
+        this._sendEvent({
+            name: 'filmstrip-display-changed',
+            visible
+        });
+    }
+
     /**
      * Notify external application (if API is enabled) that the screen sharing
      * has been turned on/off.

modules/API/external/external_api.js

@@ -44,6 +44,7 @@ const events = {
     'email-change': 'emailChange',
     'feedback-submitted': 'feedbackSubmitted',
     'feedback-prompt-displayed': 'feedbackPromptDisplayed',
+    'filmstrip-display-changed': 'filmstripDisplayChanged',
     'incoming-message': 'incomingMessage',
     'outgoing-message': 'outgoingMessage',
     'participant-joined': 'participantJoined',

react/features/video-layout/middleware.web.js

@@ -82,6 +82,7 @@ MiddlewareRegistry.register(store => next => action => {
     case SET_FILMSTRIP_VISIBLE:
         VideoLayout.resizeVideoArea(true, false);
         APP.UI.emitEvent(UIEvents.TOGGLED_FILMSTRIP, action.visible);
+        APP.API.notifyFilmstripDisplayChanged(action.visible);
         break;
 
     case SET_TILE_VIEW: