feat(native-participants-pane) dialog for blocking audio/video

react/features/participants-pane/components/native/ContextMenuMore.js

@@ -6,13 +6,14 @@ import { TouchableOpacity } from 'react-native';
 import { Text } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
-import { hideDialog } from '../../../base/dialog';
+import { openDialog, hideDialog } from '../../../base/dialog/actions';
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
 import {
     Icon, IconMicDisabledHollow,
     IconVideoOff
 } from '../../../base/icons';
 import { MEDIA_TYPE } from '../../../base/media';
+import { BlockAudioVideoDialog } from '../../../video-menu';
 import {
     muteAllParticipants
 } from '../../../video-menu/actions.any';
@@ -33,6 +34,7 @@ type Props = {
 
 export const ContextMenuMore = ({ exclude }: Props) => {
     const dispatch = useDispatch();
+    const blockAudioVideo = useCallback(() => dispatch(openDialog(BlockAudioVideoDialog)), [ dispatch ]);
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
     const muteEveryoneVideo = useCallback(() => dispatch(muteAllParticipants(exclude, MEDIA_TYPE.VIDEO)), [ dispatch ]);
     const { t } = useTranslation();
@@ -50,12 +52,13 @@ export const ContextMenuMore = ({ exclude }: Props) => {
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
             </TouchableOpacity>
             <TouchableOpacity
+                onPress = { blockAudioVideo }
                 style = { styles.contextMenuItem }>
                 <Icon
                     size = { 20 }
                     src = { IconMicDisabledHollow }
                     style = { styles.contextMenuIcon } />
-                <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.dontAllowUnmute')}</Text>
+                <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.blockAudioVideo')}</Text>
             </TouchableOpacity>
         </BottomSheet>
     );

react/features/video-menu/actions.any.js

@@ -129,11 +129,11 @@ export function admitAllKnockingParticipants(knockingParticipants: Array<Object>
 
 
 /**
- * Don't allow participants to unmute.
+ * Don't allow participants to unmute video/audio.
  *
  * @returns {Function}
  */
-export function dontAllowUnmute() {
+export function blockParticipantsAudioVideo() {
     return (dispatch: Dispatch<any>, getState: Function) => {
         const state = getState();
         const participants = state['features/base/participants'];

react/features/video-menu/components/AbstractBlockAudioVideoDialog.js

@@ -0,0 +1,51 @@
+// @flow
+
+import { Component } from 'react';
+
+import { blockParticipantsAudioVideo } from '../actions.any';
+
+type Props = {
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * Function to translate i18n labels.
+     */
+    t: Function
+};
+
+/**
+ * Abstract dialog to confirm blocking mic and camera for all participants.
+ */
+export default class AbstractBlockAudioVideoDialog
+    extends Component<Props> {
+    /**
+     * Initializes a new {@code AbstractBlockAudioVideoDialog} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    _onSubmit: () => boolean;
+
+    /**
+     * Callback for the confirm button.
+     *
+     * @private
+     * @returns {boolean} - True (to note that the modal should be closed).
+     */
+    _onSubmit() {
+        const { dispatch } = this.props;
+
+        dispatch(blockParticipantsAudioVideo());
+
+        return true;
+    }
+}

react/features/video-menu/components/native/BlockAudioVideoDialog.js

@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react';
+
+import { ConfirmDialog } from '../../../base/dialog';
+import { translate } from '../../../base/i18n';
+import { connect } from '../../../base/redux';
+import AbstractBlockAudioVideoDialog
+    from '../AbstractBlockAudioVideoDialog';
+
+/**
+ * Dialog to confirm a remote participant kick action.
+ */
+class BlockAudioVideoDialog extends AbstractBlockAudioVideoDialog {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <ConfirmDialog
+                contentKey = 'dialog.blockAudioVideoMsg'
+                onSubmit = { this._onSubmit } />
+        );
+    }
+
+    _onSubmit: () => boolean;
+}
+
+export default translate(connect()(BlockAudioVideoDialog));

react/features/video-menu/components/native/index.js

@@ -1,5 +1,6 @@
 // @flow
 
+export { default as BlockAudioVideoDialog } from './BlockAudioVideoDialog';
 export { default as GrantModeratorDialog } from './GrantModeratorDialog';
 export { default as KickRemoteParticipantDialog } from './KickRemoteParticipantDialog';
 export { default as MuteEveryoneDialog } from './MuteEveryoneDialog';