Browse Source

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

master
Calin Chitu 4 years ago
parent
commit
1afae50923

+ 5
- 2
react/features/participants-pane/components/native/ContextMenuMore.js View File

6
 import { Text } from 'react-native-paper';
6
 import { Text } from 'react-native-paper';
7
 import { useDispatch } from 'react-redux';
7
 import { useDispatch } from 'react-redux';
8
 
8
 
9
-import { hideDialog } from '../../../base/dialog';
9
+import { openDialog, hideDialog } from '../../../base/dialog/actions';
10
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
10
 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
11
 import {
11
 import {
12
     Icon, IconMicDisabledHollow,
12
     Icon, IconMicDisabledHollow,
13
     IconVideoOff
13
     IconVideoOff
14
 } from '../../../base/icons';
14
 } from '../../../base/icons';
15
 import { MEDIA_TYPE } from '../../../base/media';
15
 import { MEDIA_TYPE } from '../../../base/media';
16
+import { BlockAudioVideoDialog } from '../../../video-menu';
16
 import {
17
 import {
17
     muteAllParticipants
18
     muteAllParticipants
18
 } from '../../../video-menu/actions.any';
19
 } from '../../../video-menu/actions.any';
33
 
34
 
34
 export const ContextMenuMore = ({ exclude }: Props) => {
35
 export const ContextMenuMore = ({ exclude }: Props) => {
35
     const dispatch = useDispatch();
36
     const dispatch = useDispatch();
37
+    const blockAudioVideo = useCallback(() => dispatch(openDialog(BlockAudioVideoDialog)), [ dispatch ]);
36
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
38
     const cancel = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
37
     const muteEveryoneVideo = useCallback(() => dispatch(muteAllParticipants(exclude, MEDIA_TYPE.VIDEO)), [ dispatch ]);
39
     const muteEveryoneVideo = useCallback(() => dispatch(muteAllParticipants(exclude, MEDIA_TYPE.VIDEO)), [ dispatch ]);
38
     const { t } = useTranslation();
40
     const { t } = useTranslation();
50
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
52
                 <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.stopEveryonesVideo')}</Text>
51
             </TouchableOpacity>
53
             </TouchableOpacity>
52
             <TouchableOpacity
54
             <TouchableOpacity
55
+                onPress = { blockAudioVideo }
53
                 style = { styles.contextMenuItem }>
56
                 style = { styles.contextMenuItem }>
54
                 <Icon
57
                 <Icon
55
                     size = { 20 }
58
                     size = { 20 }
56
                     src = { IconMicDisabledHollow }
59
                     src = { IconMicDisabledHollow }
57
                     style = { styles.contextMenuIcon } />
60
                     style = { styles.contextMenuIcon } />
58
-                <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.dontAllowUnmute')}</Text>
61
+                <Text style = { styles.contextMenuItemText }>{t('participantsPane.actions.blockAudioVideo')}</Text>
59
             </TouchableOpacity>
62
             </TouchableOpacity>
60
         </BottomSheet>
63
         </BottomSheet>
61
     );
64
     );

+ 2
- 2
react/features/video-menu/actions.any.js View File

129
 
129
 
130
 
130
 
131
 /**
131
 /**
132
- * Don't allow participants to unmute.
132
+ * Don't allow participants to unmute video/audio.
133
  *
133
  *
134
  * @returns {Function}
134
  * @returns {Function}
135
  */
135
  */
136
-export function dontAllowUnmute() {
136
+export function blockParticipantsAudioVideo() {
137
     return (dispatch: Dispatch<any>, getState: Function) => {
137
     return (dispatch: Dispatch<any>, getState: Function) => {
138
         const state = getState();
138
         const state = getState();
139
         const participants = state['features/base/participants'];
139
         const participants = state['features/base/participants'];

+ 51
- 0
react/features/video-menu/components/AbstractBlockAudioVideoDialog.js View File

1
+// @flow
2
+
3
+import { Component } from 'react';
4
+
5
+import { blockParticipantsAudioVideo } from '../actions.any';
6
+
7
+type Props = {
8
+
9
+    /**
10
+     * The Redux dispatch function.
11
+     */
12
+    dispatch: Function,
13
+
14
+    /**
15
+     * Function to translate i18n labels.
16
+     */
17
+    t: Function
18
+};
19
+
20
+/**
21
+ * Abstract dialog to confirm blocking mic and camera for all participants.
22
+ */
23
+export default class AbstractBlockAudioVideoDialog
24
+    extends Component<Props> {
25
+    /**
26
+     * Initializes a new {@code AbstractBlockAudioVideoDialog} instance.
27
+     *
28
+     * @inheritdoc
29
+     */
30
+    constructor(props: Props) {
31
+        super(props);
32
+
33
+        this._onSubmit = this._onSubmit.bind(this);
34
+    }
35
+
36
+    _onSubmit: () => boolean;
37
+
38
+    /**
39
+     * Callback for the confirm button.
40
+     *
41
+     * @private
42
+     * @returns {boolean} - True (to note that the modal should be closed).
43
+     */
44
+    _onSubmit() {
45
+        const { dispatch } = this.props;
46
+
47
+        dispatch(blockParticipantsAudioVideo());
48
+
49
+        return true;
50
+    }
51
+}

+ 32
- 0
react/features/video-menu/components/native/BlockAudioVideoDialog.js View File

1
+// @flow
2
+
3
+import React from 'react';
4
+
5
+import { ConfirmDialog } from '../../../base/dialog';
6
+import { translate } from '../../../base/i18n';
7
+import { connect } from '../../../base/redux';
8
+import AbstractBlockAudioVideoDialog
9
+    from '../AbstractBlockAudioVideoDialog';
10
+
11
+/**
12
+ * Dialog to confirm a remote participant kick action.
13
+ */
14
+class BlockAudioVideoDialog extends AbstractBlockAudioVideoDialog {
15
+    /**
16
+     * Implements React's {@link Component#render()}.
17
+     *
18
+     * @inheritdoc
19
+     * @returns {ReactElement}
20
+     */
21
+    render() {
22
+        return (
23
+            <ConfirmDialog
24
+                contentKey = 'dialog.blockAudioVideoMsg'
25
+                onSubmit = { this._onSubmit } />
26
+        );
27
+    }
28
+
29
+    _onSubmit: () => boolean;
30
+}
31
+
32
+export default translate(connect()(BlockAudioVideoDialog));

+ 1
- 0
react/features/video-menu/components/native/index.js View File

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

Loading…
Cancel
Save