init

react/features/av-moderation/actionTypes.ts

@@ -0,0 +1,144 @@
+/**
+ * The type of (redux) action which signals that A/V Moderation had been disabled.
+ *
+ * {
+ *     type: DISABLE_MODERATION
+ * }
+ */
+export const DISABLE_MODERATION = 'DISABLE_MODERATION';
+
+/**
+ * The type of (redux) action which signals that the notification for audio/video unmute should
+ * be dismissed.
+ *
+ * {
+ *     type: DISMISS_PARTICIPANT_PENDING_AUDIO
+ * }
+ */
+export const DISMISS_PENDING_PARTICIPANT = 'DISMISS_PENDING_PARTICIPANT';
+
+
+/**
+ * The type of (redux) action which signals that A/V Moderation had been enabled.
+ *
+ * {
+ *     type: ENABLE_MODERATION
+ * }
+ */
+export const ENABLE_MODERATION = 'ENABLE_MODERATION';
+
+
+/**
+ * The type of (redux) action which signals that Audio Moderation disable has been requested.
+ *
+ * {
+ *     type: REQUEST_DISABLE_AUDIO_MODERATION
+ * }
+ */
+export const REQUEST_DISABLE_AUDIO_MODERATION = 'REQUEST_DISABLE_AUDIO_MODERATION';
+
+/**
+ * The type of (redux) action which signals that Desktop Moderation disable has been requested.
+ *
+ * {
+ *     type: REQUEST_DISABLE_DESKTOP_MODERATION
+ * }
+ */
+export const REQUEST_DISABLE_DESKTOP_MODERATION = 'REQUEST_DISABLE_DESKTOP_MODERATION';
+
+/**
+ * The type of (redux) action which signals that Video Moderation disable has been requested.
+ *
+ * {
+ *     type: REQUEST_DISABLE_VIDEO_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 Desktop Moderation enable has been requested.
+ *
+ * {
+ *     type: REQUEST_ENABLE_DESKTOP_MODERATION
+ * }
+ */
+export const REQUEST_ENABLE_DESKTOP_MODERATION = 'REQUEST_ENABLE_DESKTOP_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.
+ *
+ * {
+ *     type: LOCAL_PARTICIPANT_APPROVED,
+ *     mediaType: MediaType
+ * }
+ */
+export const LOCAL_PARTICIPANT_APPROVED = 'LOCAL_PARTICIPANT_APPROVED';
+
+/**
+ * The type of (redux) action which signals that the local participant had been blocked.
+ *
+ * {
+ *     type: LOCAL_PARTICIPANT_REJECTED,
+ *     mediaType: MediaType
+ * }
+ */
+export const LOCAL_PARTICIPANT_REJECTED = 'LOCAL_PARTICIPANT_REJECTED';
+
+/**
+ * The type of (redux) action which signals to show notification to the local participant.
+ *
+ * {
+ *     type: LOCAL_PARTICIPANT_MODERATION_NOTIFICATION
+ * }
+ */
+export const LOCAL_PARTICIPANT_MODERATION_NOTIFICATION = 'LOCAL_PARTICIPANT_MODERATION_NOTIFICATION';
+
+/**
+ * The type of (redux) action which signals that a participant was approved for a media type.
+ *
+ * {
+ *     type: PARTICIPANT_APPROVED,
+ *     mediaType: MediaType
+ *     participantId: String
+ * }
+ */
+export const PARTICIPANT_APPROVED = 'PARTICIPANT_APPROVED';
+
+/**
+ * The type of (redux) action which signals that a participant was blocked for a media type.
+ *
+ * {
+ *     type: PARTICIPANT_REJECTED,
+ *     mediaType: MediaType
+ *     participantId: String
+ * }
+ */
+export const PARTICIPANT_REJECTED = 'PARTICIPANT_REJECTED';
+
+
+/**
+ * The type of (redux) action which signals that a participant asked to have its audio unmuted.
+ *
+ * {
+ *     type: PARTICIPANT_PENDING_AUDIO
+ * }
+ */
+export const PARTICIPANT_PENDING_AUDIO = 'PARTICIPANT_PENDING_AUDIO';

react/features/av-moderation/actions.ts

@@ -0,0 +1,386 @@
+import { batch } from 'react-redux';
+
+import { IStore } from '../app/types';
+import { getConferenceState } from '../base/conference/functions';
+import { getParticipantById, isParticipantModerator } from '../base/participants/functions';
+import { IParticipant } from '../base/participants/types';
+
+import {
+    DISABLE_MODERATION,
+    DISMISS_PENDING_PARTICIPANT,
+    ENABLE_MODERATION,
+    LOCAL_PARTICIPANT_APPROVED,
+    LOCAL_PARTICIPANT_MODERATION_NOTIFICATION,
+    LOCAL_PARTICIPANT_REJECTED,
+    PARTICIPANT_APPROVED,
+    PARTICIPANT_PENDING_AUDIO,
+    PARTICIPANT_REJECTED,
+    REQUEST_DISABLE_AUDIO_MODERATION,
+    REQUEST_DISABLE_DESKTOP_MODERATION,
+    REQUEST_DISABLE_VIDEO_MODERATION,
+    REQUEST_ENABLE_AUDIO_MODERATION,
+    REQUEST_ENABLE_DESKTOP_MODERATION,
+    REQUEST_ENABLE_VIDEO_MODERATION
+} from './actionTypes';
+import { MEDIA_TYPE, type MediaType } from './constants';
+import { isEnabledFromState, isForceMuted } from './functions';
+
+/**
+ * Action used by moderator to approve audio for a participant.
+ *
+ * @param {staring} id - The id of the participant to be approved.
+ * @returns {void}
+ */
+export const approveParticipantAudio = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const participant = getParticipantById(state, id);
+
+    const isAudioModerationOn = isEnabledFromState(MEDIA_TYPE.AUDIO, state);
+    const isVideoModerationOn = isEnabledFromState(MEDIA_TYPE.VIDEO, state);
+    const isVideoForceMuted = isForceMuted(participant, MEDIA_TYPE.VIDEO, state);
+
+    if (isAudioModerationOn || !isVideoModerationOn || !isVideoForceMuted) {
+        conference?.avModerationApprove(MEDIA_TYPE.AUDIO, id);
+    }
+};
+
+/**
+ * Action used by moderator to approve desktop for a participant.
+ *
+ * @param {staring} id - The id of the participant to be approved.
+ * @returns {void}
+ */
+export const approveParticipantDesktop = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const participant = getParticipantById(state, id);
+
+    const isDesktopForceMuted = isForceMuted(participant, MEDIA_TYPE.DESKTOP, state);
+    const isDesktopModerationOn = isEnabledFromState(MEDIA_TYPE.DESKTOP, state);
+
+    if (isDesktopModerationOn && isDesktopForceMuted) {
+        conference?.avModerationApprove(MEDIA_TYPE.DESKTOP, id);
+    }
+};
+
+/**
+ * Action used by moderator to approve video for a participant.
+ *
+ * @param {staring} id - The id of the participant to be approved.
+ * @returns {void}
+ */
+export const approveParticipantVideo = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const participant = getParticipantById(state, id);
+
+    const isVideoForceMuted = isForceMuted(participant, MEDIA_TYPE.VIDEO, state);
+    const isVideoModerationOn = isEnabledFromState(MEDIA_TYPE.VIDEO, state);
+
+    if (isVideoModerationOn && isVideoForceMuted) {
+        conference?.avModerationApprove(MEDIA_TYPE.VIDEO, id);
+    }
+};
+
+/**
+ * Action used by moderator to approve audio and video for a participant.
+ *
+ * @param {staring} id - The id of the participant to be approved.
+ * @returns {void}
+ */
+export const approveParticipant = (id: string) => (dispatch: IStore['dispatch']) => {
+    batch(() => {
+        dispatch(approveParticipantAudio(id));
+        dispatch(approveParticipantDesktop(id));
+        dispatch(approveParticipantVideo(id));
+    });
+};
+
+/**
+ * Action used by moderator to reject audio for a participant.
+ *
+ * @param {staring} id - The id of the participant to be rejected.
+ * @returns {void}
+ */
+export const rejectParticipantAudio = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const audioModeration = isEnabledFromState(MEDIA_TYPE.AUDIO, state);
+
+    const participant = getParticipantById(state, id);
+    const isAudioForceMuted = isForceMuted(participant, MEDIA_TYPE.AUDIO, state);
+    const isModerator = isParticipantModerator(participant);
+
+    if (audioModeration && !isAudioForceMuted && !isModerator) {
+        conference?.avModerationReject(MEDIA_TYPE.AUDIO, id);
+    }
+};
+
+/**
+ * Action used by moderator to reject desktop for a participant.
+ *
+ * @param {staring} id - The id of the participant to be rejected.
+ * @returns {void}
+ */
+export const rejectParticipantDesktop = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const desktopModeration = isEnabledFromState(MEDIA_TYPE.DESKTOP, state);
+
+    const participant = getParticipantById(state, id);
+    const isDesktopForceMuted = isForceMuted(participant, MEDIA_TYPE.DESKTOP, state);
+    const isModerator = isParticipantModerator(participant);
+
+    if (desktopModeration && !isDesktopForceMuted && !isModerator) {
+        conference?.avModerationReject(MEDIA_TYPE.DESKTOP, id);
+    }
+};
+
+/**
+ * Action used by moderator to reject video for a participant.
+ *
+ * @param {staring} id - The id of the participant to be rejected.
+ * @returns {void}
+ */
+export const rejectParticipantVideo = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const videoModeration = isEnabledFromState(MEDIA_TYPE.VIDEO, state);
+
+    const participant = getParticipantById(state, id);
+    const isVideoForceMuted = isForceMuted(participant, MEDIA_TYPE.VIDEO, state);
+    const isModerator = isParticipantModerator(participant);
+
+    if (videoModeration && !isVideoForceMuted && !isModerator) {
+        conference?.avModerationReject(MEDIA_TYPE.VIDEO, id);
+    }
+};
+
+/**
+ * Audio or video moderation is disabled.
+ *
+ * @param {MediaType} mediaType - The media type that was disabled.
+ * @param {JitsiParticipant} actor - The actor disabling.
+ * @returns {{
+ *     type: REQUEST_DISABLE_MODERATED_AUDIO
+ * }}
+ */
+export const disableModeration = (mediaType: MediaType, actor: Object) => {
+    return {
+        type: DISABLE_MODERATION,
+        mediaType,
+        actor
+    };
+};
+
+
+/**
+ * Hides the notification with the participant that asked to unmute audio.
+ *
+ * @param {IParticipant} participant - The participant for which the notification to be hidden.
+ * @returns {Object}
+ */
+export function dismissPendingAudioParticipant(participant: IParticipant) {
+    return dismissPendingParticipant(participant.id, MEDIA_TYPE.AUDIO);
+}
+
+/**
+ * Hides the notification with the participant that asked to unmute.
+ *
+ * @param {string} id - The participant id for which the notification to be hidden.
+ * @param {MediaType} mediaType - The media type.
+ * @returns {Object}
+ */
+export function dismissPendingParticipant(id: string, mediaType: MediaType) {
+    return {
+        type: DISMISS_PENDING_PARTICIPANT,
+        id,
+        mediaType
+    };
+}
+
+/**
+ * Audio or video moderation is enabled.
+ *
+ * @param {MediaType} mediaType - The media type that was enabled.
+ * @param {JitsiParticipant} actor - The actor enabling.
+ * @returns {{
+ *     type: REQUEST_ENABLE_MODERATED_AUDIO
+ * }}
+ */
+export const enableModeration = (mediaType: MediaType, actor: Object) => {
+    return {
+        type: ENABLE_MODERATION,
+        mediaType,
+        actor
+    };
+};
+
+/**
+ * Requests disable of audio moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_DISABLE_AUDIO_MODERATION
+ * }}
+ */
+export const requestDisableAudioModeration = () => {
+    return {
+        type: REQUEST_DISABLE_AUDIO_MODERATION
+    };
+};
+
+/**
+ * Requests disable of video moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_DISABLE_DESKTOP_MODERATION
+ * }}
+ */
+export const requestDisableDesktopModeration = () => {
+    return {
+        type: REQUEST_DISABLE_DESKTOP_MODERATION
+    };
+};
+
+/**
+ * Requests disable of video moderation.
+ *
+ * @returns {{
+ *     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_DESKTOP_MODERATION
+ * }}
+ */
+export const requestEnableDesktopModeration = () => {
+    return {
+        type: REQUEST_ENABLE_DESKTOP_MODERATION
+    };
+};
+
+/**
+ * Requests enable of video moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_ENABLE_VIDEO_MODERATION
+ * }}
+ */
+export const requestEnableVideoModeration = () => {
+    return {
+        type: REQUEST_ENABLE_VIDEO_MODERATION
+    };
+};
+
+/**
+ * Local participant was approved to be able to unmute audio and video.
+ *
+ * @param {MediaType} mediaType - The media type to disable.
+ * @returns {{
+ *     type: LOCAL_PARTICIPANT_APPROVED
+ * }}
+ */
+export const localParticipantApproved = (mediaType: MediaType) => {
+    return {
+        type: LOCAL_PARTICIPANT_APPROVED,
+        mediaType
+    };
+};
+
+/**
+ * Local participant was blocked to be able to unmute audio and video.
+ *
+ * @param {MediaType} mediaType - The media type to disable.
+ * @returns {{
+ *     type: LOCAL_PARTICIPANT_REJECTED
+ * }}
+ */
+export const localParticipantRejected = (mediaType: MediaType) => {
+    return {
+        type: LOCAL_PARTICIPANT_REJECTED,
+        mediaType
+    };
+};
+
+/**
+ * Shows notification when A/V moderation is enabled and local participant is still not approved.
+ *
+ * @param {MediaType} mediaType - Audio or video media type.
+ * @returns {Object}
+ */
+export function showModeratedNotification(mediaType: MediaType) {
+    return {
+        type: LOCAL_PARTICIPANT_MODERATION_NOTIFICATION,
+        mediaType
+    };
+}
+
+/**
+ * Shows a notification with the participant that asked to audio unmute.
+ *
+ * @param {IParticipant} participant - The participant for which is the notification.
+ * @returns {Object}
+ */
+export function participantPendingAudio(participant: IParticipant) {
+    return {
+        type: PARTICIPANT_PENDING_AUDIO,
+        participant
+    };
+}
+
+/**
+ * A participant was approved to unmute for a mediaType.
+ *
+ * @param {string} id - The id of the approved participant.
+ * @param {MediaType} mediaType - The media type which was approved.
+ * @returns {{
+ *     type: PARTICIPANT_APPROVED,
+ * }}
+ */
+export function participantApproved(id: string, mediaType: MediaType) {
+    return {
+        type: PARTICIPANT_APPROVED,
+        id,
+        mediaType
+    };
+}
+
+/**
+ * A participant was blocked to unmute for a mediaType.
+ *
+ * @param {string} id - The id of the approved participant.
+ * @param {MediaType} mediaType - The media type which was approved.
+ * @returns {{
+ *     type: PARTICIPANT_REJECTED,
+ * }}
+ */
+export function participantRejected(id: string, mediaType: MediaType) {
+    return {
+        type: PARTICIPANT_REJECTED,
+        id,
+        mediaType
+    };
+}

react/features/av-moderation/constants.ts

@@ -0,0 +1,51 @@
+export type MediaType = 'audio' | 'video' | 'desktop';
+
+/**
+ * The set of media types for AV moderation.
+ *
+ * @enum {string}
+ */
+export const MEDIA_TYPE: {
+    AUDIO: MediaType;
+    DESKTOP: MediaType;
+    VIDEO: MediaType;
+} = {
+    AUDIO: 'audio',
+    DESKTOP: 'desktop',
+    VIDEO: 'video'
+};
+
+/**
+ * Mapping between a media type and the whitelist reducer key.
+ */
+export const MEDIA_TYPE_TO_WHITELIST_STORE_KEY: { [key: string]: string; } = {
+    [MEDIA_TYPE.AUDIO]: 'audioWhitelist',
+    [MEDIA_TYPE.DESKTOP]: 'desktopWhitelist',
+    [MEDIA_TYPE.VIDEO]: 'videoWhitelist'
+};
+
+/**
+ * Mapping between a media type and the pending reducer key.
+ */
+export const MEDIA_TYPE_TO_PENDING_STORE_KEY: { [key: string]: 'pendingAudio' | 'pendingDesktop' | 'pendingVideo'; } = {
+    [MEDIA_TYPE.AUDIO]: 'pendingAudio',
+    [MEDIA_TYPE.DESKTOP]: 'pendingDesktop',
+    [MEDIA_TYPE.VIDEO]: 'pendingVideo'
+};
+
+export const ASKED_TO_UNMUTE_NOTIFICATION_ID = 'asked-to-unmute';
+export const ASKED_TO_UNMUTE_SOUND_ID = 'ASKED_TO_UNMUTE_SOUND';
+
+export const AUDIO_MODERATION_NOTIFICATION_ID = 'audio-moderation';
+export const DESKTOP_MODERATION_NOTIFICATION_ID = 'desktop-moderation';
+export const VIDEO_MODERATION_NOTIFICATION_ID = 'video-moderation';
+
+export const AUDIO_RAISED_HAND_NOTIFICATION_ID = 'raise-hand-audio';
+export const DESKTOP_RAISED_HAND_NOTIFICATION_ID = 'raise-hand-desktop';
+export const VIDEO_RAISED_HAND_NOTIFICATION_ID = 'raise-hand-video';
+
+export const MODERATION_NOTIFICATIONS = {
+    [MEDIA_TYPE.AUDIO]: AUDIO_MODERATION_NOTIFICATION_ID,
+    [MEDIA_TYPE.DESKTOP]: DESKTOP_MODERATION_NOTIFICATION_ID,
+    [MEDIA_TYPE.VIDEO]: VIDEO_MODERATION_NOTIFICATION_ID
+};

react/features/av-moderation/functions.ts

@@ -0,0 +1,182 @@
+import { IReduxState } from '../app/types';
+import { isLocalParticipantModerator, isParticipantModerator } from '../base/participants/functions';
+import { IParticipant } from '../base/participants/types';
+import { isInBreakoutRoom } from '../breakout-rooms/functions';
+
+import {
+    MEDIA_TYPE,
+    MEDIA_TYPE_TO_PENDING_STORE_KEY,
+    MEDIA_TYPE_TO_WHITELIST_STORE_KEY,
+    MediaType
+} from './constants';
+
+/**
+ * Returns this feature's root state.
+ *
+ * @param {IReduxState} state - Global state.
+ * @returns {Object} Feature state.
+ */
+const getState = (state: IReduxState) => state['features/av-moderation'];
+
+/**
+ * We use to construct once the empty array so we can keep the same instance between calls
+ * of getParticipantsAskingToAudioUnmute.
+ *
+ * @type {any[]}
+ */
+const EMPTY_ARRAY: any[] = [];
+
+/**
+ * Returns whether moderation is enabled per media type.
+ *
+ * @param {MEDIA_TYPE} mediaType - The media type to check.
+ * @param {IReduxState} state - Global state.
+ * @returns {boolean}
+ */
+export const isEnabledFromState = (mediaType: MediaType, state: IReduxState) => {
+    switch (mediaType) {
+    case MEDIA_TYPE.AUDIO:
+        return getState(state)?.audioModerationEnabled === true;
+    case MEDIA_TYPE.DESKTOP:
+        return getState(state)?.desktopModerationEnabled === true;
+    case MEDIA_TYPE.VIDEO:
+        return getState(state)?.videoModerationEnabled === true;
+    default:
+        throw new Error(`Unknown media type: ${mediaType}`);
+    }
+};
+
+/**
+ * Returns whether moderation is enabled per media type.
+ *
+ * @param {MEDIA_TYPE} mediaType - The media type to check.
+ * @returns {boolean}
+ */
+export const isEnabled = (mediaType: MediaType) => (state: IReduxState) => isEnabledFromState(mediaType, state);
+
+/**
+ * Returns whether moderation is supported by the backend.
+ *
+ * @returns {boolean}
+ */
+export const isSupported = () => (state: IReduxState) => {
+    const { conference } = state['features/base/conference'];
+
+    return Boolean(!isInBreakoutRoom(state) && conference?.isAVModerationSupported());
+};
+
+/**
+ * Returns whether local participant is approved to unmute a media type.
+ *
+ * @param {MEDIA_TYPE} mediaType - The media type to check.
+ * @param {IReduxState} state - Global state.
+ * @returns {boolean}
+ */
+export const isLocalParticipantApprovedFromState = (mediaType: MediaType, state: IReduxState) => {
+    if (isLocalParticipantModerator(state)) {
+        return true;
+    }
+
+    switch (mediaType) {
+    case MEDIA_TYPE.AUDIO:
+        return getState(state).audioUnmuteApproved === true;
+    case MEDIA_TYPE.DESKTOP:
+        return getState(state).desktopUnmuteApproved === true;
+    case MEDIA_TYPE.VIDEO:
+        return getState(state).videoUnmuteApproved === true;
+    default:
+        throw new Error(`Unknown media type: ${mediaType}`);
+    }
+};
+
+/**
+ * Returns whether local participant is approved to unmute a media type.
+ *
+ * @param {MEDIA_TYPE} mediaType - The media type to check.
+ * @returns {boolean}
+ */
+export const isLocalParticipantApproved = (mediaType: MediaType) =>
+    (state: IReduxState) =>
+        isLocalParticipantApprovedFromState(mediaType, state);
+
+/**
+ * Returns a selector creator which determines if the participant is approved or not for a media type.
+ *
+ * @param {string} id - The participant id.
+ * @param {MEDIA_TYPE} mediaType - The media type to check.
+ * @returns {boolean}
+ */
+export const isParticipantApproved = (id: string, mediaType: MediaType) => (state: IReduxState) => {
+    const storeKey = MEDIA_TYPE_TO_WHITELIST_STORE_KEY[mediaType];
+
+    const avModerationState = getState(state);
+    const stateForMediaType = avModerationState[storeKey as keyof typeof avModerationState];
+
+    return Boolean(stateForMediaType && stateForMediaType[id as keyof typeof stateForMediaType]);
+};
+
+/**
+ * Returns a selector creator which determines if the participant is pending or not for a media type.
+ *
+ * @param {IParticipant} participant - The participant.
+ * @param {MEDIA_TYPE} mediaType - The media type to check.
+ * @returns {boolean}
+ */
+export const isParticipantPending = (participant: IParticipant, mediaType: MediaType) => (state: IReduxState) => {
+    const storeKey = MEDIA_TYPE_TO_PENDING_STORE_KEY[mediaType];
+    const arr = getState(state)[storeKey];
+
+    return Boolean(arr.find(pending => pending.id === participant.id));
+};
+
+/**
+ * Selector which returns a list with all the participants asking to audio unmute.
+ * This is visible only for the moderator.
+ *
+ * @param {Object} state - The global state.
+ * @returns {Array<Object>}
+ */
+export const getParticipantsAskingToAudioUnmute = (state: IReduxState) => {
+    if (isLocalParticipantModerator(state)) {
+        return getState(state).pendingAudio;
+    }
+
+    return EMPTY_ARRAY;
+};
+
+/**
+ * Returns true if a special notification can be displayed when a participant
+ * tries to unmute.
+ *
+ * @param {MediaType} mediaType - 'audio' or 'video' media type.
+ * @param {Object} state - The global state.
+ * @returns {boolean}
+ */
+export const shouldShowModeratedNotification = (mediaType: MediaType, state: IReduxState) =>
+    isEnabledFromState(mediaType, state)
+    && !isLocalParticipantApprovedFromState(mediaType, state);
+
+/**
+ * Checks if a participant is force muted.
+ *
+ * @param {IParticipant|undefined} participant - The participant.
+ * @param {MediaType} mediaType - The media type.
+ * @param {IReduxState} state - The redux state.
+ * @returns {MediaState}
+ */
+export function isForceMuted(participant: IParticipant | undefined, mediaType: MediaType, state: IReduxState) {
+    if (isEnabledFromState(mediaType, state)) {
+        if (participant?.local) {
+            return !isLocalParticipantApprovedFromState(mediaType, state);
+        }
+
+        // moderators cannot be force muted
+        if (isParticipantModerator(participant)) {
+            return false;
+        }
+
+        return !isParticipantApproved(participant?.id ?? '', mediaType)(state);
+    }
+
+    return false;
+}

react/features/av-moderation/middleware.ts

@@ -0,0 +1,317 @@
+import { batch } from 'react-redux';
+
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
+import { getConferenceState } from '../base/conference/functions';
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import { MEDIA_TYPE as TRACK_MEDIA_TYPE } from '../base/media/constants';
+import {
+    isAudioMuted,
+    isScreenshareMuted,
+    isVideoMuted
+} from '../base/media/functions';
+import { PARTICIPANT_UPDATED } from '../base/participants/actionTypes';
+import { raiseHand } from '../base/participants/actions';
+import {
+    getLocalParticipant,
+    getRemoteParticipants,
+    hasRaisedHand,
+    isLocalParticipantModerator,
+    isParticipantModerator
+} from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { playSound, registerSound, unregisterSound } from '../base/sounds/actions';
+import { hideNotification, showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+import { muteLocal } from '../video-menu/actions.any';
+
+import {
+    DISABLE_MODERATION,
+    ENABLE_MODERATION,
+    LOCAL_PARTICIPANT_APPROVED,
+    LOCAL_PARTICIPANT_MODERATION_NOTIFICATION,
+    LOCAL_PARTICIPANT_REJECTED,
+    PARTICIPANT_APPROVED,
+    PARTICIPANT_REJECTED,
+    REQUEST_DISABLE_AUDIO_MODERATION,
+    REQUEST_DISABLE_DESKTOP_MODERATION,
+    REQUEST_DISABLE_VIDEO_MODERATION,
+    REQUEST_ENABLE_AUDIO_MODERATION,
+    REQUEST_ENABLE_DESKTOP_MODERATION,
+    REQUEST_ENABLE_VIDEO_MODERATION
+} from './actionTypes';
+import {
+    disableModeration,
+    dismissPendingAudioParticipant,
+    dismissPendingParticipant,
+    enableModeration,
+    localParticipantApproved,
+    localParticipantRejected,
+    participantApproved,
+    participantPendingAudio,
+    participantRejected
+} from './actions';
+import {
+    ASKED_TO_UNMUTE_NOTIFICATION_ID,
+    ASKED_TO_UNMUTE_SOUND_ID,
+    AUDIO_MODERATION_NOTIFICATION_ID,
+    DESKTOP_MODERATION_NOTIFICATION_ID,
+    MEDIA_TYPE,
+    MediaType,
+    VIDEO_MODERATION_NOTIFICATION_ID,
+} from './constants';
+import {
+    isEnabledFromState,
+    isParticipantApproved,
+    isParticipantPending
+} from './functions';
+import { ASKED_TO_UNMUTE_FILE } from './sounds';
+
+MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
+    const { type } = action;
+    const { conference } = getConferenceState(getState());
+
+    switch (type) {
+    case APP_WILL_MOUNT: {
+        dispatch(registerSound(ASKED_TO_UNMUTE_SOUND_ID, ASKED_TO_UNMUTE_FILE));
+        break;
+    }
+    case APP_WILL_UNMOUNT: {
+        dispatch(unregisterSound(ASKED_TO_UNMUTE_SOUND_ID));
+        break;
+    }
+    case LOCAL_PARTICIPANT_MODERATION_NOTIFICATION: {
+        let descriptionKey;
+        let titleKey;
+        let uid = '';
+        const localParticipant = getLocalParticipant(getState);
+        const raisedHand = hasRaisedHand(localParticipant);
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO: {
+            titleKey = 'notify.moderationInEffectTitle';
+            uid = AUDIO_MODERATION_NOTIFICATION_ID;
+            break;
+        }
+        case MEDIA_TYPE.VIDEO: {
+            titleKey = 'notify.moderationInEffectVideoTitle';
+            uid = VIDEO_MODERATION_NOTIFICATION_ID;
+            break;
+        }
+        case MEDIA_TYPE.DESKTOP: {
+            titleKey = 'notify.moderationInEffectCSTitle';
+            uid = DESKTOP_MODERATION_NOTIFICATION_ID;
+            break;
+        }
+        }
+
+        dispatch(showNotification({
+            customActionNameKey: [ 'notify.raiseHandAction' ],
+            customActionHandler: [ () => batch(() => {
+                !raisedHand && dispatch(raiseHand(true));
+                dispatch(hideNotification(uid));
+            }) ],
+            descriptionKey,
+            sticky: true,
+            titleKey,
+            uid
+        }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+
+        break;
+    }
+    case REQUEST_DISABLE_AUDIO_MODERATION: {
+        conference?.disableAVModeration(MEDIA_TYPE.AUDIO);
+        break;
+    }
+    case REQUEST_DISABLE_DESKTOP_MODERATION: {
+        conference?.disableAVModeration(MEDIA_TYPE.DESKTOP);
+        break;
+    }
+    case REQUEST_DISABLE_VIDEO_MODERATION: {
+        conference?.disableAVModeration(MEDIA_TYPE.VIDEO);
+        break;
+    }
+    case REQUEST_ENABLE_AUDIO_MODERATION: {
+        conference?.enableAVModeration(MEDIA_TYPE.AUDIO);
+        break;
+    }
+    case REQUEST_ENABLE_DESKTOP_MODERATION: {
+        conference?.enableAVModeration(MEDIA_TYPE.DESKTOP);
+        break;
+    }
+    case REQUEST_ENABLE_VIDEO_MODERATION: {
+        conference?.enableAVModeration(MEDIA_TYPE.VIDEO);
+        break;
+    }
+    case PARTICIPANT_UPDATED: {
+        const state = getState();
+        const audioModerationEnabled = isEnabledFromState(MEDIA_TYPE.AUDIO, state);
+        const participant = action.participant;
+
+        if (participant && audioModerationEnabled) {
+            if (isLocalParticipantModerator(state)) {
+
+                // this is handled only by moderators
+                if (hasRaisedHand(participant)) {
+                    // if participant raises hand show notification
+                    !isParticipantApproved(participant.id, MEDIA_TYPE.AUDIO)(state)
+                    && dispatch(participantPendingAudio(participant));
+                } else {
+                    // if participant lowers hand hide notification
+                    isParticipantPending(participant, MEDIA_TYPE.AUDIO)(state)
+                    && dispatch(dismissPendingAudioParticipant(participant));
+                }
+            } else if (participant.id === getLocalParticipant(state)?.id
+                && /* the new role */ isParticipantModerator(participant)) {
+
+                // this is the granted moderator case
+                getRemoteParticipants(state).forEach(p => {
+                    hasRaisedHand(p) && !isParticipantApproved(p.id, MEDIA_TYPE.AUDIO)(state)
+                        && dispatch(participantPendingAudio(p));
+                });
+            }
+        }
+
+        break;
+    }
+    case ENABLE_MODERATION: {
+        if (typeof APP !== 'undefined') {
+            APP.API.notifyModerationChanged(action.mediaType, true);
+        }
+        break;
+    }
+    case DISABLE_MODERATION: {
+        if (typeof APP !== 'undefined') {
+            APP.API.notifyModerationChanged(action.mediaType, false);
+        }
+        break;
+    }
+    case LOCAL_PARTICIPANT_APPROVED: {
+        if (typeof APP !== 'undefined') {
+            const local = getLocalParticipant(getState());
+
+            APP.API.notifyParticipantApproved(local?.id, action.mediaType);
+        }
+        break;
+    }
+    case PARTICIPANT_APPROVED: {
+        if (typeof APP !== 'undefined') {
+            APP.API.notifyParticipantApproved(action.id, action.mediaType);
+        }
+        break;
+    }
+    case LOCAL_PARTICIPANT_REJECTED: {
+        if (typeof APP !== 'undefined') {
+            const local = getLocalParticipant(getState());
+
+            APP.API.notifyParticipantRejected(local?.id, action.mediaType);
+        }
+        break;
+    }
+    case PARTICIPANT_REJECTED: {
+        if (typeof APP !== 'undefined') {
+            APP.API.notifyParticipantRejected(action.id, action.mediaType);
+        }
+        break;
+    }
+    }
+
+    return next(action);
+});
+
+/**
+ * Registers a change handler for state['features/base/conference'].conference to
+ * set the event listeners needed for the A/V moderation feature to operate.
+ */
+StateListenerRegistry.register(
+    state => state['features/base/conference'].conference,
+    (conference, { dispatch, getState }, previousConference) => {
+        if (conference && !previousConference) {
+            // local participant is allowed to unmute
+            conference.on(JitsiConferenceEvents.AV_MODERATION_APPROVED, ({ mediaType }: { mediaType: MediaType; }) => {
+                dispatch(localParticipantApproved(mediaType));
+
+                const customActionNameKey = [];
+                const customActionHandler = [];
+
+                if ((mediaType === MEDIA_TYPE.AUDIO || getState()['features/av-moderation'].audioUnmuteApproved)
+                        && isAudioMuted(getState())) {
+                    customActionNameKey.push('notify.unmute');
+                    customActionHandler.push(() => {
+                        dispatch(muteLocal(false, TRACK_MEDIA_TYPE.AUDIO));
+                        dispatch(hideNotification(ASKED_TO_UNMUTE_NOTIFICATION_ID));
+                    });
+                }
+
+                if ((mediaType === MEDIA_TYPE.DESKTOP || getState()['features/av-moderation'].desktopUnmuteApproved)
+                        && isScreenshareMuted(getState())) {
+                    customActionNameKey.push('notify.unmuteScreen');
+                    customActionHandler.push(() => {
+                        dispatch(muteLocal(false, TRACK_MEDIA_TYPE.SCREENSHARE));
+                        dispatch(hideNotification(ASKED_TO_UNMUTE_NOTIFICATION_ID));
+
+                        // Since permission is requested by raising the hand, lower it not to rely on dominant speaker detection
+                        // to clear the hand.
+                        dispatch(raiseHand(false));
+                    });
+                }
+
+                if ((mediaType === MEDIA_TYPE.VIDEO || getState()['features/av-moderation'].videoUnmuteApproved)
+                        && isVideoMuted(getState())) {
+                    customActionNameKey.push('notify.unmuteVideo');
+                    customActionHandler.push(() => {
+                        dispatch(muteLocal(false, TRACK_MEDIA_TYPE.VIDEO));
+                        dispatch(hideNotification(ASKED_TO_UNMUTE_NOTIFICATION_ID));
+
+                        // Since permission is requested by raising the hand, lower it not to rely on dominant speaker detection
+                        // to clear the hand.
+                        dispatch(raiseHand(false));
+                    });
+                }
+
+                dispatch(showNotification({
+                    titleKey: 'notify.hostAskedUnmute',
+                    sticky: true,
+                    customActionNameKey,
+                    customActionHandler,
+                    uid: ASKED_TO_UNMUTE_NOTIFICATION_ID
+                }, NOTIFICATION_TIMEOUT_TYPE.STICKY));
+
+                dispatch(playSound(ASKED_TO_UNMUTE_SOUND_ID));
+            });
+
+            conference.on(JitsiConferenceEvents.AV_MODERATION_REJECTED, ({ mediaType }: { mediaType: MediaType; }) => {
+                dispatch(localParticipantRejected(mediaType));
+            });
+
+            conference.on(JitsiConferenceEvents.AV_MODERATION_CHANGED, ({ enabled, mediaType, actor }: {
+                actor: Object; enabled: boolean; mediaType: MediaType;
+            }) => {
+                enabled ? dispatch(enableModeration(mediaType, actor)) : dispatch(disableModeration(mediaType, actor));
+            });
+
+            // this is received by moderators
+            conference.on(
+                JitsiConferenceEvents.AV_MODERATION_PARTICIPANT_APPROVED,
+                ({ participant, mediaType }: { mediaType: MediaType; participant: { _id: string; }; }) => {
+                    const { _id: id } = participant;
+
+                    batch(() => {
+                        // store in the whitelist
+                        dispatch(participantApproved(id, mediaType));
+
+                        // remove from pending list
+                        dispatch(dismissPendingParticipant(id, mediaType));
+                    });
+                });
+
+            // this is received by moderators
+            conference.on(
+                JitsiConferenceEvents.AV_MODERATION_PARTICIPANT_REJECTED,
+                ({ participant, mediaType }: { mediaType: MediaType; participant: { _id: string; }; }) => {
+                    const { _id: id } = participant;
+
+                    dispatch(participantRejected(id, mediaType));
+                });
+        }
+    });

react/features/av-moderation/reducer.ts

@@ -0,0 +1,399 @@
+import {
+    PARTICIPANT_LEFT,
+    PARTICIPANT_UPDATED
+} from '../base/participants/actionTypes';
+import { IParticipant } from '../base/participants/types';
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+
+import {
+    DISABLE_MODERATION,
+    DISMISS_PENDING_PARTICIPANT,
+    ENABLE_MODERATION,
+    LOCAL_PARTICIPANT_APPROVED,
+    LOCAL_PARTICIPANT_REJECTED,
+    PARTICIPANT_APPROVED,
+    PARTICIPANT_PENDING_AUDIO,
+    PARTICIPANT_REJECTED
+} from './actionTypes';
+import {
+    MEDIA_TYPE,
+    MEDIA_TYPE_TO_PENDING_STORE_KEY,
+    type MediaType
+} from './constants';
+
+const initialState = {
+    audioModerationEnabled: false,
+    desktopModerationEnabled: false,
+    videoModerationEnabled: false,
+    audioWhitelist: {},
+    desktopWhitelist: {},
+    videoWhitelist: {},
+    pendingAudio: [],
+    pendingDesktop: [],
+    pendingVideo: []
+};
+
+export interface IAVModerationState {
+    audioModerationEnabled: boolean;
+    audioUnmuteApproved?: boolean | undefined;
+    audioWhitelist: { [id: string]: boolean; };
+    desktopModerationEnabled: boolean;
+    desktopUnmuteApproved?: boolean | undefined;
+    desktopWhitelist: { [id: string]: boolean; };
+    pendingAudio: Array<{ id: string; }>;
+    pendingDesktop: Array<{ id: string; }>;
+    pendingVideo: Array<{ id: string; }>;
+    videoModerationEnabled: boolean;
+    videoUnmuteApproved?: boolean | undefined;
+    videoWhitelist: { [id: string]: boolean; };
+}
+
+/**
+ * Updates a participant in the state for the specified media type.
+ *
+ * @param {MediaType} mediaType - The media type.
+ * @param {Object} participant - Information about participant to be modified.
+ * @param {Object} state - The current state.
+ * @private
+ * @returns {boolean} - Whether state instance was modified.
+ */
+function _updatePendingParticipant(mediaType: MediaType, participant: IParticipant, state: IAVModerationState) {
+    let arrayItemChanged = false;
+    const storeKey = MEDIA_TYPE_TO_PENDING_STORE_KEY[mediaType];
+    const arr = state[storeKey];
+    const newArr = arr.map((pending: { id: string; }) => {
+        if (pending.id === participant.id) {
+            arrayItemChanged = true;
+
+            return {
+                ...pending,
+                ...participant
+            };
+        }
+
+        return pending;
+    });
+
+    if (arrayItemChanged) {
+        state[storeKey] = newArr;
+
+        return true;
+    }
+
+    return false;
+}
+
+ReducerRegistry.register<IAVModerationState>('features/av-moderation',
+(state = initialState, action): IAVModerationState => {
+    switch (action.type) {
+    case DISABLE_MODERATION: {
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioModerationEnabled: false,
+                audioUnmuteApproved: undefined
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopModerationEnabled: false,
+                desktopUnmuteApproved: undefined
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoModerationEnabled: false,
+                videoUnmuteApproved: undefined
+            };
+            break;
+        }
+
+        return {
+            ...state,
+            ...newState,
+            audioWhitelist: {},
+            desktopWhitelist: {},
+            videoWhitelist: {},
+            pendingAudio: [],
+            pendingDesktop: [],
+            pendingVideo: []
+        };
+    }
+
+    case ENABLE_MODERATION: {
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioModerationEnabled: true,
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopModerationEnabled: true,
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoModerationEnabled: true,
+            };
+            break;
+        }
+
+        return {
+            ...state,
+            ...newState
+        };
+    }
+
+    case LOCAL_PARTICIPANT_APPROVED: {
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioUnmuteApproved: true
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopUnmuteApproved: true
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoUnmuteApproved: true
+            };
+            break;
+        }
+
+        return {
+            ...state,
+            ...newState
+        };
+    }
+
+    case LOCAL_PARTICIPANT_REJECTED: {
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioUnmuteApproved: false
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopUnmuteApproved: false
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoUnmuteApproved: false
+            };
+            break;
+        }
+
+        return {
+            ...state,
+            ...newState
+        };
+    }
+
+    case PARTICIPANT_PENDING_AUDIO: {
+        const { participant } = action;
+
+        // Add participant to pendingAudio array only if it's not already added
+        if (!state.pendingAudio.find(pending => pending.id === participant.id)) {
+            const updated = [ ...state.pendingAudio ];
+
+            updated.push(participant);
+
+            return {
+                ...state,
+                pendingAudio: updated
+            };
+        }
+
+        return state;
+    }
+
+    case PARTICIPANT_UPDATED: {
+        const participant = action.participant;
+        const { audioModerationEnabled, desktopModerationEnabled, videoModerationEnabled } = state;
+        let hasStateChanged = false;
+
+        // skips changing the reference of pendingAudio or pendingVideo,
+        // if there is no change in the elements
+        if (audioModerationEnabled) {
+            hasStateChanged = _updatePendingParticipant(MEDIA_TYPE.AUDIO, participant, state);
+        }
+
+        if (desktopModerationEnabled) {
+            hasStateChanged = hasStateChanged || _updatePendingParticipant(MEDIA_TYPE.DESKTOP, participant, state);
+        }
+
+        if (videoModerationEnabled) {
+            hasStateChanged = hasStateChanged || _updatePendingParticipant(MEDIA_TYPE.VIDEO, participant, state);
+        }
+
+        // If the state has changed we need to return a new object reference in order to trigger subscriber updates.
+        if (hasStateChanged) {
+            return {
+                ...state
+            };
+        }
+
+        return state;
+    }
+
+    case PARTICIPANT_LEFT: {
+        const participant = action.participant;
+        const { audioModerationEnabled, desktopModerationEnabled, videoModerationEnabled } = state;
+        let hasStateChanged = false;
+
+        // skips changing the reference of pendingAudio or pendingVideo,
+        // if there is no change in the elements
+        if (audioModerationEnabled) {
+            const newPendingAudio = state.pendingAudio.filter(pending => pending.id !== participant.id);
+
+            if (state.pendingAudio.length !== newPendingAudio.length) {
+                state.pendingAudio = newPendingAudio;
+                hasStateChanged = true;
+            }
+        }
+
+        if (desktopModerationEnabled) {
+            const newPendingDesktop = state.pendingDesktop.filter(pending => pending.id !== participant.id);
+
+            if (state.pendingDesktop.length !== newPendingDesktop.length) {
+                state.pendingDesktop = newPendingDesktop;
+                hasStateChanged = true;
+            }
+        }
+
+        if (videoModerationEnabled) {
+            const newPendingVideo = state.pendingVideo.filter(pending => pending.id !== participant.id);
+
+            if (state.pendingVideo.length !== newPendingVideo.length) {
+                state.pendingVideo = newPendingVideo;
+                hasStateChanged = true;
+            }
+        }
+
+        // If the state has changed we need to return a new object reference in order to trigger subscriber updates.
+        if (hasStateChanged) {
+            return {
+                ...state
+            };
+        }
+
+        return state;
+    }
+
+    case DISMISS_PENDING_PARTICIPANT: {
+        const { id, mediaType } = action;
+
+        if (mediaType === MEDIA_TYPE.AUDIO) {
+            return {
+                ...state,
+                pendingAudio: state.pendingAudio.filter(pending => pending.id !== id)
+            };
+        }
+
+        if (mediaType === MEDIA_TYPE.DESKTOP) {
+            return {
+                ...state,
+                pendingDesktop: state.pendingDesktop.filter(pending => pending.id !== id)
+            };
+        }
+
+        if (mediaType === MEDIA_TYPE.VIDEO) {
+            return {
+                ...state,
+                pendingVideo: state.pendingVideo.filter(pending => pending.id !== id)
+            };
+        }
+
+        return state;
+    }
+
+    case PARTICIPANT_APPROVED: {
+        const { mediaType, id } = action;
+
+        if (mediaType === MEDIA_TYPE.AUDIO) {
+            return {
+                ...state,
+                audioWhitelist: {
+                    ...state.audioWhitelist,
+                    [id]: true
+                }
+            };
+        }
+
+        if (mediaType === MEDIA_TYPE.DESKTOP) {
+            return {
+                ...state,
+                desktopWhitelist: {
+                    ...state.desktopWhitelist,
+                    [id]: true
+                }
+            };
+        }
+
+        if (mediaType === MEDIA_TYPE.VIDEO) {
+            return {
+                ...state,
+                videoWhitelist: {
+                    ...state.videoWhitelist,
+                    [id]: true
+                }
+            };
+        }
+
+        return state;
+    }
+
+    case PARTICIPANT_REJECTED: {
+        const { mediaType, id } = action;
+
+        if (mediaType === MEDIA_TYPE.AUDIO) {
+            return {
+                ...state,
+                audioWhitelist: {
+                    ...state.audioWhitelist,
+                    [id]: false
+                }
+            };
+        }
+
+        if (mediaType === MEDIA_TYPE.DESKTOP) {
+            return {
+                ...state,
+                desktopWhitelist: {
+                    ...state.desktopWhitelist,
+                    [id]: false
+                }
+            };
+        }
+
+        if (mediaType === MEDIA_TYPE.VIDEO) {
+            return {
+                ...state,
+                videoWhitelist: {
+                    ...state.videoWhitelist,
+                    [id]: false
+                }
+            };
+        }
+
+        return state;
+    }
+
+    }
+
+    return state;
+});

react/features/av-moderation/sounds.ts

@@ -0,0 +1,6 @@
+/**
+ * The name of the bundled audio file which will be played for the raise hand sound.
+ *
+ * @type {string}
+ */
+export const ASKED_TO_UNMUTE_FILE = 'asked-unmute.mp3';