feat(follow-me): Adds option to limit it for recorder only. (#15120)

* feat(follow-me): Adds option to limit it for recorder only.

* squash: Fix comments.

* squash: Fix comments.

lang/main.json

         "desktopShareWarning": "You need to restart the screen share for the new settings to take effect.",
         "devices": "Devices",
         "followMe": "Everyone follows me",
+        "followMeRecorder": "Recorder follows me",
         "framesPerSecond": "frames-per-second",
         "incomingMessage": "Incoming message",
         "language": "Language",

react/features/base/conference/actionTypes.ts

 /**
  * The type of (redux) action which signals that the conference is out of focus.
  * For example, if the user navigates to the Chat screen.
- * 
+ *
  * {
  *      type: CONFERENCE_BLURRED,
  * }
 
 /**
  * The type of (redux) action which signals that the conference is in focus.
- * 
+ *
  * {
  *      type: CONFERENCE_FOCUSED,
  * }
  */
 export const SET_FOLLOW_ME = 'SET_FOLLOW_ME';
 
+/**
+ * The type of (redux) action which updates the current known status of the
+ * Follow Me feature that is used only by the recorder.
+ *
+ * {
+ *     type: SET_FOLLOW_ME_RECORDER,
+ *     enabled: boolean
+ * }
+ */
+export const SET_FOLLOW_ME_RECORDER = 'SET_FOLLOW_ME_RECORDER';
+
 /**
  * The type of (redux) action which sets the obfuscated room name.
  *
 
 /**
  * The type of (redux) action which updates the assumed bandwidth bps.
- * 
+ *
  * {
  *      type: SET_ASSUMED_BANDWIDTH_BPS,
  *      assumedBandwidthBps: number

react/features/base/conference/actions.any.ts

     SEND_TONES,
     SET_ASSUMED_BANDWIDTH_BPS,
     SET_FOLLOW_ME,
+    SET_FOLLOW_ME_RECORDER,
     SET_OBFUSCATED_ROOM,
     SET_PASSWORD,
     SET_PASSWORD_FAILED,
     };
 }
 
+/**
+ * Enables or disables the Follow Me feature used only for the recorder.
+ *
+ * @param {boolean} enabled - Whether Follow Me should be enabled and used only by the recorder.
+ * @returns {{
+ *     type: SET_FOLLOW_ME_RECORDER,
+ *     enabled: boolean
+ * }}
+ */
+export function setFollowMeRecorder(enabled: boolean) {
+    return {
+        type: SET_FOLLOW_ME_RECORDER,
+        enabled
+    };
+}
+
 /**
  * Enables or disables the Mute reaction sounds feature.
  *

react/features/base/conference/reducer.ts

     P2P_STATUS_CHANGED,
     SET_ASSUMED_BANDWIDTH_BPS,
     SET_FOLLOW_ME,
+    SET_FOLLOW_ME_RECORDER,
     SET_OBFUSCATED_ROOM,
     SET_PASSWORD,
     SET_PENDING_SUBJECT_CHANGE,
     e2eeSupported?: boolean;
     error?: Error;
     followMeEnabled?: boolean;
+    followMeRecorderEnabled?: boolean;
     joining?: IJitsiConference;
     leaving?: IJitsiConference;
     lobbyWaitingForHost?: boolean;
         case SET_FOLLOW_ME:
             return set(state, 'followMeEnabled', action.enabled);
 
+        case SET_FOLLOW_ME_RECORDER:
+            return { ...state,
+                followMeRecorderEnabled: action.enabled,
+                followMeEnabled: action.enabled
+            };
+
         case SET_START_REACTIONS_MUTED:
             return set(state, 'startReactionsMuted', action.muted);
 

react/features/follow-me/actions.ts

  * Sets the current moderator id or clears it.
  *
  * @param {?string} id - The Follow Me moderator participant id.
+ * @param {?boolean} forRecorder - Whether this is command only for recorder.
  * @returns {{
  *     type: SET_FOLLOW_ME_MODERATOR,
- *     id, string
+ *     id: string,
+ *     forRecorder: boolean
  * }}
  */
-export function setFollowMeModerator(id?: string) {
+export function setFollowMeModerator(id?: string, forRecorder?: boolean) {
     return {
         type: SET_FOLLOW_ME_MODERATOR,
-        id
+        id,
+        forRecorder
     };
 }
 

react/features/follow-me/functions.ts

 
     return Boolean(state['features/follow-me'].moderator);
 }
+
+/**
+ * Returns true if follow me is active only for the recorder and false otherwise.
+ *
+ * @param {Object|Function} stateful - Object or function that can be resolved
+ * to the Redux state.
+ * @returns {boolean} - True if follow me is active and false otherwise.
+ */
+export function isFollowMeRecorderActive(stateful: IStateful) {
+    const state = toState(stateful);
+
+    return Boolean(state['features/follow-me'].recorder);
+}

react/features/follow-me/middleware.ts

     }
 
     if (!isFollowMeActive(state)) {
-        store.dispatch(setFollowMeModerator(id));
+        store.dispatch(setFollowMeModerator(id, attributes.recorder));
     }
 
     // just a command that follow me was turned off
         return;
     }
 
+    // when recorder flag is on, follow me is handled only on recorder side
+    if (attributes.recorder && !store.getState()['features/base/config'].iAmRecorder) {
+        return;
+    }
+
     const oldState = state['features/follow-me'].state || {};
 
     store.dispatch(setFollowMeState(attributes));

react/features/follow-me/reducer.ts

 
 export interface IFollowMeState {
     moderator?: string;
+    recorder?: boolean;
     state?: {
         [key: string]: string;
     };
         case SET_FOLLOW_ME_MODERATOR: {
             let newState = set(state, 'moderator', action.id);
 
-            if (!action.id) {
+            if (action.id) {
+                newState = set(newState, 'recorder', action.forRecorder);
+            } else {
                 // clear the state if feature becomes disabled
                 newState = set(newState, 'state', undefined);
+                newState = set(newState, 'recorder', undefined);
             }
 
             return newState;

react/features/follow-me/subscriber.ts

     const stageFilmstrip = isStageFilmstripEnabled(state);
 
     return {
+        recorder: state['features/base/conference'].followMeRecorderEnabled,
         filmstripVisible: state['features/filmstrip'].visible,
         maxStageParticipants: stageFilmstrip ? state['features/base/settings'].maxStageParticipants : undefined,
         nextOnStage: pinnedParticipant?.id,

react/features/settings/actions.web.ts

 import { isTokenAuthEnabled } from '../authentication/functions';
 import {
     setFollowMe,
+    setFollowMeRecorder,
     setStartMutedPolicy,
     setStartReactionsMuted
 } from '../base/conference/actions';
             dispatch(setFollowMe(newState.followMeEnabled));
         }
 
+        if (newState.followMeRecorderEnabled !== currentState.followMeRecorderEnabled) {
+            dispatch(setFollowMeRecorder(newState.followMeRecorderEnabled));
+        }
+
         if (newState.startReactionsMuted !== currentState.startReactionsMuted) {
             batch(() => {
                 // updating settings we want to update and backend (notify the rest of the participants)

react/features/settings/components/native/ModeratorSection.tsx

 import { useDispatch, useSelector } from 'react-redux';
 
 import { IReduxState } from '../../../app/types';
-import { setFollowMe, setStartMutedPolicy, setStartReactionsMuted } from '../../../base/conference/actions';
+import {
+    setFollowMe,
+    setFollowMeRecorder,
+    setStartMutedPolicy,
+    setStartReactionsMuted
+} from '../../../base/conference/actions';
 import { updateSettings } from '../../../base/settings/actions';
 import Switch from '../../../base/ui/components/native/Switch';
 import { getModeratorTabProps } from '../../functions.native';
     const dispatch = useDispatch();
     const {
         followMeEnabled,
+        followMeRecorderEnabled,
         startAudioMuted,
         startVideoMuted,
         startReactionsMuted
         dispatch(setFollowMe(Boolean(enabled)));
     }, [ dispatch, setFollowMe ]);
 
+    const onFollowMeRecorderToggled = useCallback((enabled?: boolean) => {
+        dispatch(setFollowMeRecorder(Boolean(enabled)));
+    }, [ dispatch, setFollowMeRecorder ]);
+
     const onStartReactionsMutedToggled = useCallback((enabled?: boolean) => {
         dispatch(setStartReactionsMuted(Boolean(enabled), true));
         dispatch(updateSettings({ soundsReactions: enabled }));
                 state: followMeEnabled,
                 onChange: onFollowMeToggled
             },
+            {
+                label: 'settings.followMeRecorder',
+                state: followMeRecorderEnabled,
+                onChange: onFollowMeRecorderToggled
+            },
             {
                 label: 'settings.startReactionsMuted',
                 state: startReactionsMuted,
     }, [ startAudioMuted,
         startVideoMuted,
         followMeEnabled,
+        followMeRecorderEnabled,
         disableReactionsModeration,
+        onStartAudioMutedToggled,
+        onStartVideoMutedToggled,
+        onFollowMeToggled,
+        onFollowMeRecorderToggled,
+        onStartReactionsMutedToggled,
         startReactionsMuted ]);
 
     return (

react/features/settings/components/web/ModeratorTab.tsx

      */
     followMeEnabled: boolean;
 
+    /**
+     * Whether follow me for recorder is currently active (enabled by some other participant).
+     */
+    followMeRecorderActive: boolean;
+
+    /**
+     * Whether the user has selected the Follow Me Recorder feature to be enabled.
+     */
+    followMeRecorderEnabled: boolean;
+
     /**
      * Whether or not the user has selected the Start Audio Muted feature to be
      * enabled.
         this._onStartVideoMutedChanged = this._onStartVideoMutedChanged.bind(this);
         this._onStartReactionsMutedChanged = this._onStartReactionsMutedChanged.bind(this);
         this._onFollowMeEnabledChanged = this._onFollowMeEnabledChanged.bind(this);
+        this._onFollowMeRecorderEnabledChanged = this._onFollowMeRecorderEnabledChanged.bind(this);
     }
 
     /**
         super._onChange({ followMeEnabled: checked });
     }
 
+    /**
+     * Callback invoked to select if follow-me for recorder mode should be activated.
+     *
+     * @param {Object} e - The key event to handle.
+     *
+     * @returns {void}
+     */
+    _onFollowMeRecorderEnabledChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
+        super._onChange({ followMeRecorderEnabled: checked });
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
             disableReactionsModeration,
             followMeActive,
             followMeEnabled,
+            followMeRecorderActive,
+            followMeRecorderEnabled,
             startAudioMuted,
             startVideoMuted,
             startReactionsMuted,
                 <Checkbox
                     checked = { followMeEnabled && !followMeActive }
                     className = { classes.checkbox }
-                    disabled = { followMeActive }
+                    disabled = { followMeActive || followMeRecorderActive }
                     label = { t('settings.followMe') }
                     name = 'follow-me'
                     onChange = { this._onFollowMeEnabledChanged } />
+                <Checkbox
+                    checked = { followMeRecorderEnabled && !followMeRecorderActive }
+                    className = { classes.checkbox }
+                    disabled = { followMeRecorderActive || followMeActive }
+                    label = { t('settings.followMeRecorder') }
+                    name = 'follow-me-recorder'
+                    onChange = { this._onFollowMeRecorderEnabledChanged } />
                 { !disableReactionsModeration
                         && <Checkbox
                             checked = { startReactionsMuted }

react/features/settings/components/web/SettingsDialog.tsx

                 return {
                     ...newProps,
                     followMeEnabled: tabState?.followMeEnabled,
+                    followMeRecorderEnabled: tabState?.followMeRecorderEnabled,
                     startAudioMuted: tabState?.startAudioMuted,
                     startVideoMuted: tabState?.startVideoMuted,
                     startReactionsMuted: tabState?.startReactionsMuted

react/features/settings/functions.any.ts

 import { getHideSelfView } from '../base/settings/functions.any';
 import { parseStandardURIString } from '../base/util/uri';
 import { isStageFilmstripEnabled } from '../filmstrip/functions';
-import { isFollowMeActive } from '../follow-me/functions';
+import { isFollowMeActive, isFollowMeRecorderActive } from '../follow-me/functions';
 import { isPrejoinEnabledInConfig } from '../prejoin/functions';
 import { isReactionsEnabled } from '../reactions/functions.any';
 import { iAmVisitor } from '../visitors/functions';
     const {
         conference,
         followMeEnabled,
+        followMeRecorderEnabled,
         startAudioMutedPolicy,
         startVideoMutedPolicy,
         startReactionsMuted
     } = state['features/base/conference'];
     const { disableReactionsModeration } = state['features/base/config'];
     const followMeActive = isFollowMeActive(state);
+    const followMeRecorderActive = isFollowMeRecorderActive(state);
     const showModeratorSettings = shouldShowModeratorSettings(state);
 
     // The settings sections to display.
         disableReactionsModeration: Boolean(disableReactionsModeration),
         followMeActive: Boolean(conference && followMeActive),
         followMeEnabled: Boolean(conference && followMeEnabled),
+        followMeRecorderActive: Boolean(conference && followMeRecorderActive),
+        followMeRecorderEnabled: Boolean(conference && followMeRecorderEnabled),
         startReactionsMuted: Boolean(conference && startReactionsMuted),
         startAudioMuted: Boolean(conference && startAudioMutedPolicy),
         startVideoMuted: Boolean(conference && startVideoMutedPolicy)