Parcourir la source

feat(toolbox) notify click for hangup-menu and end-meeting menu button

factor2
Shawn il y a 2 ans
Parent
révision
93ab7725e7

+ 2
- 0
config.js Voir le fichier

767
     //     'desktop',
767
     //     'desktop',
768
     //     'download',
768
     //     'download',
769
     //     'embedmeeting',
769
     //     'embedmeeting',
770
+    //     'end-meeting',
770
     //     'etherpad',
771
     //     'etherpad',
771
     //     'feedback',
772
     //     'feedback',
772
     //     'filmstrip',
773
     //     'filmstrip',
773
     //     'fullscreen',
774
     //     'fullscreen',
774
     //     'hangup',
775
     //     'hangup',
776
+    //     'hangup-menu',
775
     //     'help',
777
     //     'help',
776
     //     {
778
     //     {
777
     //         key: 'invite',
779
     //         key: 'invite',

+ 2
- 0
react/features/base/config/configType.ts Voir le fichier

39
     'desktop' |
39
     'desktop' |
40
     'download' |
40
     'download' |
41
     'embedmeeting' |
41
     'embedmeeting' |
42
+    'end-meeting' |
42
     'etherpad' |
43
     'etherpad' |
43
     'feedback' |
44
     'feedback' |
44
     'filmstrip' |
45
     'filmstrip' |
45
     'fullscreen' |
46
     'fullscreen' |
46
     'hangup' |
47
     'hangup' |
48
+    'hangup-menu' |
47
     'help' |
49
     'help' |
48
     'invite' |
50
     'invite' |
49
     'livestreaming' |
51
     'livestreaming' |

+ 27
- 6
react/features/toolbox/components/web/EndConferenceButton.tsx Voir le fichier

4
 
4
 
5
 import { endConference } from '../../../base/conference/actions';
5
 import { endConference } from '../../../base/conference/actions';
6
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
6
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
7
-import Button from '../../../base/ui/components/web/Button';
8
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
7
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
9
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
8
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
10
 
9
 
10
+import { HangupContextMenuItem } from './HangupContextMenuItem';
11
+
12
+/**
13
+ * The type of the React {@code Component} props of {@link EndConferenceButton}.
14
+ */
15
+type Props = {
16
+
17
+    /**
18
+     * Key to use for toolbarButtonClicked event.
19
+     */
20
+    buttonKey: string;
21
+
22
+    /**
23
+     * Notify mode for `toolbarButtonClicked` event -
24
+     * whether to only notify or to also prevent button click routine.
25
+     */
26
+    notifyMode?: string;
27
+};
28
+
29
+
11
 /**
30
 /**
12
  * Button to end the conference for all participants.
31
  * Button to end the conference for all participants.
13
  *
32
  *
33
+ * @param {Object} props - Component's props.
14
  * @returns {JSX.Element} - The end conference button.
34
  * @returns {JSX.Element} - The end conference button.
15
  */
35
  */
16
-export const EndConferenceButton = () => {
36
+export const EndConferenceButton = (props: Props) => {
17
     const { t } = useTranslation();
37
     const { t } = useTranslation();
18
     const dispatch = useDispatch();
38
     const dispatch = useDispatch();
19
     const _isLocalParticipantModerator = useSelector(isLocalParticipantModerator);
39
     const _isLocalParticipantModerator = useSelector(isLocalParticipantModerator);
24
     }, [ dispatch ]);
44
     }, [ dispatch ]);
25
 
45
 
26
     return (<>
46
     return (<>
27
-        { !_isInBreakoutRoom && _isLocalParticipantModerator && <Button
47
+        { !_isInBreakoutRoom && _isLocalParticipantModerator && <HangupContextMenuItem
28
             accessibilityLabel = { t('toolbar.accessibilityLabel.endConference') }
48
             accessibilityLabel = { t('toolbar.accessibilityLabel.endConference') }
29
-            fullWidth = { true }
49
+            buttonKey = { props.buttonKey }
50
+            buttonType = { BUTTON_TYPES.DESTRUCTIVE }
30
             label = { t('toolbar.endConference') }
51
             label = { t('toolbar.endConference') }
31
-            onClick = { onEndConference }
32
-            type = { BUTTON_TYPES.DESTRUCTIVE } /> }
52
+            notifyMode = { props.notifyMode }
53
+            onClick = { onEndConference } /> }
33
     </>);
54
     </>);
34
 };
55
 };

+ 75
- 0
react/features/toolbox/components/web/HangupContextMenuItem.tsx Voir le fichier

1
+import React, { useCallback } from 'react';
2
+
3
+import Button from '../../../base/ui/components/web/Button';
4
+import { NOTIFY_CLICK_MODE } from '../../constants';
5
+
6
+
7
+/**
8
+ * The type of the React {@code Component} props of {@link HangupContextMenuItem}.
9
+ */
10
+type Props = {
11
+
12
+    /**
13
+     * Accessibility label for the button.
14
+     */
15
+    accessibilityLabel: string;
16
+
17
+    /**
18
+     * Key to use for toolbarButtonClicked event.
19
+     */
20
+    buttonKey: string;
21
+
22
+    /**
23
+     * Type of button to display.
24
+     */
25
+    buttonType: string;
26
+
27
+    /**
28
+     * Text associated with the button.
29
+     */
30
+    label: string;
31
+
32
+    /**
33
+     * Notify mode for `toolbarButtonClicked` event -
34
+     * whether to only notify or to also prevent button click routine.
35
+     */
36
+    notifyMode?: string;
37
+
38
+    /**
39
+     * Callback that performs the actual hangup action.
40
+     */
41
+    onClick: Function;
42
+};
43
+
44
+declare let APP: any;
45
+
46
+/**
47
+ * Implementation of a button to be rendered within Hangup context menu.
48
+ *
49
+ * @param {Object} props - Component's props.
50
+ * @returns {JSX.Element} - Button that would trigger the hangup action.
51
+ */
52
+export const HangupContextMenuItem = (props: Props) => {
53
+    const shouldNotify = props.notifyMode !== undefined;
54
+    const shouldPreventExecution = props.notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY;
55
+
56
+    const _onClick = useCallback(() => {
57
+        if (shouldNotify) {
58
+            APP.API.notifyToolbarButtonClicked(props.buttonKey, shouldPreventExecution);
59
+        }
60
+
61
+        if (!shouldPreventExecution) {
62
+            props.onClick();
63
+        }
64
+    }, []);
65
+
66
+    return (
67
+        <Button
68
+            accessibilityLabel = { props.accessibilityLabel }
69
+            fullWidth = { true }
70
+            label = { props.label }
71
+            onClick = { _onClick }
72
+            type = { props.buttonType } />
73
+    );
74
+};
75
+

+ 8
- 0
react/features/toolbox/components/web/HangupMenuButton.tsx Voir le fichier

28
      */
28
      */
29
     isOpen: boolean;
29
     isOpen: boolean;
30
 
30
 
31
+    /**
32
+     * Notify mode for `toolbarButtonClicked` event -
33
+     * whether to only notify or to also prevent button click routine.
34
+     */
35
+    notifyMode?: string;
36
+
31
     /**
37
     /**
32
      * Callback to change the visibility of the hangup menu.
38
      * Callback to change the visibility of the hangup menu.
33
      */
39
      */
88
                     trigger = 'click'
94
                     trigger = 'click'
89
                     visible = { isOpen }>
95
                     visible = { isOpen }>
90
                     <HangupToggleButton
96
                     <HangupToggleButton
97
+                        buttonKey = 'hangup-menu'
91
                         customClass = 'hangup-menu-button'
98
                         customClass = 'hangup-menu-button'
92
                         handleClick = { this._toggleDialogVisibility }
99
                         handleClick = { this._toggleDialogVisibility }
93
                         isOpen = { isOpen }
100
                         isOpen = { isOpen }
101
+                        notifyMode = { this.props.notifyMode }
94
                         onKeyDown = { this._onEscClick } />
102
                         onKeyDown = { this._onEscClick } />
95
                 </Popover>
103
                 </Popover>
96
             </div>
104
             </div>

+ 27
- 6
react/features/toolbox/components/web/LeaveConferenceButton.tsx Voir le fichier

5
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
5
 import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
6
 import { sendAnalytics } from '../../../analytics/functions';
6
 import { sendAnalytics } from '../../../analytics/functions';
7
 import { leaveConference } from '../../../base/conference/actions';
7
 import { leaveConference } from '../../../base/conference/actions';
8
-import Button from '../../../base/ui/components/web/Button';
9
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
8
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
10
 
9
 
10
+import { HangupContextMenuItem } from './HangupContextMenuItem';
11
+
12
+/**
13
+ * The type of the React {@code Component} props of {@link LeaveConferenceButton}.
14
+ */
15
+type Props = {
16
+
17
+    /**
18
+     * Key to use for toolbarButtonClicked event.
19
+     */
20
+    buttonKey: string;
21
+
22
+    /**
23
+     * Notify mode for `toolbarButtonClicked` event -
24
+     * whether to only notify or to also prevent button click routine.
25
+     */
26
+    notifyMode?: string;
27
+};
28
+
29
+
11
 /**
30
 /**
12
  * Button to leave the conference.
31
  * Button to leave the conference.
13
  *
32
  *
33
+ * @param {Object} props - Component's props.
14
  * @returns {JSX.Element} - The leave conference button.
34
  * @returns {JSX.Element} - The leave conference button.
15
  */
35
  */
16
-export const LeaveConferenceButton = () => {
36
+export const LeaveConferenceButton = (props: Props) => {
17
     const { t } = useTranslation();
37
     const { t } = useTranslation();
18
     const dispatch = useDispatch();
38
     const dispatch = useDispatch();
19
 
39
 
23
     }, [ dispatch ]);
43
     }, [ dispatch ]);
24
 
44
 
25
     return (
45
     return (
26
-        <Button
46
+        <HangupContextMenuItem
27
             accessibilityLabel = { t('toolbar.accessibilityLabel.leaveConference') }
47
             accessibilityLabel = { t('toolbar.accessibilityLabel.leaveConference') }
28
-            fullWidth = { true }
48
+            buttonKey = { props.buttonKey }
49
+            buttonType = { BUTTON_TYPES.SECONDARY }
29
             label = { t('toolbar.leaveConference') }
50
             label = { t('toolbar.leaveConference') }
30
-            onClick = { onLeaveConference }
31
-            type = { BUTTON_TYPES.SECONDARY } />
51
+            notifyMode = { props.notifyMode }
52
+            onClick = { onLeaveConference } />
32
     );
53
     );
33
 };
54
 };

+ 7
- 2
react/features/toolbox/components/web/Toolbox.tsx Voir le fichier

1489
                                     ariaControls = 'hangup-menu'
1489
                                     ariaControls = 'hangup-menu'
1490
                                     isOpen = { _hangupMenuVisible }
1490
                                     isOpen = { _hangupMenuVisible }
1491
                                     key = 'hangup-menu'
1491
                                     key = 'hangup-menu'
1492
+                                    notifyMode = { this._getButtonNotifyMode('hangup-menu') }
1492
                                     onVisibilityChange = { this._onSetHangupVisible }>
1493
                                     onVisibilityChange = { this._onSetHangupVisible }>
1493
                                     <ContextMenu
1494
                                     <ContextMenu
1494
                                         accessibilityLabel = { t(toolbarAccLabel) }
1495
                                         accessibilityLabel = { t(toolbarAccLabel) }
1496
                                         hidden = { false }
1497
                                         hidden = { false }
1497
                                         inDrawer = { _overflowDrawer }
1498
                                         inDrawer = { _overflowDrawer }
1498
                                         onKeyDown = { this._onEscKey }>
1499
                                         onKeyDown = { this._onEscKey }>
1499
-                                        <EndConferenceButton />
1500
-                                        <LeaveConferenceButton />
1500
+                                        <EndConferenceButton
1501
+                                            buttonKey = 'end-meeting'
1502
+                                            notifyMode = { this._getButtonNotifyMode('end-meeting') } />
1503
+                                        <LeaveConferenceButton
1504
+                                            buttonKey = 'hangup'
1505
+                                            notifyMode = { this._getButtonNotifyMode('hangup') } />
1501
                                     </ContextMenu>
1506
                                     </ContextMenu>
1502
                                 </HangupMenuButton>
1507
                                 </HangupMenuButton>
1503
                                 : <HangupButton
1508
                                 : <HangupButton

Chargement…
Annuler
Enregistrer