From 22277ad799eaa1c283b20d220ec84611f06a4ecf Mon Sep 17 00:00:00 2001
From: virtuacoplenny <virtuacoplenny@gmail.com>
Date: Mon, 11 Mar 2019 11:17:28 -0700
Subject: [PATCH] feat(api): add notification for when filmstrip gets toggled
 (#3974)

---
 doc/api.md                                    |  6 ++++++
 modules/API/API.js                            | 15 +++++++++++++++
 modules/API/external/external_api.js          |  1 +
 react/features/video-layout/middleware.web.js |  1 +
 4 files changed, 23 insertions(+)

diff --git a/doc/api.md b/doc/api.md
index db7c895909..ff0ff7752b 100644
--- a/doc/api.md
+++ b/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
diff --git a/modules/API/API.js b/modules/API/API.js
index 460f806b63..892797a85b 100644
--- a/modules/API/API.js
+++ b/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.
diff --git a/modules/API/external/external_api.js b/modules/API/external/external_api.js
index 07eb49d52a..40b83006b1 100644
--- a/modules/API/external/external_api.js
+++ b/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',
diff --git a/react/features/video-layout/middleware.web.js b/react/features/video-layout/middleware.web.js
index 01d3c30fb7..a7f07b69cc 100644
--- a/react/features/video-layout/middleware.web.js
+++ b/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: