feat: (moderate-reaction-sounds) enable moderator to mute reaction so…

…unds

css/modals/settings/_settings.scss

@@ -65,6 +65,11 @@
         text-align: left;
         flex: 1;
     }
+
+    .moderator-settings-wrapper {
+        padding-top: 20px;
+    }
+
     .profile-edit-field {
         margin-right: 20px;
     }

lang/main.json

@@ -633,6 +633,7 @@
         "moderationToggleDescription": "by {{participantDisplayName}}",
         "raiseHandAction": "Raise hand",
         "reactionSounds": "Disable sounds",
+        "reactionSoundsForAll": "Disable sounds for all",
         "groupTitle": "Notifications",
         "videoUnmuteBlockedTitle": "Camera unmute blocked!",
         "videoUnmuteBlockedDescription": "Camera unmute operation has been temporarily blocked because of system limits."
@@ -660,7 +661,8 @@
             "stopEveryonesVideo": "Stop everyone's video",
             "stopVideo": "Stop video",
             "unblockEveryoneMicCamera": "Unblock everyone's mic and camera",
-            "videoModeration": "Start their video"
+            "videoModeration": "Start their video",
+            "moreModerationControls": "More moderation controls"
         },
         "search": "Search participants"
     },
@@ -855,6 +857,7 @@
         "sounds": "Sounds",
         "speakers": "Speakers",
         "startAudioMuted": "Everyone starts muted",
+        "startReactionsMuted": "Mute reaction sounds for everyone",
         "startVideoMuted": "Everyone starts hidden",
         "talkWhileMuted": "Talk while muted",
         "title": "Settings"

react/features/av-moderation/middleware.js

@@ -98,11 +98,11 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
         }
 
         dispatch(showNotification({
-            customActionNameKey: 'notify.raiseHandAction',
-            customActionHandler: () => batch(() => {
+            customActionNameKey: [ 'notify.raiseHandAction' ],
+            customActionHandler: [ () => batch(() => {
                 dispatch(raiseHand(true));
                 dispatch(hideNotification(uid));
-            }),
+            }) ],
             descriptionKey,
             sticky: true,
             titleKey,
@@ -221,8 +221,8 @@ StateListenerRegistry.register(
                     dispatch(showNotification({
                         titleKey: 'notify.hostAskedUnmute',
                         sticky: true,
-                        customActionNameKey: 'notify.unmute',
-                        customActionHandler: () => dispatch(muteLocal(false, MEDIA_TYPE.AUDIO))
+                        customActionNameKey: [ 'notify.unmute' ],
+                        customActionHandler: [ () => dispatch(muteLocal(false, MEDIA_TYPE.AUDIO)) ]
                     }, NOTIFICATION_TIMEOUT_TYPE.STICKY));
                     dispatch(playSound(ASKED_TO_UNMUTE_SOUND_ID));
                 }

react/features/base/conference/actionTypes.js

@@ -172,6 +172,17 @@ export const SEND_TONES = 'SEND_TONES';
  */
 export const SET_FOLLOW_ME = 'SET_FOLLOW_ME';
 
+/**
+ * The type of (redux) action which updates the current known status of the
+ * Mute Reactions Sound feature.
+ *
+ * {
+ *     type: SET_START_REACTIONS_MUTED,
+ *     enabled: boolean
+ * }
+ */
+export const SET_START_REACTIONS_MUTED = 'SET_START_REACTIONS_MUTED';
+
 /**
  * The type of (redux) action which sets the password to join or lock a specific
  * {@code JitsiConference}.

react/features/base/conference/actions.js

@@ -53,7 +53,8 @@ import {
     SET_PASSWORD_FAILED,
     SET_ROOM,
     SET_PENDING_SUBJECT_CHANGE,
-    SET_START_MUTED_POLICY
+    SET_START_MUTED_POLICY,
+    SET_START_REACTIONS_MUTED
 } from './actionTypes';
 import {
     AVATAR_URL_COMMAND,
@@ -669,6 +670,22 @@ 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.
+ * @returns {{
+ *     type: SET_START_REACTIONS_MUTED,
+ *     muted: boolean
+ * }}
+ */
+export function setStartReactionsMuted(muted: boolean) {
+    return {
+        type: SET_START_REACTIONS_MUTED,
+        muted
+    };
+}
+
 /**
  * Sets the password to join or lock a specific JitsiConference.
  *

react/features/base/conference/reducer.js

@@ -20,7 +20,8 @@ import {
     SET_PASSWORD,
     SET_PENDING_SUBJECT_CHANGE,
     SET_ROOM,
-    SET_START_MUTED_POLICY
+    SET_START_MUTED_POLICY,
+    SET_START_REACTIONS_MUTED
 } from './actionTypes';
 import { isRoomValid } from './functions';
 
@@ -77,6 +78,9 @@ ReducerRegistry.register(
         case SET_FOLLOW_ME:
             return set(state, 'followMeEnabled', action.enabled);
 
+        case SET_START_REACTIONS_MUTED:
+            return set(state, 'startReactionsMuted', action.muted);
+
         case SET_LOCATION_URL:
             return set(state, 'room', undefined);
 

react/features/base/devices/middleware.js

@@ -2,7 +2,11 @@
 
 import UIEvents from '../../../../service/UI/UIEvents';
 import { processExternalDeviceRequest } from '../../device-selection';
-import { NOTIFICATION_TIMEOUT_TYPE, showNotification, showWarningNotification } from '../../notifications';
+import {
+    NOTIFICATION_TIMEOUT_TYPE,
+    showNotification,
+    showWarningNotification
+} from '../../notifications';
 import { replaceAudioTrackById, replaceVideoTrackById, setDeviceStatusWarning } from '../../prejoin/actions';
 import { isPrejoinPageVisible } from '../../prejoin/functions';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
@@ -294,8 +298,8 @@ function _checkAndNotifyForNewDevice(store, newDevices, oldDevices) {
             dispatch(showNotification({
                 description,
                 titleKey,
-                customActionNameKey: 'notify.newDeviceAction',
-                customActionHandler: _useDevice.bind(undefined, store, devicesArray)
+                customActionNameKey: [ 'notify.newDeviceAction' ],
+                customActionHandler: [ _useDevice.bind(undefined, store, devicesArray) ]
             }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
         }
     });

react/features/base/participants/middleware.js

@@ -555,8 +555,8 @@ function _raiseHandUpdated({ dispatch, getState }, conference, participantId, ne
     }
 
     const action = shouldDisplayAllowAction ? {
-        customActionNameKey: 'notify.allowAction',
-        customActionHandler: () => dispatch(approveParticipant(participantId))
+        customActionNameKey: [ 'notify.allowAction' ],
+        customActionHandler: [ () => dispatch(approveParticipant(participantId)) ]
     } : {};
 
     if (raisedHandTimestamp) {

react/features/base/settings/actionTypes.js

@@ -14,7 +14,8 @@
  *         serverURL: string,
  *         startAudioOnly: boolean,
  *         startWithAudioMuted: boolean,
- *         startWithVideoMuted: boolean
+ *         startWithVideoMuted: boolean,
+ *         startWithReactionsMuted: boolean
  *     }
  * }
  */

react/features/base/settings/actions.js

@@ -15,9 +15,11 @@ import { SETTINGS_UPDATED } from './actionTypes';
  *         localFlipX: boolean,
  *         micDeviceId: string,
  *         serverURL: string,
+ *         soundsReactions: boolean,
  *         startAudioOnly: boolean,
  *         startWithAudioMuted: boolean,
- *         startWithVideoMuted: boolean
+ *         startWithVideoMuted: boolean,
+ *         startWithReactionsMuted: boolean
  *     }
  * }}
  */

react/features/no-audio-signal/middleware.js

@@ -94,8 +94,8 @@ async function _handleNoAudioSignalNotification({ dispatch, getState }, action)
             // at the point of the implementation the showNotification function only supports doing that for
             // the description.
             // TODO Add support for arguments to showNotification title and customAction strings.
-            customActionNameKey = `Switch to ${formatDeviceLabel(activeDevice.deviceLabel)}`;
-            customActionHandler = () => {
+            customActionNameKey = [ `Switch to ${formatDeviceLabel(activeDevice.deviceLabel)}` ];
+            customActionHandler = [ () => {
                 // Select device callback
                 dispatch(
                         updateSettings({
@@ -105,7 +105,7 @@ async function _handleNoAudioSignalNotification({ dispatch, getState }, action)
                 );
 
                 dispatch(setAudioInputDevice(activeDevice.deviceId));
-            };
+            } ];
         }
 
         const notification = await dispatch(showNotification({

react/features/notifications/components/AbstractNotification.js

@@ -20,12 +20,12 @@ export type Props = {
     /**
      * Callback invoked when the custom button is clicked.
      */
-    customActionHandler: Function,
+    customActionHandler: Function[],
 
     /**
      * The text to display as button in the notification for the custom action.
      */
-    customActionNameKey: string,
+    customActionNameKey: string[],
 
     /**
      * The text to display in the body of the notification. If not passed

react/features/notifications/components/web/Notification.js

@@ -128,17 +128,17 @@ class Notification extends AbstractNotification<Props> {
             ];
 
         default:
-            if (this.props.customActionNameKey && this.props.customActionHandler) {
-                return [
-                    {
-                        content: this.props.t(this.props.customActionNameKey),
+            if (this.props.customActionNameKey?.length && this.props.customActionHandler?.length) {
+                return this.props.customActionNameKey.map((customAction: string, customActionIndex: number) => {
+                    return {
+                        content: this.props.t(customAction),
                         onClick: () => {
-                            if (this.props.customActionHandler()) {
+                            if (this.props.customActionHandler[customActionIndex]()) {
                                 this._onDismissed();
                             }
                         }
-                    }
-                ];
+                    };
+                });
             }
 
             return [];

react/features/participants-pane/components/web/FooterContextMenu.js

@@ -17,12 +17,17 @@ import {
 } from '../../../av-moderation/functions';
 import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
 import { openDialog } from '../../../base/dialog';
-import { IconCheck, IconVideoOff } from '../../../base/icons';
+import {
+    IconCheck,
+    IconHorizontalPoints,
+    IconVideoOff
+} from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
 import {
     getParticipantCount,
     isEveryoneModerator
 } from '../../../base/participants';
+import { openSettingsDialog, SETTINGS_TABS } from '../../../settings';
 import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
 
 const useStyles = makeStyles(theme => {
@@ -95,6 +100,8 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
     const muteAllVideo = useCallback(
         () => dispatch(openDialog(MuteEveryonesVideoDialog)), [ dispatch ]);
 
+    const openModeratorSettings = () => dispatch(openSettingsDialog(SETTINGS_TABS.MODERATOR));
+
     const actions = [
         {
             accessibilityLabel: t('participantsPane.actions.audioModeration'),
@@ -139,6 +146,14 @@ export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props
                     </div>
                 </ContextMenuItemGroup>
             )}
+            <ContextMenuItemGroup
+                actions = { [ {
+                    accessibilityLabel: t('participantsPane.actions.moreModerationControls'),
+                    id: 'participants-pane-open-moderation-control-settings',
+                    icon: IconHorizontalPoints,
+                    onClick: openModeratorSettings,
+                    text: t('participantsPane.actions.moreModerationControls')
+                } ] } />
         </ContextMenu>
     );
 };

react/features/reactions/constants.js

@@ -14,6 +14,13 @@ import {
  */
 export const ENDPOINT_REACTION_NAME = 'endpoint-reaction';
 
+/**
+ * The (name of the) command which transports the state (represented by
+ * {State} for the local state at the time of this writing) of a {MuteReactions}
+ * (instance) between moderator and participants.
+ */
+export const MUTE_REACTIONS_COMMAND = 'mute-reactions';
+
 /**
  * The prefix for all reaction sound IDs. Also the ID used in config to disable reaction sounds.
  */