feat(external_api) add adbility to resize the filmstrip

modules/API/API.js

@@ -68,7 +68,7 @@ import {
 import { appendSuffix } from '../../react/features/display-name';
 import { isEnabled as isDropboxEnabled } from '../../react/features/dropbox';
 import { setMediaEncryptionKey, toggleE2EE } from '../../react/features/e2ee/actions';
-import { setVolume } from '../../react/features/filmstrip';
+import { resizeFilmStrip, setVolume } from '../../react/features/filmstrip/actions.web';
 import { invite } from '../../react/features/invite';
 import {
     selectParticipantInLargeVideo
@@ -308,6 +308,16 @@ function initCommands() {
             sendAnalytics(createApiEvent('film.strip.toggled'));
             APP.UI.toggleFilmstrip();
         },
+
+        /*
+         * @param {Object} options - Additional details of how to perform
+         * the action.
+         * @param {number} options.width - width value for film strip.
+         */
+        'resize-film-strip': (options = {}) => {
+            sendAnalytics(createApiEvent('film.strip.resize'));
+            APP.store.dispatch(resizeFilmStrip(options.width));
+        },
         'toggle-camera': () => {
             if (!isToggleCameraEnabled(APP.store.getState())) {
                 return;
@@ -1787,7 +1797,7 @@ class API {
     /**
      * Notify external application that the breakout rooms changed.
      *
-     * @param {Array} rooms - Array of breakout rooms.
+     * @param {Array} rooms - Array containing the breakout rooms and main room.
      * @returns {void}
      */
     notifyBreakoutRoomsUpdated(rooms) {

modules/API/external/external_api.js

@@ -52,6 +52,7 @@ const commands = {
     pinParticipant: 'pin-participant',
     rejectParticipant: 'reject-participant',
     removeBreakoutRoom: 'remove-breakout-room',
+    resizeFilmStrip: 'resize-film-strip',
     resizeLargeVideo: 'resize-large-video',
     sendChatMessage: 'send-chat-message',
     sendEndpointTextMessage: 'send-endpoint-text-message',

react/features/filmstrip/actionTypes.ts

@@ -1,4 +1,13 @@
 /**
+ * The type of (redux) action which enlarges the filmstrip.
+ *
+ * {
+ *     type: RESIZE_FILMSTRIP,
+ * }
+ */
+export const RESIZE_FILMSTRIP = 'RESIZE_FILMSTRIP';
+
+ /**
  * The type of (redux) action which sets whether the filmstrip is enabled.
  *
  * {

react/features/filmstrip/actions.web.js

@@ -14,6 +14,7 @@ import { getMaxColumnCount } from '../video-layout';
 import {
     ADD_STAGE_PARTICIPANT,
     REMOVE_STAGE_PARTICIPANT,
+    RESIZE_FILMSTRIP,
     SET_STAGE_PARTICIPANTS,
     SET_FILMSTRIP_WIDTH,
     SET_HORIZONTAL_VIEW_DIMENSIONS,
@@ -62,6 +63,23 @@ import { isStageFilmstripAvailable } from './functions.web';
 
 export * from './actions.any';
 
+/**
+ * Resize the filmstrip.
+ *
+ * @param {number} width - Width value for filmstrip.
+ *
+ * @returns {{
+ *  type: RESIZE_FILMSTRIP,
+ *  width: number,
+ * }}
+ */
+export function resizeFilmStrip(width) {
+    return {
+        type: RESIZE_FILMSTRIP,
+        width
+    };
+}
+
 /**
  * Sets the dimensions of the tile view grid.
  *

react/features/filmstrip/middleware.web.js

@@ -24,6 +24,7 @@ import {
     ADD_STAGE_PARTICIPANT,
     CLEAR_STAGE_PARTICIPANTS,
     REMOVE_STAGE_PARTICIPANT,
+    RESIZE_FILMSTRIP,
     SET_MAX_STAGE_PARTICIPANTS,
     SET_USER_FILMSTRIP_WIDTH,
     TOGGLE_PIN_STAGE_PARTICIPANT
@@ -142,6 +143,13 @@ MiddlewareRegistry.register(store => next => action => {
         VideoLayout.refreshLayout();
         break;
     }
+    case RESIZE_FILMSTRIP: {
+        const { width = 0 } = action;
+
+        store.dispatch(setFilmstripWidth(width));
+
+        break;
+    }
     case ADD_STAGE_PARTICIPANT: {
         const { dispatch, getState } = store;
         const { participantId, pinned } = action;