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

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

@@ -30,7 +30,6 @@ import {
import { getLocalVideoTrack } from '../../../base/tracks/functions.web';
import { ITrack } from '../../../base/tracks/types';
import ContextMenu from '../../../base/ui/components/web/ContextMenu';
import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
import { toggleChat } from '../../../chat/actions.web';
import ChatButton from '../../../chat/components/web/ChatButton';
import EmbedMeetingButton from '../../../embed-meeting/components/EmbedMeetingButton';
@@ -54,9 +53,10 @@ import {
addReactionToBuffer,
toggleReactionsMenuVisibility
} from '../../../reactions/actions.web';
import RaiseHandButton from '../../../reactions/components/web/RaiseHandButton';
import ReactionsMenuButton from '../../../reactions/components/web/ReactionsMenuButton';
import { REACTIONS } from '../../../reactions/constants';
import { isReactionsEnabled } from '../../../reactions/functions.web';
import { isReactionsButtonEnabled, isReactionsEnabled } from '../../../reactions/functions.web';
import LiveStreamButton from '../../../recording/components/LiveStream/web/LiveStreamButton';
import RecordButton from '../../../recording/components/Recording/web/RecordButton';
import { isSalesforceEnabled } from '../../../salesforce/functions';
@@ -273,6 +273,11 @@ interface IProps extends WithTranslation {
*/
_raisedHand: boolean;
/**
* Whether or not to display reactions in separate button.
*/
_reactionsButtonEnabled: boolean;
/**
* Whether or not reactions feature is enabled.
*/
@@ -717,6 +722,7 @@ class Toolbox extends Component<IProps> {
_isNarrowLayout,
_isSpeakerStatsDisabled,
_multiStreamModeEnabled,
_reactionsButtonEnabled,
_reactionsEnabled,
_screenSharing,
_shortcutsEnabled,
@@ -755,8 +761,21 @@ class Toolbox extends Component<IProps> {
group: 2
};
const raisehand = (!_reactionsEnabled || (!_isNarrowLayout && !_isMobile)) && {
// In Narrow layout and mobile web we are using drawer for popups and that is why it is better to include
// all forms of reactions in the overflow menu. Otherwise the toolbox will be hidden and the reactions popup
// misaligned.
const showReactionsAsPartOfRaiseHand
= !_reactionsButtonEnabled && _reactionsEnabled && !_isNarrowLayout && !_isMobile;
const raisehand = {
key: 'raisehand',
Content: showReactionsAsPartOfRaiseHand ? ReactionsMenuButton : RaiseHandButton,
handleClick: this._onToolbarToggleRaiseHand,
group: 2
};
const reactions = _reactionsButtonEnabled && _reactionsEnabled && {
key: 'reactions',
Content: ReactionsMenuButton,
handleClick: this._onToolbarToggleRaiseHand,
group: 2
@@ -931,6 +950,7 @@ class Toolbox extends Component<IProps> {
desktop,
chat,
raisehand,
reactions,
participants,
invite,
tileview,
@@ -1416,6 +1436,7 @@ class Toolbox extends Component<IProps> {
_overflowDrawer,
_overflowMenuVisible,
_reactionsEnabled,
_reactionsButtonEnabled,
_toolbarButtons,
classes,
t
@@ -1425,6 +1446,12 @@ class Toolbox extends Component<IProps> {
const containerClassName = `toolbox-content${_isMobile || _isNarrowLayout ? ' toolbox-content-mobile' : ''}`;
const { mainMenuButtons, overflowMenuButtons } = this._getVisibleButtons();
const raiseHandInOverflowMenu = overflowMenuButtons.some(({ key }) => key === 'raisehand');
const showReactionsInOverflowMenu
= (_reactionsEnabled && !_reactionsButtonEnabled
&& (raiseHandInOverflowMenu || _isNarrowLayout || _isMobile))
|| overflowMenuButtons.some(({ key }) => key === 'reactions');
const showRaiseHandInReactionsMenu = showReactionsInOverflowMenu && raiseHandInOverflowMenu;
return (
<div className = { containerClassName }>
@@ -1448,47 +1475,36 @@ class Toolbox extends Component<IProps> {
{Boolean(overflowMenuButtons.length) && (
<OverflowMenuButton
ariaControls = 'overflow-menu'
isOpen = { _overflowMenuVisible }
key = 'overflow-menu'
onVisibilityChange = { this._onSetOverflowVisible }
showMobileReactions = {
_reactionsEnabled && (_isMobile || _isNarrowLayout)
}>
<ContextMenu
accessibilityLabel = { t(toolbarAccLabel) }
className = { classes.contextMenu }
hidden = { false }
id = 'overflow-context-menu'
inDrawer = { _overflowDrawer }
onKeyDown = { this._onEscKey }>
{overflowMenuButtons.reduce((acc, val) => {
if (acc.length) {
const prev = acc[acc.length - 1];
const group = prev[prev.length - 1].group;
buttons = { overflowMenuButtons.reduce((acc, val) => {
if (val.key === 'reactions' && showReactionsInOverflowMenu) {
return acc;
}
if (group === val.group) {
prev.push(val);
} else {
acc.push([ val ]);
}
if (val.key === 'raisehand' && showRaiseHandInReactionsMenu) {
return acc;
}
if (acc.length) {
const prev = acc[acc.length - 1];
const group = prev[prev.length - 1].group;
if (group === val.group) {
prev.push(val);
} else {
acc.push([ val ]);
}
} else {
acc.push([ val ]);
}
return acc;
}, []).map((buttonGroup: any) => (
<ContextMenuItemGroup key = { `group-${buttonGroup[0].group}` }>
{buttonGroup.map(({ key, Content, ...rest }: any) => (
key !== 'raisehand' || !_reactionsEnabled)
&& <Content
{ ...rest }
buttonKey = { key }
contextMenu = { true }
key = { key }
showLabel = { true } />)}
</ContextMenuItemGroup>))}
</ContextMenu>
</OverflowMenuButton>
return acc;
}, []) }
isOpen = { _overflowMenuVisible }
key = 'overflow-menu'
onToolboxEscKey = { this._onEscKey }
onVisibilityChange = { this._onSetOverflowVisible }
showRaiseHandInReactionsMenu = { showRaiseHandInReactionsMenu }
showReactionsMenu = { showReactionsInOverflowMenu } />
)}
{ isToolbarButtonEnabled('hangup', _toolbarButtons) && (
@@ -1558,6 +1574,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
const localVideo = getLocalVideoTrack(state['features/base/tracks']);
const { clientWidth } = state['features/base/responsive-ui'];
let toolbarButtons = ownProps.toolbarButtons || getToolbarButtons(state);
const _reactionsEnabled = isReactionsEnabled(state);
if (iAmVisitor(state)) {
toolbarButtons = VISITORS_MODE_BUTTONS.filter(e => toolbarButtons.indexOf(e) > -1);
@@ -1594,7 +1611,8 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
_overflowDrawer: overflowDrawer,
_participantsPaneOpen: getParticipantsPaneOpen(state),
_raisedHand: hasRaisedHand(localParticipant),
_reactionsEnabled: isReactionsEnabled(state),
_reactionsButtonEnabled: isReactionsButtonEnabled(state),
_reactionsEnabled,
_screenSharing: isScreenVideoShared(state),
_shortcutsEnabled: areKeyboardShortcutsEnabled(state),
_tileViewEnabled: shouldDisplayTileView(state),