haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Shawn 2022-09-14 17:42:30 +01:00 committed by Дамян Минков
parent 53ccb97d34
commit 93ab7725e7
7 changed files with 148 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -767,11 +767,13 @@ var config = {
// 'desktop',
// 'download',
// 'embedmeeting',
// 'end-meeting',
// 'etherpad',
// 'feedback',
// 'filmstrip',
// 'fullscreen',
// 'hangup',
// 'hangup-menu',
// 'help',
// {
// key: 'invite',

2
react/features/base/config/configType.ts
View File

@ -39,11 +39,13 @@ type ButtonsWithNotifyClick = 'camera' |
'desktop' |
'download' |
'embedmeeting' |
'end-meeting' |
'etherpad' |
'feedback' |
'filmstrip' |
'fullscreen' |
'hangup' |
'hangup-menu' |
'help' |
'invite' |
'livestreaming' |

33
react/features/toolbox/components/web/EndConferenceButton.tsx
View File

@ -4,16 +4,36 @@ import { useDispatch, useSelector } from 'react-redux';
import { endConference } from '../../../base/conference/actions';
import { isLocalParticipantModerator } from '../../../base/participants/functions';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.web';
import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
import { HangupContextMenuItem } from './HangupContextMenuItem';
/**
* The type of the React {@code Component} props of {@link EndConferenceButton}.
*/
type Props = {
/**
* Key to use for toolbarButtonClicked event.
*/
buttonKey: string;
/**
* Notify mode for `toolbarButtonClicked` event -
* whether to only notify or to also prevent button click routine.
*/
notifyMode?: string;
};
/**
* Button to end the conference for all participants.
*
* @param {Object} props - Component's props.
* @returns {JSX.Element} - The end conference button.
*/
export const EndConferenceButton = () => {
export const EndConferenceButton = (props: Props) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const _isLocalParticipantModerator = useSelector(isLocalParticipantModerator);
@ -24,11 +44,12 @@ export const EndConferenceButton = () => {
}, [ dispatch ]);
return (<>
{ !_isInBreakoutRoom && _isLocalParticipantModerator && <Button
{ !_isInBreakoutRoom && _isLocalParticipantModerator && <HangupContextMenuItem
accessibilityLabel = { t('toolbar.accessibilityLabel.endConference') }
fullWidth = { true }
buttonKey = { props.buttonKey }
buttonType = { BUTTON_TYPES.DESTRUCTIVE }
label = { t('toolbar.endConference') }
onClick = { onEndConference }
type = { BUTTON_TYPES.DESTRUCTIVE } /> }
notifyMode = { props.notifyMode }
onClick = { onEndConference } /> }
</>);
};

75
react/features/toolbox/components/web/HangupContextMenuItem.tsx Normal file
View File

@ -0,0 +1,75 @@
import React, { useCallback } from 'react';
import Button from '../../../base/ui/components/web/Button';
import { NOTIFY_CLICK_MODE } from '../../constants';
/**
* The type of the React {@code Component} props of {@link HangupContextMenuItem}.
*/
type Props = {
/**
* Accessibility label for the button.
*/
accessibilityLabel: string;
/**
* Key to use for toolbarButtonClicked event.
*/
buttonKey: string;
/**
* Type of button to display.
*/
buttonType: string;
/**
* Text associated with the button.
*/
label: string;
/**
* Notify mode for `toolbarButtonClicked` event -
* whether to only notify or to also prevent button click routine.
*/
notifyMode?: string;
/**
* Callback that performs the actual hangup action.
*/
onClick: Function;
};
declare let APP: any;
/**
* Implementation of a button to be rendered within Hangup context menu.
*
* @param {Object} props - Component's props.
* @returns {JSX.Element} - Button that would trigger the hangup action.
*/
export const HangupContextMenuItem = (props: Props) => {
const shouldNotify = props.notifyMode !== undefined;
const shouldPreventExecution = props.notifyMode === NOTIFY_CLICK_MODE.PREVENT_AND_NOTIFY;
const _onClick = useCallback(() => {
if (shouldNotify) {
APP.API.notifyToolbarButtonClicked(props.buttonKey, shouldPreventExecution);
}
if (!shouldPreventExecution) {
props.onClick();
}
}, []);
return (
<Button
accessibilityLabel = { props.accessibilityLabel }
fullWidth = { true }
label = { props.label }
onClick = { _onClick }
type = { props.buttonType } />
);
};

8
react/features/toolbox/components/web/HangupMenuButton.tsx
View File

@ -28,6 +28,12 @@ interface IProps extends WithTranslation {
*/
isOpen: boolean;
/**
* Notify mode for `toolbarButtonClicked` event -
* whether to only notify or to also prevent button click routine.
*/
notifyMode?: string;
/**
* Callback to change the visibility of the hangup menu.
*/
@ -88,9 +94,11 @@ class HangupMenuButton extends Component<IProps> {
trigger = 'click'
visible = { isOpen }>
<HangupToggleButton
buttonKey = 'hangup-menu'
customClass = 'hangup-menu-button'
handleClick = { this._toggleDialogVisibility }
isOpen = { isOpen }
notifyMode = { this.props.notifyMode }
onKeyDown = { this._onEscClick } />
</Popover>
</div>

33
react/features/toolbox/components/web/LeaveConferenceButton.tsx
View File

@ -5,15 +5,35 @@ import { useDispatch } from 'react-redux';
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
import { leaveConference } from '../../../base/conference/actions';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.web';
import { HangupContextMenuItem } from './HangupContextMenuItem';
/**
* The type of the React {@code Component} props of {@link LeaveConferenceButton}.
*/
type Props = {
/**
* Key to use for toolbarButtonClicked event.
*/
buttonKey: string;
/**
* Notify mode for `toolbarButtonClicked` event -
* whether to only notify or to also prevent button click routine.
*/
notifyMode?: string;
};
/**
* Button to leave the conference.
*
* @param {Object} props - Component's props.
* @returns {JSX.Element} - The leave conference button.
*/
export const LeaveConferenceButton = () => {
export const LeaveConferenceButton = (props: Props) => {
const { t } = useTranslation();
const dispatch = useDispatch();
@ -23,11 +43,12 @@ export const LeaveConferenceButton = () => {
}, [ dispatch ]);
return (
<Button
<HangupContextMenuItem
accessibilityLabel = { t('toolbar.accessibilityLabel.leaveConference') }
fullWidth = { true }
buttonKey = { props.buttonKey }
buttonType = { BUTTON_TYPES.SECONDARY }
label = { t('toolbar.leaveConference') }
onClick = { onLeaveConference }
type = { BUTTON_TYPES.SECONDARY } />
notifyMode = { props.notifyMode }
onClick = { onLeaveConference } />
);
};

9
react/features/toolbox/components/web/Toolbox.tsx
View File

@ -1489,6 +1489,7 @@ class Toolbox extends Component<IProps> {
ariaControls = 'hangup-menu'
isOpen = { _hangupMenuVisible }
key = 'hangup-menu'
notifyMode = { this._getButtonNotifyMode('hangup-menu') }
onVisibilityChange = { this._onSetHangupVisible }>
<ContextMenu
accessibilityLabel = { t(toolbarAccLabel) }
@ -1496,8 +1497,12 @@ class Toolbox extends Component<IProps> {
hidden = { false }
inDrawer = { _overflowDrawer }
onKeyDown = { this._onEscKey }>
<EndConferenceButton />
<LeaveConferenceButton />
<EndConferenceButton
buttonKey = 'end-meeting'
notifyMode = { this._getButtonNotifyMode('end-meeting') } />
<LeaveConferenceButton
buttonKey = 'hangup'
notifyMode = { this._getButtonNotifyMode('hangup') } />
</ContextMenu>
</HangupMenuButton>
: <HangupButton