fix(follow-me): Small UI fixes.

Does not allow toggling both follow me and follow me recorder. And make when locally enabled show correct status when follow me recorder is selected.

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

@@ -18,7 +18,9 @@ import FormSection from './FormSection';
 const ModeratorSection = () => {
     const dispatch = useDispatch();
     const {
+        followMeActive,
         followMeEnabled,
+        followMeRecorderActive,
         followMeRecorderEnabled,
         startAudioMuted,
         startVideoMuted,
@@ -50,29 +52,36 @@ const ModeratorSection = () => {
         dispatch(updateSettings({ soundsReactions: enabled }));
     }, [ dispatch, updateSettings, setStartReactionsMuted ]);
 
+    const followMeRecorderChecked = followMeRecorderEnabled && !followMeRecorderActive;
+
     const moderationSettings = useMemo(() => {
         const moderation = [
             {
+                disabled: false,
                 label: 'settings.startAudioMuted',
                 state: startAudioMuted,
                 onChange: onStartAudioMutedToggled
             },
             {
+                disabled: false,
                 label: 'settings.startVideoMuted',
                 state: startVideoMuted,
                 onChange: onStartVideoMutedToggled
             },
             {
+                disabled: followMeActive || followMeRecorderActive,
                 label: 'settings.followMe',
-                state: followMeEnabled,
+                state: followMeEnabled && !followMeActive && !followMeRecorderChecked,
                 onChange: onFollowMeToggled
             },
             {
+                disabled: followMeRecorderActive || followMeActive,
                 label: 'settings.followMeRecorder',
-                state: followMeRecorderEnabled,
+                state: followMeRecorderChecked,
                 onChange: onFollowMeRecorderToggled
             },
             {
+                disabled: false,
                 label: 'settings.startReactionsMuted',
                 state: startReactionsMuted,
                 onChange: onStartReactionsMutedToggled
@@ -100,12 +109,13 @@ const ModeratorSection = () => {
         <FormSection
             label = 'settings.playSounds'>
             {
-                moderationSettings.map(({ label, state, onChange }) => (
+                moderationSettings.map(({ label, state, onChange, disabled }) => (
                     <FormRow
                         key = { label }
                         label = { label }>
                         <Switch
                             checked = { Boolean(state) }
+                            disabled = { disabled }
                             onChange = { onChange } />
                     </FormRow>
                 ))

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

@@ -150,7 +150,10 @@ class ModeratorTab extends AbstractDialogTab<IProps, any> {
      * @returns {void}
      */
     _onFollowMeEnabledChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
-        super._onChange({ followMeEnabled: checked });
+        super._onChange({
+            followMeEnabled: checked,
+            followMeRecorderEnabled: checked ? false : undefined
+        });
     }
 
     /**
@@ -161,7 +164,10 @@ class ModeratorTab extends AbstractDialogTab<IProps, any> {
      * @returns {void}
      */
     _onFollowMeRecorderEnabledChanged({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) {
-        super._onChange({ followMeRecorderEnabled: checked });
+        super._onChange({
+            followMeEnabled: checked ? false : undefined,
+            followMeRecorderEnabled: checked
+        });
     }
 
     /**
@@ -184,6 +190,8 @@ class ModeratorTab extends AbstractDialogTab<IProps, any> {
         } = this.props;
         const classes = withStyles.getClasses(this.props);
 
+        const followMeRecorderChecked = followMeRecorderEnabled && !followMeRecorderActive;
+
         return (
             <div
                 className = { `moderator-tab ${classes.container}` }
@@ -204,14 +212,14 @@ class ModeratorTab extends AbstractDialogTab<IProps, any> {
                     name = 'start-video-muted'
                     onChange = { this._onStartVideoMutedChanged } />
                 <Checkbox
-                    checked = { followMeEnabled && !followMeActive }
+                    checked = { followMeEnabled && !followMeActive && !followMeRecorderChecked }
                     className = { classes.checkbox }
                     disabled = { followMeActive || followMeRecorderActive }
                     label = { t('settings.followMe') }
                     name = 'follow-me'
                     onChange = { this._onFollowMeEnabledChanged } />
                 <Checkbox
-                    checked = { followMeRecorderEnabled && !followMeRecorderActive }
+                    checked = { followMeRecorderChecked }
                     className = { classes.checkbox }
                     disabled = { followMeRecorderActive || followMeActive }
                     label = { t('settings.followMeRecorder') }