ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(reactions): New button for web.

Browse Source
This commit is contained in:
Hristo Terezov
2023-04-27 19:19:53 -05:00
parent be55ccd6f4
commit f8bd8b616e
20 changed files with 559 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
react/features/reactions/components/web/ReactionButton.tsx
View File

@@ -101,9 +101,12 @@ class ReactionButton extends AbstractToolbarButton<IProps, IState> {
/**
* Handles reaction button click.
*
* @param {Event} event - The click event.
* @returns {void}
*/
_onClickHandler() {
_onClickHandler(event: any) {
event.preventDefault();
event.stopPropagation();
this.props.onClick();
clearTimeout(this.state.increaseTimeout ?? 0);
const timeout = window.setTimeout(() => {

179
react/features/reactions/components/web/ReactionsMenu.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import { createReactionMenuEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
import { IReduxState, IStore } from '../../../app/types';
import { isMobileBrowser } from '../../../base/environment/utils';
import { raiseHand } from '../../../base/participants/actions';
import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
import GifsMenu from '../../../gifs/components/web/GifsMenu';
@@ -15,7 +14,13 @@ import { isGifEnabled, isGifsMenuOpen } from '../../../gifs/functions';
import { dockToolbox } from '../../../toolbox/actions.web';
import { addReactionToBuffer } from '../../actions.any';
import { toggleReactionsMenuVisibility } from '../../actions.web';
import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../constants';
import {
GIFS_MENU_HEIGHT_IN_OVERFLOW_MENU,
RAISE_HAND_ROW_HEIGHT, REACTIONS,
REACTIONS_MENU_HEIGHT_DRAWER,
REACTIONS_MENU_HEIGHT_IN_OVERFLOW_MENU
} from '../../constants';
import { IReactionsMenuParent } from '../../types';
import ReactionButton from './ReactionButton';
@@ -36,11 +41,6 @@ interface IProps {
*/
_isGifMenuVisible: boolean;
/**
* Whether or not it's a mobile browser.
*/
_isMobile: boolean;
/**
* The ID of the local participant.
*/
@@ -57,13 +57,59 @@ interface IProps {
dispatch: IStore['dispatch'];
/**
* Whether or not it's displayed in the overflow menu.
* Indicates the parent of the reactions menu.
*/
overflowMenu?: boolean;
parent: IReactionsMenuParent;
/**
* Whether to show the raised hand button.
*/
showRaisedHand?: boolean;
}
const useStyles = makeStyles()(theme => {
const useStyles = makeStyles<IProps>()((theme, props: IProps) => {
const { parent, showRaisedHand, _isGifMenuVisible } = props;
let reactionsMenuHeight = REACTIONS_MENU_HEIGHT_DRAWER;
if (parent === IReactionsMenuParent.OverflowDrawer || parent === IReactionsMenuParent.OverflowMenu) {
if (parent === IReactionsMenuParent.OverflowMenu) {
reactionsMenuHeight = REACTIONS_MENU_HEIGHT_IN_OVERFLOW_MENU;
if (_isGifMenuVisible) {
reactionsMenuHeight += GIFS_MENU_HEIGHT_IN_OVERFLOW_MENU;
}
}
if (!showRaisedHand) {
reactionsMenuHeight -= RAISE_HAND_ROW_HEIGHT;
}
}
return {
reactionsMenuInOverflowMenu: {
'&.reactions-menu': {
'&.with-gif': {
width: 'inherit'
},
'.reactions-row': {
'.toolbox-icon': {
width: '24px',
height: '24px',
'span.emoji': {
width: '24px',
height: '24px',
lineHeight: '24px',
fontSize: '16px'
}
}
},
'.raise-hand-row': {
'.toolbox-icon': {
height: '32px'
}
}
}
},
overflow: {
width: 'auto',
paddingBottom: 'max(env(safe-area-inset-bottom, 0), 16px)',
@@ -72,21 +118,55 @@ const useStyles = makeStyles()(theme => {
borderRadius: 0,
position: 'relative',
boxSizing: 'border-box',
height: `${REACTIONS_MENU_HEIGHT}px`
height: `${reactionsMenuHeight}px`
}
};
});
const ReactionsMenu = ({
_dockToolbox,
_isGifEnabled,
_isGifMenuVisible,
_isMobile,
_raisedHand,
dispatch,
overflowMenu
}: IProps) => {
const { classes, cx } = useStyles();
const _getReactionButtons = (dispatch: IStore['dispatch'], t: Function) => {
let modifierKey = 'Alt';
if (window.navigator?.platform) {
if (window.navigator.platform.indexOf('Mac') !== -1) {
modifierKey = '⌥';
}
}
return Object.keys(REACTIONS).map(key => {
/**
* Sends reaction message.
*
* @returns {void}
*/
function doSendReaction() {
dispatch(addReactionToBuffer(key));
sendAnalytics(createReactionMenuEvent(key));
}
return (<ReactionButton
accessibilityLabel = { t(`toolbar.accessibilityLabel.${key}`) }
icon = { REACTIONS[key].emoji }
key = { key }
// eslint-disable-next-line react/jsx-no-bind
onClick = { doSendReaction }
toggled = { false }
tooltip = { `${t(`toolbar.${key}`)} (${modifierKey} + ${REACTIONS[key].shortcutChar})` } />);
});
};
const ReactionsMenu = (props: IProps) => {
const {
_dockToolbox,
_isGifEnabled,
_isGifMenuVisible,
_raisedHand,
dispatch,
parent,
showRaisedHand = false
} = props;
const isInOverflowMenu
= parent === IReactionsMenuParent.OverflowDrawer || parent === IReactionsMenuParent.OverflowMenu;
const { classes, cx } = useStyles(props);
const { t } = useTranslation();
useEffect(() => {
@@ -97,9 +177,9 @@ const ReactionsMenu = ({
};
}, []);
const _doToggleRaiseHand = () => {
const _doToggleRaiseHand = useCallback(() => {
dispatch(raiseHand(!_raisedHand));
};
}, [ _raisedHand ]);
const _onToolbarToggleRaiseHand = useCallback(() => {
sendAnalytics(createToolbarEvent(
@@ -109,47 +189,26 @@ const ReactionsMenu = ({
dispatch(toggleReactionsMenuVisibility());
}, [ _raisedHand ]);
const _getReactionButtons = () => {
let modifierKey = 'Alt';
const buttons = _getReactionButtons(dispatch, t);
if (window.navigator?.platform) {
if (window.navigator.platform.indexOf('Mac') !== -1) {
modifierKey = '⌥';
}
}
return Object.keys(REACTIONS).map(key => {
/**
* Sends reaction message.
*
* @returns {void}
*/
function doSendReaction() {
dispatch(addReactionToBuffer(key));
sendAnalytics(createReactionMenuEvent(key));
}
return (<ReactionButton
accessibilityLabel = { t(`toolbar.accessibilityLabel.${key}`) }
icon = { REACTIONS[key].emoji }
key = { key }
// eslint-disable-next-line react/jsx-no-bind
onClick = { doSendReaction }
toggled = { false }
tooltip = { `${t(`toolbar.${key}`)} (${modifierKey} + ${REACTIONS[key].shortcutChar})` } />);
});
};
if (_isGifEnabled) {
buttons.push(<GifsMenuButton parent = { parent } />);
}
return (
<div
className = { cx('reactions-menu', _isGifEnabled && 'with-gif',
overflowMenu && `overflow ${classes.overflow}`) }>
{_isGifEnabled && _isGifMenuVisible && <GifsMenu />}
className = { cx('reactions-menu',
parent === IReactionsMenuParent.OverflowMenu && classes.reactionsMenuInOverflowMenu,
_isGifEnabled && 'with-gif',
isInOverflowMenu && `overflow ${classes.overflow}`) }>
{_isGifEnabled && _isGifMenuVisible
&& <GifsMenu
columns = { parent === IReactionsMenuParent.OverflowMenu ? 1 : undefined }
parent = { parent } />}
<div className = 'reactions-row'>
{_getReactionButtons()}
{_isGifEnabled && <GifsMenuButton />}
{ buttons }
</div>
{_isMobile && (
{showRaisedHand && (
<div className = 'raise-hand-row'>
<ReactionButton
accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
@@ -157,7 +216,7 @@ const ReactionsMenu = ({
key = 'raisehand'
label = {
`${t(`toolbar.${_raisedHand ? 'lowerYourHand' : 'raiseYourHand'}`)}
${overflowMenu ? '' : ' (R)'}`
${isInOverflowMenu ? '' : ' (R)'}`
}
onClick = { _onToolbarToggleRaiseHand }
toggled = { true } />
@@ -175,11 +234,9 @@ const ReactionsMenu = ({
*/
function mapStateToProps(state: IReduxState) {
const localParticipant = getLocalParticipant(state);
const { isNarrowLayout } = state['features/base/responsive-ui'];
return {
_localParticipantID: localParticipant?.id,
_isMobile: isMobileBrowser() || isNarrowLayout,
_isGifEnabled: isGifEnabled(state),
_isGifMenuVisible: isGifsMenuOpen(state),
_raisedHand: hasRaisedHand(localParticipant)

116
react/features/reactions/components/web/ReactionsMenuButton.tsx
View File

@@ -1,16 +1,18 @@
import React, { useCallback } from 'react';
import React, { ReactElement, useCallback } from 'react';
import { WithTranslation } from 'react-i18next';
import { connect, useSelector } from 'react-redux';
import { IReduxState } from '../../../app/types';
import { isMobileBrowser } from '../../../base/environment/utils';
import { translate } from '../../../base/i18n/functions';
import { IconArrowUp } from '../../../base/icons/svg';
import ToolboxButtonWithIconPopup from '../../../base/toolbox/components/web/ToolboxButtonWithIconPopup';
import { IconArrowUp, IconFaceSmile } from '../../../base/icons/svg';
import AbstractButton, { type IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
import ToolboxButtonWithPopup from '../../../base/toolbox/components/web/ToolboxButtonWithPopup';
import { toggleReactionsMenuVisibility } from '../../actions.web';
import { IReactionEmojiProps } from '../../constants';
import { getReactionsQueue, isReactionsEnabled } from '../../functions.any';
import { getReactionsMenuVisibility } from '../../functions.web';
import { getReactionsMenuVisibility, isReactionsButtonEnabled } from '../../functions.web';
import { IReactionsMenuParent } from '../../types';
import RaiseHandButton from './RaiseHandButton';
import ReactionEmoji from './ReactionEmoji';
@@ -19,9 +21,14 @@ import ReactionsMenu from './ReactionsMenu';
interface IProps extends WithTranslation {
/**
* Whether or not reactions are enabled.
* Whether a mobile browser is used or not.
*/
_reactionsEnabled: Boolean;
_isMobile: boolean;
/**
* Whether the reactions should be displayed on separate button or not.
*/
_reactionsButtonEnabled: boolean;
/**
* The button's key.
@@ -60,13 +67,28 @@ interface IProps extends WithTranslation {
reactionsQueue: Array<IReactionEmojiProps>;
}
/**
* Implementation of a button for reactions.
*/
class ReactionsButtonImpl extends AbstractButton<AbstractButtonProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.reactions';
icon = IconFaceSmile;
label = 'toolbar.reactions';
toggledLabel = 'toolbar.reactions';
tooltip = 'toolbar.reactions';
}
const ReactionsButton = translate(connect()(ReactionsButtonImpl));
/**
* Button used for the reactions menu.
*
* @returns {ReactElement}
*/
function ReactionsMenuButton({
_reactionsEnabled,
_reactionsButtonEnabled,
_isMobile,
buttonKey,
dispatch,
handleClick,
@@ -85,43 +107,69 @@ function ReactionsMenuButton({
!visible && toggleReactionsMenu();
}, [ visible, toggleReactionsMenu ]);
const closeReactionsMenu = useCallback(() => {
visible && toggleReactionsMenu();
}, [ visible, toggleReactionsMenu ]);
const reactionsMenu = (<div className = 'reactions-menu-container'>
<ReactionsMenu />
<ReactionsMenu parent = { IReactionsMenuParent.Button } />
</div>);
return (
<div className = 'reactions-menu-popup-container'>
{!_reactionsEnabled || isNarrow ? (
let content: ReactElement | null = null;
if (_reactionsButtonEnabled) {
content = (
<ToolboxButtonWithPopup
ariaControls = 'reactions-menu-dialog'
ariaExpanded = { isOpen }
ariaHasPopup = { true }
ariaLabel = { t('toolbar.accessibilityLabel.reactionsMenu') }
onPopoverClose = { _isMobile ? closeReactionsMenu : toggleReactionsMenu }
onPopoverOpen = { openReactionsMenu }
popoverContent = { reactionsMenu }
trigger = { _isMobile ? 'click' : undefined }
visible = { visible }>
<ReactionsButton
buttonKey = { buttonKey }
notifyMode = { notifyMode } />
</ToolboxButtonWithPopup>);
} else {
content = isNarrow
? (
<RaiseHandButton
buttonKey = { buttonKey }
handleClick = { handleClick }
notifyMode = { notifyMode } />)
: (
<ToolboxButtonWithIconPopup
ariaControls = 'reactions-menu-dialog'
ariaExpanded = { isOpen }
ariaHasPopup = { true }
ariaLabel = { t('toolbar.accessibilityLabel.reactionsMenu') }
icon = { IconArrowUp }
iconDisabled = { false }
iconId = 'reactions-menu-button'
onPopoverClose = { toggleReactionsMenu }
onPopoverOpen = { openReactionsMenu }
popoverContent = { reactionsMenu }
visible = { visible }>
<RaiseHandButton
buttonKey = { buttonKey }
handleClick = { handleClick }
notifyMode = { notifyMode } />
</ToolboxButtonWithIconPopup>
)}
: (
<ToolboxButtonWithPopup
ariaControls = 'reactions-menu-dialog'
ariaExpanded = { isOpen }
ariaHasPopup = { true }
ariaLabel = { t('toolbar.accessibilityLabel.reactionsMenu') }
icon = { IconArrowUp }
iconDisabled = { false }
iconId = 'reactions-menu-button'
onPopoverClose = { toggleReactionsMenu }
onPopoverOpen = { openReactionsMenu }
popoverContent = { reactionsMenu }
visible = { visible }>
<RaiseHandButton
buttonKey = { buttonKey }
handleClick = { handleClick }
notifyMode = { notifyMode } />
</ToolboxButtonWithPopup>);
}
return (
<div className = 'reactions-menu-popup-container'>
{ content }
{reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
index = { index }
key = { uid }
reaction = { reaction }
uid = { uid } />))}
</div>
);
</div>);
}
/**
@@ -134,9 +182,11 @@ function mapStateToProps(state: IReduxState) {
const { isNarrowLayout } = state['features/base/responsive-ui'];
return {
_reactionsButtonEnabled: isReactionsButtonEnabled(state),
_reactionsEnabled: isReactionsEnabled(state),
_isMobile: isMobileBrowser(),
isOpen: getReactionsMenuVisibility(state),
isNarrow: isMobileBrowser() || isNarrowLayout,
isNarrow: isNarrowLayout,
reactionsQueue: getReactionsQueue(state)
};
}

19
react/features/reactions/constants.ts
View File

@@ -8,9 +8,24 @@ import {
} from './sounds';
/**
* Reactions menu height on mobile web (px).
* The height of the raise hand row in the reactions menu.
*/
export const REACTIONS_MENU_HEIGHT = 144;
export const RAISE_HAND_ROW_HEIGHT = 54;
/**
* The height of the gifs menu when displayed as part of the overflow menu.
*/
export const GIFS_MENU_HEIGHT_IN_OVERFLOW_MENU = 200;
/**
* Reactions menu height when displayed as part of drawer.
*/
export const REACTIONS_MENU_HEIGHT_DRAWER = 144;
/**
* Reactions menu height when displayed as part of overflow menu.
*/
export const REACTIONS_MENU_HEIGHT_IN_OVERFLOW_MENU = 106;
/**
* The payload name for the datachannel/endpoint reaction event.

13
react/features/reactions/functions.web.ts
View File

@@ -1,4 +1,7 @@
import { IReduxState } from '../app/types';
import { getToolbarButtons } from '../base/config/functions.web';
import { isReactionsEnabled } from './functions.any';
export * from './functions.any';
@@ -11,3 +14,13 @@ export * from './functions.any';
export function getReactionsMenuVisibility(state: IReduxState): boolean {
return state['features/reactions'].visible;
}
/**
* Whether or not the reactions button is enabled.
*
* @param {Object} state - The Redux state object.
* @returns {boolean}
*/
export function isReactionsButtonEnabled(state: IReduxState) {
return Boolean(getToolbarButtons(state).includes('reactions')) && isReactionsEnabled(state);
}

5
react/features/reactions/types.ts Normal file
View File

@@ -0,0 +1,5 @@
export enum IReactionsMenuParent {
Button = 1,
OverflowMenu = 2,
OverflowDrawer = 3
}