feat(av-moderation) Updated Advanced moderation (#9875)

Co-authored-by: Vlad Piersec <vlad.piersec@8x8.com>

css/_participants-pane.scss

@@ -29,7 +29,7 @@
     margin: 8px 16px 8px 0;
 }
 
-@media (max-width: 375px) {
+@media (max-width: 580px) {
     .participants_pane {
         height: 100vh;
         height: -webkit-fill-available;

css/main.scss

@@ -98,6 +98,7 @@ $flagsImagePath: "../images/";
 @import 'country-picker';
 @import 'modals/invite/invite_more';
 @import 'modals/security/security';
+@import 'modals/mute/mute-dialog';
 @import 'e2ee';
 @import 'responsive';
 @import 'drawer';

css/modals/mute/_mute-dialog.scss

@@ -0,0 +1,19 @@
+.mute-dialog {
+	.separator-line {
+        margin: 24px 0 24px -20px;
+        padding: 0 20px;
+        width: 100%;
+        height: 1px;
+        background: #5E6D7A;
+    }
+
+	.control-row {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 15px;
+
+        label {
+            font-size: 14px;
+        }
+    }
+}

lang/main.json

@@ -216,8 +216,8 @@
         "embedMeeting": "Embed meeting",
         "error": "Error",
         "gracefulShutdown": "Our service is currently down for maintenance. Please try again later.",
-        "grantModeratorDialog": "Are you sure you want to make this participant a moderator?",
-        "grantModeratorTitle": "Grant moderator",
+        "grantModeratorDialog": "Are you sure you want to grant moderator rights to {{participantName}}?",
+        "grantModeratorTitle": "Grant moderator rights",
         "hideShareAudioHelper": "Don't show this dialog again",
         "IamHost": "I am the host",
         "incorrectRoomLockPassword": "Incorrect password",
@@ -247,23 +247,27 @@
         "micPermissionDeniedError": "You have not granted permission to use your microphone. You can still join the conference but others won't hear you. Use the camera button in the address bar to fix this.",
         "micTimeoutError": "Could not start audio source. Timeout occured!",
         "micUnknownError": "Cannot use microphone for an unknown reason.",
+        "moderationAudioLabel": "Allow attendees to unmute themselves",
+        "moderationVideoLabel": "Allow attendees to start their video",
         "muteEveryoneElseDialog": "Once muted, you won't be able to unmute them, but they can unmute themselves at any time.",
         "muteEveryoneElseTitle": "Mute everyone except {{whom}}?",
-        "muteEveryoneDialog": "Are you sure you want to mute everyone? You won't be able to unmute them, but they can unmute themselves at any time.",
+        "muteEveryoneDialog": "The participants can unmute themselves at any time.",
+        "muteEveryoneDialogModerationOn": "The participants can send a request to speak at any time.",
         "muteEveryoneTitle": "Mute everyone?",
         "muteEveryoneElsesVideoDialog": "Once the camera is disabled, you won't be able to turn it back on, but they can turn it back on at any time.",
-        "muteEveryoneElsesVideoTitle": "Disable everyone's camera except {{whom}}?",
-        "muteEveryonesVideoDialog": "Are you sure you want to disable everyone's camera? You won't be able to turn it back on, but they can turn it back on at any time.",
+        "muteEveryoneElsesVideoTitle": "Stop everyone's video except {{whom}}?",
+        "muteEveryonesVideoDialog": "The participants can turn on their video at any time.",
+        "muteEveryonesVideoDialogModerationOn": "The participants can send a request to turn on their video at any time.",
         "muteEveryonesVideoDialogOk": "Disable",
-        "muteEveryonesVideoTitle": "Disable everyone's camera?",
+        "muteEveryonesVideoTitle": "Stop everyone's video?",
         "muteEveryoneSelf": "yourself",
         "muteEveryoneStartMuted": "Everyone starts muted from now on",
         "muteParticipantBody": "You won't be able to unmute them, but they can unmute themselves at any time.",
         "muteParticipantButton": "Mute",
         "muteParticipantDialog": "Are you sure you want to mute this participant? You won't be able to unmute them, but they can unmute themselves at any time.",
         "muteParticipantsVideoDialog": "Are you sure you want to turn off this participant's camera? You won't be able to turn the camera back on, but they can turn it back on at any time.",
         "muteParticipantTitle": "Mute this participant?",
-        "muteParticipantsVideoButton": "Disable camera",
+        "muteParticipantsVideoButton": "Stop camera",
         "muteParticipantsVideoTitle": "Disable camera of this participant?",
         "muteParticipantsVideoBody": "You won't be able to turn the camera back on, but they can turn it back on at any time.",
         "noDropboxToken": "No valid Dropbox token",
@@ -542,29 +546,30 @@
     "lockRoomPasswordUppercase": "Password",
     "me": "me",
     "notify": {
+        "allowAction": "Allow",
+        "allowedUnmute": "You can unmute your microphone, start your camera or share your screen.",
         "connectedOneMember": "{{name}} joined the meeting",
         "connectedThreePlusMembers": "{{name}} and many others joined the meeting",
         "connectedTwoMembers": "{{first}} and {{second}} joined the meeting",
         "disconnected": "disconnected",
         "focus": "Conference focus",
         "focusFail": "{{component}} not available - retry in {{ms}} sec",
-        "grantedTo": "Moderator rights granted to {{to}}!",
-        "hostAskedUnmute": "The host would like you to unmute",
+        "hostAskedUnmute": "The moderator would like you to speak",
         "invitedOneMember": "{{name}} has been invited",
         "invitedThreePlusMembers": "{{name}} and {{count}} others have been invited",
         "invitedTwoMembers": "{{first}} and {{second}} have been invited",
         "kickParticipant": "{{kicked}} was kicked by {{kicker}}",
         "me": "Me",
-        "moderator": "Moderator rights granted!",
+        "moderator": "You're now a moderator",
         "muted": "You have started the conversation muted.",
         "mutedTitle": "You're muted!",
-        "mutedRemotelyTitle": "You have been muted by {{participantDisplayName}}!",
+        "mutedRemotelyTitle": "You've been muted by the moderator",
         "mutedRemotelyDescription": "You can always unmute when you're ready to speak. Mute back when you're done to keep noise away from the meeting.",
-        "videoMutedRemotelyTitle": "Your camera has been disabled by {{participantDisplayName}}!",
+        "videoMutedRemotelyTitle": "Your camera has been turned off by the moderator",
         "videoMutedRemotelyDescription": "You can always turn it on again.",
         "passwordRemovedRemotely": "$t(lockRoomPasswordUppercase) removed by another participant",
         "passwordSetRemotely": "$t(lockRoomPasswordUppercase) set by another participant",
-        "raisedHand": "{{name}} would like to speak.",
+        "raisedHand": "Would like to speak.",
         "screenShareNoAudio": " Share audio box was not checked in the window selection screen.",
         "screenShareNoAudioTitle": "Couldn't share system audio!",
         "somebody": "Somebody",
@@ -580,12 +585,12 @@
         "oldElectronClientDescription1": "You appear to be using an old version of the Jitsi Meet client which has known security vulnerabilities. Please make sure you update to our ",
         "oldElectronClientDescription2": "latest build",
         "oldElectronClientDescription3": " now!",
-        "moderationInEffectDescription": "Please raise hand if you want to speak",
-        "moderationInEffectCSDescription": "Please raise hand if you want to share your video",
-        "moderationInEffectVideoDescription": "Please raise your hand if you want your video to be visible",
-        "moderationInEffectTitle": "The microphone is muted by the moderator",
-        "moderationInEffectCSTitle": "Content sharing is disabled by moderator",
-        "moderationInEffectVideoTitle": "The video is muted by the moderator",
+        "moderationInEffectDescription": "Please raise hand if you want to speak.",
+        "moderationInEffectCSDescription": "Please raise hand if you want to share your screen.",
+        "moderationInEffectVideoDescription": "Please raise your hand if you want to start your camera.",
+        "moderationInEffectTitle": "Your microphone is muted by the moderator",
+        "moderationInEffectCSTitle": "Screen sharing is blocked by the moderator",
+        "moderationInEffectVideoTitle": "Your camera is blocked by the moderator",
         "moderationRequestFromModerator": "The host would like you to unmute",
         "moderationRequestFromParticipant": "Wants to speak",
         "moderationStartedTitle": "Moderation started",
@@ -605,16 +610,17 @@
         },
         "actions": {
             "allow": "Allow attendees to:",
+            "audioModeration": "Unmute themselves",
             "blockEveryoneMicCamera": "Block everyone's mic and camera",
             "invite": "Invite Someone",
             "askUnmute": "Ask to unmute",
             "mute": "Mute",
             "muteAll": "Mute all",
             "muteEveryoneElse": "Mute everyone else",
-            "startModeration": "Unmute themselves or start video",
             "stopEveryonesVideo": "Stop everyone's video",
             "stopVideo": "Stop video",
-            "unblockEveryoneMicCamera": "Unblock everyone's mic and camera"
+            "unblockEveryoneMicCamera": "Unblock everyone's mic and camera",
+            "videoModeration": "Start video"
         }
     },
     "passwordSetRemotely": "Set by another participant",
@@ -868,7 +874,7 @@
             "embedMeeting": "Embed meeting",
             "feedback": "Leave feedback",
             "fullScreen": "Toggle full screen",
-            "grantModerator": "Grant Moderator",
+            "grantModerator": "Grant Moderator Rights",
             "hangup": "Leave the meeting",
             "help": "Help",
             "invite": "Invite people",
@@ -1054,7 +1060,7 @@
         "domuteOthers": "Mute everyone else",
         "domuteVideoOfOthers": "Disable camera of everyone else",
         "flip": "Flip",
-        "grantModerator": "Grant Moderator",
+        "grantModerator": "Grant Moderator Rights",
         "kick": "Kick out",
         "moderator": "Moderator",
         "mute": "Participant is muted",

package.json

@@ -47,6 +47,7 @@
     "base64-js": "1.3.1",
     "bc-css-flags": "3.0.0",
     "clipboard-copy": "4.0.1",
+    "clsx": "1.1.1",
     "dropbox": "10.7.0",
     "focus-visible": "5.1.0",
     "i18n-iso-countries": "6.8.0",

react/features/av-moderation/actionTypes.js

@@ -29,22 +29,40 @@ export const ENABLE_MODERATION = 'ENABLE_MODERATION';
 
 
 /**
- * The type of (redux) action which signals that A/V Moderation disable has been requested.
+ * The type of (redux) action which signals that Audio Moderation disable has been requested.
  *
  * {
- *     type: REQUEST_DISABLE_MODERATION
+ *     type: REQUEST_DISABLE_AUDIO_MODERATION
  * }
  */
-export const REQUEST_DISABLE_MODERATION = 'REQUEST_DISABLE_MODERATION';
+export const REQUEST_DISABLE_AUDIO_MODERATION = 'REQUEST_DISABLE_AUDIO_MODERATION';
 
 /**
- * The type of (redux) action which signals that A/V Moderation enable has been requested.
+ * The type of (redux) action which signals that Video Moderation disable has been requested.
  *
  * {
- *     type: REQUEST_ENABLE_MODERATION
+ *     type: REQUEST_DISABLE_VIDEO_MODERATION
  * }
  */
-export const REQUEST_ENABLE_MODERATION = 'REQUEST_ENABLE_MODERATION';
+export const REQUEST_DISABLE_VIDEO_MODERATION = 'REQUEST_DISABLE_VIDEO_MODERATION';
+
+/**
+ * The type of (redux) action which signals that Audio Moderation enable has been requested.
+ *
+ * {
+ *     type: REQUEST_ENABLE_AUDIO_MODERATION
+ * }
+ */
+export const REQUEST_ENABLE_AUDIO_MODERATION = 'REQUEST_ENABLE_AUDIO_MODERATION';
+
+/**
+ * The type of (redux) action which signals that Video Moderation enable has been requested.
+ *
+ * {
+ *     type: REQUEST_ENABLE_VIDEO_MODERATION
+ * }
+ */
+export const REQUEST_ENABLE_VIDEO_MODERATION = 'REQUEST_ENABLE_VIDEO_MODERATION';
 
 /**
  * The type of (redux) action which signals that the local participant had been approved.

react/features/av-moderation/actions.js

@@ -11,9 +11,12 @@ import {
     LOCAL_PARTICIPANT_MODERATION_NOTIFICATION,
     PARTICIPANT_APPROVED,
     PARTICIPANT_PENDING_AUDIO,
-    REQUEST_DISABLE_MODERATION,
-    REQUEST_ENABLE_MODERATION
+    REQUEST_DISABLE_AUDIO_MODERATION,
+    REQUEST_ENABLE_AUDIO_MODERATION,
+    REQUEST_DISABLE_VIDEO_MODERATION,
+    REQUEST_ENABLE_VIDEO_MODERATION
 } from './actionTypes';
+import { isEnabledFromState } from './functions';
 
 /**
  * Action used by moderator to approve audio and video for a participant.
@@ -22,10 +25,15 @@ import {
  * @returns {void}
  */
 export const approveParticipant = (id: string) => (dispatch: Function, getState: Function) => {
-    const { conference } = getConferenceState(getState());
+    const state = getState();
+    const { conference } = getConferenceState(state);
 
-    conference.avModerationApprove(MEDIA_TYPE.AUDIO, id);
-    conference.avModerationApprove(MEDIA_TYPE.VIDEO, id);
+    if (isEnabledFromState(MEDIA_TYPE.AUDIO, state)) {
+        conference.avModerationApprove(MEDIA_TYPE.AUDIO, id);
+    }
+    if (isEnabledFromState(MEDIA_TYPE.VIDEO, state)) {
+        conference.avModerationApprove(MEDIA_TYPE.VIDEO, id);
+    }
 };
 
 /**
@@ -89,28 +97,54 @@ export const enableModeration = (mediaType: MediaType, actor: Object) => {
 };
 
 /**
- * Requests disable of audio and video moderation.
+ * Requests disable of audio moderation.
  *
  * @returns {{
- *     type: REQUEST_DISABLE_MODERATED_AUDIO
+ *     type: REQUEST_DISABLE_AUDIO_MODERATION
  * }}
  */
-export const requestDisableModeration = () => {
+export const requestDisableAudioModeration = () => {
     return {
-        type: REQUEST_DISABLE_MODERATION
+        type: REQUEST_DISABLE_AUDIO_MODERATION
     };
 };
 
 /**
- * Requests enabled audio & video moderation.
+ * Requests disable of video moderation.
  *
  * @returns {{
- *     type: REQUEST_ENABLE_MODERATED_AUDIO
+ *     type: REQUEST_DISABLE_VIDEO_MODERATION
+ * }}
+ */
+export const requestDisableVideoModeration = () => {
+    return {
+        type: REQUEST_DISABLE_VIDEO_MODERATION
+    };
+};
+
+/**
+ * Requests enable of audio moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_ENABLE_AUDIO_MODERATION
+ * }}
+ */
+export const requestEnableAudioModeration = () => {
+    return {
+        type: REQUEST_ENABLE_AUDIO_MODERATION
+    };
+};
+
+/**
+ * Requests enable of video moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_ENABLE_VIDEO_MODERATION
  * }}
  */
-export const requestEnableModeration = () => {
+export const requestEnableVideoModeration = () => {
     return {
-        type: REQUEST_ENABLE_MODERATION
+        type: REQUEST_ENABLE_VIDEO_MODERATION
     };
 };