fix(filmstrip) Save stage filmstrip in settings (#12170)

Add config for stage participants number
Enable stage filmstrip by default

config.js

@@ -1441,6 +1441,10 @@ var config = {
     //     // (displaying multiple participants on stage besides the vertical filmstrip)
     //     disableStageFilmstrip: false,
 
+    //     // Default number of participants that can be displayed on stage.
+    //     // The user can change this in settings. Number must be between 1 and 6.
+    //     stageFilmstripParticipants: 1,
+
     //     // Disables the top panel (only shown when a user is sharing their screen).
     //     disableTopPanel: false,
 

react/features/base/config/middleware.ts

@@ -74,6 +74,12 @@ function _setConfig({ dispatch, getState }: IStore, next: Function, action: AnyA
         }));
     }
 
+    if (action.config.filmstrip.stageFilmstripParticipants !== undefined) {
+        dispatch(updateSettings({
+            maxStageParticipants: action.config.filmstrip.stageFilmstripParticipants
+        }));
+    }
+
     dispatch(updateConfig(config));
 
     // FIXME On Web we rely on the global 'config' variable which gets altered

react/features/base/settings/reducer.ts

@@ -26,6 +26,7 @@ const DEFAULT_STATE: ISettingsState = {
     displayName: undefined,
     email: undefined,
     localFlipX: true,
+    maxStageParticipants: 1,
     micDeviceId: undefined,
     serverURL: undefined,
     hideShareAudioHelper: false,
@@ -62,6 +63,7 @@ export interface ISettingsState {
     email?: string;
     hideShareAudioHelper?: boolean;
     localFlipX?: boolean;
+    maxStageParticipants?: number;
     micDeviceId?: string | boolean;
     serverURL?: string;
     soundsIncomingMessage?: boolean;

react/features/filmstrip/actionTypes.ts

@@ -187,17 +187,6 @@ export const REMOVE_STAGE_PARTICIPANT = 'REMOVE_STAGE_PARTICIPANT';
  */
 export const SET_STAGE_PARTICIPANTS = 'SET_STAGE_PARTICIPANTS';
 
-
-/**
- * The type of Redux action which sets the max number of active participants.
- * (the participants displayed on the stage filmstrip).
- * {
- *     type: SET_MAX_STAGE_PARTICIPANTS,
- *     maxParticipants: Number
- * }
- */
-export const SET_MAX_STAGE_PARTICIPANTS = 'SET_MAX_STAGE_PARTICIPANTS';
-
 /**
  * The type of Redux action which toggles the pin state of stage participants.
  * {

react/features/filmstrip/actions.web.js

@@ -24,7 +24,6 @@ import {
     SET_USER_IS_RESIZING,
     SET_VERTICAL_VIEW_DIMENSIONS,
     SET_VOLUME,
-    SET_MAX_STAGE_PARTICIPANTS,
     TOGGLE_PIN_STAGE_PARTICIPANT,
     CLEAR_STAGE_PARTICIPANTS,
     SET_SCREENSHARING_TILE_DIMENSIONS,
@@ -514,19 +513,6 @@ export function setStageParticipants(queue) {
     };
 }
 
-/**
- * Sets the max number of participants to be displayed on stage.
- *
- * @param {number} maxParticipants - Max number of participants.
- * @returns {Object}
- */
-export function setMaxStageParticipants(maxParticipants) {
-    return {
-        type: SET_MAX_STAGE_PARTICIPANTS,
-        maxParticipants
-    };
-}
-
 /**
  * Toggles the pin state of the given participant.
  *

react/features/filmstrip/functions.web.js

@@ -751,7 +751,7 @@ export function isStageFilmstripTopPanel(state, minParticipantCount = 0) {
 export function isStageFilmstripEnabled(state) {
     const { filmstrip } = state['features/base/config'];
 
-    return !(filmstrip?.disableStageFilmstrip ?? true) && interfaceConfig.VERTICAL_FILMSTRIP;
+    return !filmstrip?.disableStageFilmstrip && interfaceConfig.VERTICAL_FILMSTRIP;
 }
 
 /**

react/features/filmstrip/middleware.web.js

@@ -154,7 +154,8 @@ MiddlewareRegistry.register(store => next => action => {
         const { dispatch, getState } = store;
         const { participantId, pinned } = action;
         const state = getState();
-        const { activeParticipants, maxStageParticipants } = state['features/filmstrip'];
+        const { activeParticipants } = state['features/filmstrip'];
+        const { maxStageParticipants } = state['features/base/settings'];
         let queue;
 
         if (activeParticipants.find(p => p.participantId === participantId)) {

react/features/filmstrip/reducer.ts

@@ -16,7 +16,6 @@ import {
     SET_VERTICAL_VIEW_DIMENSIONS,
     SET_VISIBLE_REMOTE_PARTICIPANTS,
     SET_VOLUME,
-    SET_MAX_STAGE_PARTICIPANTS,
     CLEAR_STAGE_PARTICIPANTS,
     SET_SCREENSHARING_TILE_DIMENSIONS,
     SET_USER_FILMSTRIP_HEIGHT,
@@ -56,14 +55,6 @@ const DEFAULT_STATE = {
      */
     isResizing: false,
 
-    /**
-     * The current max number of participants to be displayed on the stage filmstrip.
-     *
-     * @public
-     * @type {Number}
-     */
-    maxStageParticipants: 1,
-
     /**
      * The custom audio volume levels per participant.
      *
@@ -216,7 +207,6 @@ export interface IFilmstripState {
         remoteVideosContainer?: Dimensions;
     };
     isResizing: boolean;
-    maxStageParticipants: number;
     participantsVolume: {
         [participantId: string]: number;
     };
@@ -397,12 +387,6 @@ ReducerRegistry.register<IFilmstripState>(
                 activeParticipants: state.activeParticipants.filter(p => p.participantId !== action.participantId)
             };
         }
-        case SET_MAX_STAGE_PARTICIPANTS: {
-            return {
-                ...state,
-                maxStageParticipants: action.maxParticipants
-            };
-        }
         case CLEAR_STAGE_PARTICIPANTS: {
             return {
                 ...state,

react/features/follow-me/middleware.js

@@ -10,8 +10,9 @@ import {
     pinParticipant
 } from '../base/participants';
 import { MiddlewareRegistry } from '../base/redux';
+import { updateSettings } from '../base/settings';
 import { setFilmstripVisible } from '../filmstrip';
-import { addStageParticipant, setMaxStageParticipants } from '../filmstrip/actions.web';
+import { addStageParticipant } from '../filmstrip/actions.web';
 import { setTileView } from '../video-layout';
 
 import {
@@ -192,7 +193,9 @@ function _onFollowMeCommand(attributes = {}, id, store) {
 
     if (attributes.maxStageParticipants !== undefined
         && oldState.maxStageParticipants !== attributes.maxStageParticipants) {
-        store.dispatch(setMaxStageParticipants(Number(attributes.maxStageParticipants)));
+        store.dispatch(updateSettings({
+            maxStageParticipants: Number(attributes.maxStageParticipants)
+        }));
     }
 }
 

react/features/follow-me/subscriber.js

@@ -74,7 +74,7 @@ StateListenerRegistry.register(
  * Subscribes to changes to the max number of stage participants setting.
  */
 StateListenerRegistry.register(
-    /* selector */ state => state['features/filmstrip'].maxStageParticipants,
+    /* selector */ state => state['features/base/settings'].maxStageParticipants,
     /* listener */ _sendFollowMeCommand);
 
 /**
@@ -90,7 +90,7 @@ function _getFollowMeState(state) {
 
     return {
         filmstripVisible: state['features/filmstrip'].visible,
-        maxStageParticipants: stageFilmstrip ? state['features/filmstrip'].maxStageParticipants : undefined,
+        maxStageParticipants: stageFilmstrip ? state['features/base/settings'].maxStageParticipants : undefined,
         nextOnStage: stageFilmstrip ? undefined : pinnedParticipant && pinnedParticipant.id,
         pinnedStageParticipants: stageFilmstrip ? JSON.stringify(getPinnedActiveParticipants(state)) : undefined,
         sharedDocumentVisible: state['features/etherpad'].editing,

react/features/settings/actions.js

@@ -10,7 +10,6 @@ import {
 import { openDialog } from '../base/dialog';
 import { i18next } from '../base/i18n';
 import { updateSettings } from '../base/settings';
-import { setMaxStageParticipants } from '../filmstrip/actions.web';
 import { setScreenshareFramerate } from '../screen-share/actions';
 
 import {
@@ -123,8 +122,8 @@ export function submitMoreTab(newState: Object): Function {
             dispatch(updateSettings({ disableSelfView: newState.hideSelfView }));
         }
 
-        if (Number(newState.maxStageParticipants) !== currentState.maxStageParticipants) {
+        if (newState.maxStageParticipants !== currentState.maxStageParticipants) {
-            dispatch(setMaxStageParticipants(Number(newState.maxStageParticipants)));
+            dispatch(updateSettings({ maxStageParticipants: Number(newState.maxStageParticipants) }));
         }
     };
 }

react/features/settings/functions.js

@@ -134,7 +134,7 @@ export function getMoreTabProps(stateful: Object | Function) {
         showNotificationsSettings: Object.keys(enabledNotifications).length > 0,
         showPrejoinPage: !state['features/base/settings'].userSelectedSkipPrejoin,
         showPrejoinSettings: state['features/base/config'].prejoinConfig?.enabled,
-        maxStageParticipants: state['features/filmstrip'].maxStageParticipants,
+        maxStageParticipants: state['features/base/settings'].maxStageParticipants,
         stageFilmstripEnabled
     };
 }