fix: Fixes disable moderation sounds in meeting. (#10604)

* fix: Fixes disable moderation sounds in meeting.

Moderators in the meeting were sending presence update after one moderator turn it on, which even my result a inconsistent state and flipping the state between moderators several times.

* squash: Adds option to disable reaction moderation.

config.js

@@ -80,6 +80,9 @@ var config = {
     // Disables the reactions feature.
     // disableReactions: true,
 
+    // Disables the reactions moderation feature.
+    // disableReactionsModeration: false,
+
     // Disables polls feature.
     // disablePolls: false,
 

react/features/base/conference/actions.js

@@ -670,15 +670,17 @@ export function setFollowMe(enabled: boolean) {
  * Enables or disables the Mute reaction sounds feature.
  *
  * @param {boolean} muted - Whether or not reaction sounds should be muted for all participants.
+ * @param {boolean} updateBackend - Whether or not the moderator should notify all participants for the new setting.
  * @returns {{
  *     type: SET_START_REACTIONS_MUTED,
  *     muted: boolean
  * }}
  */
-export function setStartReactionsMuted(muted: boolean) {
+export function setStartReactionsMuted(muted: boolean, updateBackend: boolean = false) {
     return {
         type: SET_START_REACTIONS_MUTED,
-        muted
+        muted,
+        updateBackend
     };
 }
 

react/features/base/config/configWhitelist.js

@@ -108,6 +108,7 @@ export default [
     'disablePolls',
     'disableProfile',
     'disableReactions',
+    'disableReactionsModeration',
     'disableRecordAudioNotification',
     'disableRemoteControl',
     'disableRemoteMute',

react/features/reactions/middleware.js

@@ -4,7 +4,11 @@ import { batch } from 'react-redux';
 
 import { createReactionSoundsDisabledEvent, sendAnalytics } from '../analytics';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app';
-import { CONFERENCE_WILL_JOIN, setStartReactionsMuted } from '../base/conference';
+import {
+    CONFERENCE_WILL_JOIN,
+    SET_START_REACTIONS_MUTED,
+    setStartReactionsMuted
+} from '../base/conference';
 import {
     getParticipantById,
     getParticipantCount,
@@ -49,11 +53,6 @@ import {
 import logger from './logger';
 import { RAISE_HAND_SOUND_FILE } from './sounds';
 
-import './subscriber';
-
-
-declare var APP: Object;
-
 /**
  * Middleware which intercepts Reactions actions to handle changes to the
  * visibility timeout of the Reactions.
@@ -171,6 +170,18 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
+    // Settings changed for mute reactions in the meeting
+    case SET_START_REACTIONS_MUTED: {
+        const state = getState();
+        const { conference } = state['features/base/conference'];
+        const { muted, updateBackend } = action;
+
+        if (conference && isLocalParticipantModerator(state) && updateBackend) {
+            conference.sendCommand(MUTE_REACTIONS_COMMAND, { attributes: { startReactionsMuted: Boolean(muted) } });
+        }
+        break;
+    }
+
     case SETTINGS_UPDATED: {
         const { soundsReactions } = getState()['features/base/settings'];
 

react/features/reactions/subscriber.js

@@ -1,45 +0,0 @@
-// @flow
-
-import { getCurrentConference } from '../base/conference';
-import { isLocalParticipantModerator } from '../base/participants';
-import { StateListenerRegistry } from '../base/redux';
-
-import { MUTE_REACTIONS_COMMAND } from './constants';
-
-/**
- * Subscribes to changes to the Mute Reaction Sounds setting for the local participant to
- * notify remote participants of current user interface status.
- * Changing newSelectedValue param to off, when feature is turned of so we can
- * notify all listeners.
- */
-StateListenerRegistry.register(
-    /* selector */ state => state['features/base/conference'].startReactionsMuted,
-    /* listener */ (newSelectedValue, store) => _sendMuteReactionsCommand(newSelectedValue || false, store));
-
-
-/**
- * Sends the mute-reactions command, when a local property change occurs.
- *
- * @param {*} newSelectedValue - The changed selected value from the selector.
- * @param {Object} store - The redux store.
- * @private
- * @returns {void}
- */
-function _sendMuteReactionsCommand(newSelectedValue, store) {
-    const state = store.getState();
-    const conference = getCurrentConference(state);
-
-    if (!conference) {
-        return;
-    }
-
-    // Only a moderator is allowed to send commands.
-    if (!isLocalParticipantModerator(state)) {
-        return;
-    }
-
-    conference.sendCommand(
-        MUTE_REACTIONS_COMMAND,
-        { attributes: { startReactionsMuted: Boolean(newSelectedValue) } }
-    );
-}

react/features/settings/actions.js

@@ -129,7 +129,8 @@ export function submitModeratorTab(newState: Object): Function {
 
         if (newState.startReactionsMuted !== currentState.startReactionsMuted) {
             batch(() => {
-                dispatch(setStartReactionsMuted(newState.startReactionsMuted));
+                // updating settings we want to update and backend (notify the rest of the participants)
+                dispatch(setStartReactionsMuted(newState.startReactionsMuted, true));
                 dispatch(updateSettings({ soundsReactions: !newState.startReactionsMuted }));
             });
         }

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

@@ -12,6 +12,11 @@ import { translate } from '../../../base/i18n';
 export type Props = {
     ...$Exact<AbstractDialogTabProps>,
 
+    /**
+     *
+     */
+    disableReactionsModeration: boolean,
+
     /**
      * Whether or not follow me is currently active (enabled by some other participant).
      */
@@ -142,6 +147,7 @@ class ModeratorTab extends AbstractDialogTab<Props> {
      */
     _renderModeratorSettings() {
         const {
+            disableReactionsModeration,
             followMeActive,
             followMeEnabled,
             startAudioMuted,
@@ -171,11 +177,12 @@ class ModeratorTab extends AbstractDialogTab<Props> {
                         label = { t('settings.followMe') }
                         name = 'follow-me'
                         onChange = { this._onFollowMeEnabledChanged } />
-                    <Checkbox
-                        isChecked = { startReactionsMuted }
-                        label = { t('settings.startReactionsMuted') }
-                        name = 'start-reactions-muted'
-                        onChange = { this._onStartReactionsMutedChanged } />
+                    { !disableReactionsModeration
+                        && <Checkbox
+                            isChecked = { startReactionsMuted }
+                            label = { t('settings.startReactionsMuted') }
+                            name = 'start-reactions-muted'
+                            onChange = { this._onStartReactionsMutedChanged } /> }
                 </div>
             </div>
         );

react/features/settings/functions.js

@@ -120,6 +120,7 @@ export function getModeratorTabProps(stateful: Object | Function) {
         startVideoMutedPolicy,
         startReactionsMuted
     } = state['features/base/conference'];
+    const { disableReactionsModeration } = state['features/base/config'];
     const followMeActive = isFollowMeActive(state);
     const configuredTabs = interfaceConfig.SETTINGS_SECTIONS || [];
 
@@ -131,6 +132,7 @@ export function getModeratorTabProps(stateful: Object | Function) {
     // The settings sections to display.
     return {
         showModeratorSettings,
+        disableReactionsModeration: Boolean(disableReactionsModeration),
         followMeActive: Boolean(conference && followMeActive),
         followMeEnabled: Boolean(conference && followMeEnabled),
         startReactionsMuted: Boolean(conference && startReactionsMuted),