bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/actions-bar/actions-dropdown/component.jsx

525 lines
16 KiB
React
Raw Normal View History

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { defineMessages } from 'react-intl';
import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
import ExternalVideoModal from '/imports/ui/components/external-video-player/external-video-player-graphql/modal/component';
2022-02-15 23:54:55 +08:00
import RandomUserSelectContainer from '/imports/ui/components/common/modal/random-user/container';
import LayoutModalContainer from '/imports/ui/components/layout/modal/container';
2022-02-15 23:38:55 +08:00
import BBBMenu from '/imports/ui/components/common/menu/component';
import { ActionButtonDropdownItemType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/action-button-dropdown-item/enums';
import Styled from './styles';
import { colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
import { PANELS, ACTIONS, LAYOUT_TYPE } from '../../layout/enums';
2023-02-23 22:23:51 +08:00
import { uniqueId } from '/imports/utils/string-utils';
import { isPresentationEnabled, isLayoutsEnabled } from '/imports/ui/services/features';
import VideoPreviewContainer from '/imports/ui/components/video-preview/container';
import { screenshareHasEnded } from '/imports/ui/components/screenshare/service';
import Settings from '/imports/ui/services/settings';
2017-06-07 20:01:18 +08:00
const propTypes = {
amIPresenter: PropTypes.bool.isRequired,
2021-08-09 22:24:02 +08:00
intl: PropTypes.shape({
formatMessage: PropTypes.func.isRequired,
}).isRequired,
amIModerator: PropTypes.bool.isRequired,
shortcuts: PropTypes.string,
handleTakePresenter: PropTypes.func.isRequired,
2023-05-11 04:03:20 +08:00
isTimerActive: PropTypes.bool.isRequired,
isTimerEnabled: PropTypes.bool.isRequired,
2019-05-29 22:31:27 +08:00
allowExternalVideo: PropTypes.bool.isRequired,
stopExternalVideoShare: PropTypes.func.isRequired,
isMobile: PropTypes.bool.isRequired,
setMeetingLayout: PropTypes.func.isRequired,
setPushLayout: PropTypes.func.isRequired,
showPushLayout: PropTypes.bool.isRequired,
isTimerFeatureEnabled: PropTypes.bool.isRequired,
2023-06-14 22:32:52 +08:00
isCameraAsContentEnabled: PropTypes.bool.isRequired,
actionButtonDropdownItems: PropTypes.arrayOf(
PropTypes.shape({
allowed: PropTypes.bool,
key: PropTypes.string,
}),
).isRequired,
2017-06-07 20:01:18 +08:00
};
const defaultProps = {
shortcuts: '',
settingsLayout: LAYOUT_TYPE.SMART_LAYOUT,
};
2016-10-18 05:29:00 +08:00
const intlMessages = defineMessages({
actionsLabel: {
id: 'app.actionsBar.actionsDropdown.actionsLabel',
2017-04-10 23:50:03 +08:00
description: 'Actions button label',
2016-10-18 05:29:00 +08:00
},
2023-07-20 02:00:48 +08:00
activateTimerStopwatchLabel: {
id: 'app.actionsBar.actionsDropdown.activateTimerStopwatchLabel',
description: 'Activate timer/stopwatch label',
2023-05-11 04:03:20 +08:00
},
2023-07-20 02:00:48 +08:00
deactivateTimerStopwatchLabel: {
id: 'app.actionsBar.actionsDropdown.deactivateTimerStopwatchLabel',
description: 'Deactivate timer/stopwatch label',
2023-05-11 04:03:20 +08:00
},
2016-10-18 05:29:00 +08:00
presentationLabel: {
id: 'app.actionsBar.actionsDropdown.presentationLabel',
2017-04-10 23:50:03 +08:00
description: 'Upload a presentation option label',
2016-10-18 05:29:00 +08:00
},
presentationDesc: {
id: 'app.actionsBar.actionsDropdown.presentationDesc',
2017-04-11 21:52:30 +08:00
description: 'adds context to upload presentation option',
2016-10-18 05:29:00 +08:00
},
desktopShareDesc: {
id: 'app.actionsBar.actionsDropdown.desktopShareDesc',
2017-04-11 21:52:30 +08:00
description: 'adds context to desktop share option',
2016-10-18 05:29:00 +08:00
},
stopDesktopShareDesc: {
id: 'app.actionsBar.actionsDropdown.stopDesktopShareDesc',
description: 'adds context to stop desktop share option',
},
2018-09-24 06:20:20 +08:00
pollBtnLabel: {
id: 'app.actionsBar.actionsDropdown.pollBtnLabel',
description: 'poll menu toggle button label',
},
pollBtnDesc: {
id: 'app.actionsBar.actionsDropdown.pollBtnDesc',
description: 'poll menu toggle button description',
},
takePresenter: {
id: 'app.actionsBar.actionsDropdown.takePresenter',
description: 'Label for take presenter role option',
},
takePresenterDesc: {
id: 'app.actionsBar.actionsDropdown.takePresenterDesc',
description: 'Description of take presenter role option',
},
startExternalVideoLabel: {
id: 'app.actionsBar.actionsDropdown.shareExternalVideo',
description: 'Start sharing external video button',
},
stopExternalVideoLabel: {
id: 'app.actionsBar.actionsDropdown.stopShareExternalVideo',
description: 'Stop sharing external video button',
},
selectRandUserLabel: {
id: 'app.actionsBar.actionsDropdown.selectRandUserLabel',
description: 'Label for selecting a random user',
},
selectRandUserDesc: {
id: 'app.actionsBar.actionsDropdown.selectRandUserDesc',
description: 'Description for select random user option',
},
layoutModal: {
id: 'app.actionsBar.actionsDropdown.layoutModal',
description: 'Label for layouts selection button',
},
shareCameraAsContent: {
id: 'app.actionsBar.actionsDropdown.shareCameraAsContent',
description: 'Label for share camera as content',
},
unshareCameraAsContent: {
id: 'app.actionsBar.actionsDropdown.unshareCameraAsContent',
2023-03-11 01:25:24 +08:00
description: 'Label for unshare camera as content',
},
2016-10-18 05:29:00 +08:00
});
const handlePresentationClick = () => Session.set('showUploadPresentationView', true);
2020-02-26 03:29:14 +08:00
class ActionsDropdown extends PureComponent {
2016-10-18 05:29:00 +08:00
constructor(props) {
super(props);
2017-05-04 04:51:17 +08:00
2023-02-23 22:23:51 +08:00
this.presentationItemId = uniqueId('action-item-');
this.pollId = uniqueId('action-item-');
this.takePresenterId = uniqueId('action-item-');
2023-05-11 04:03:20 +08:00
this.timerId = uniqueId('action-item-');
2023-02-23 22:23:51 +08:00
this.selectUserRandId = uniqueId('action-item-');
this.state = {
isExternalVideoModalOpen: false,
isRandomUserSelectModalOpen: false,
isLayoutModalOpen: false,
isCameraAsContentModalOpen: false,
};
2018-01-18 05:51:33 +08:00
2019-04-03 02:57:29 +08:00
this.handleExternalVideoClick = this.handleExternalVideoClick.bind(this);
this.makePresentationItems = this.makePresentationItems.bind(this);
this.setExternalVideoModalIsOpen = this.setExternalVideoModalIsOpen.bind(this);
this.setRandomUserSelectModalIsOpen = this.setRandomUserSelectModalIsOpen.bind(this);
this.setLayoutModalIsOpen = this.setLayoutModalIsOpen.bind(this);
this.setCameraAsContentModalIsOpen = this.setCameraAsContentModalIsOpen.bind(this);
this.setPropsToPassModal = this.setPropsToPassModal.bind(this);
this.setForceOpen = this.setForceOpen.bind(this);
this.handleTimerClick = this.handleTimerClick.bind(this);
}
componentDidUpdate(prevProps) {
const { amIPresenter: wasPresenter } = prevProps;
const { amIPresenter: isPresenter } = this.props;
if (wasPresenter && !isPresenter) {
this.setExternalVideoModalIsOpen(false);
}
}
handleExternalVideoClick() {
this.setExternalVideoModalIsOpen(true);
}
handleTimerClick() {
2024-01-17 00:51:36 +08:00
const { isTimerActive, activateTimer, deactivateTimer } = this.props;
if (!isTimerActive) {
2024-01-16 22:19:11 +08:00
activateTimer();
} else {
2024-01-17 00:51:36 +08:00
deactivateTimer();
}
}
2018-01-17 21:34:35 +08:00
getAvailableActions() {
const {
intl,
amIPresenter,
allowExternalVideo,
handleTakePresenter,
isSharingVideo,
2019-07-02 22:54:37 +08:00
isPollingEnabled,
2021-03-20 02:52:03 +08:00
isSelectRandomUserEnabled,
stopExternalVideoShare,
2023-05-11 04:03:20 +08:00
isTimerActive,
isTimerEnabled,
2021-08-05 19:03:24 +08:00
layoutContextDispatch,
2023-03-17 20:52:53 +08:00
amIModerator,
hasCameraAsContent,
actionButtonDropdownItems,
isCameraAsContentEnabled,
isTimerFeatureEnabled,
presentations,
isDirectLeaveButtonEnabled,
2018-01-17 21:34:35 +08:00
} = this.props;
const { pollBtnLabel, presentationLabel, takePresenter } = intlMessages;
2018-12-18 23:15:51 +08:00
const { formatMessage } = intl;
2018-12-18 23:15:51 +08:00
const actions = [];
if (amIPresenter && isPresentationEnabled()) {
if (presentations && presentations.length > 1) {
actions.push({
key: 'separator-01',
isSeparator: true,
});
}
actions.push({
icon: 'upload',
dataTest: 'managePresentations',
label: formatMessage(presentationLabel),
key: this.presentationItemId,
onClick: handlePresentationClick,
});
}
if (amIPresenter && isPollingEnabled) {
actions.push({
icon: 'polling',
dataTest: 'polling',
label: formatMessage(pollBtnLabel),
key: this.pollId,
onClick: () => {
if (Session.equals('pollInitiated', true)) {
Session.set('resetPollPanel', true);
}
2021-08-13 02:42:02 +08:00
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
value: true,
});
2021-08-13 02:42:02 +08:00
layoutContextDispatch({
type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
value: PANELS.POLL,
});
Session.set('forcePollOpen', true);
},
});
}
2023-03-17 20:52:53 +08:00
if (!amIPresenter && amIModerator) {
actions.push({
icon: 'presentation',
label: formatMessage(takePresenter),
key: this.takePresenterId,
onClick: () => handleTakePresenter(),
});
}
if (amIPresenter && allowExternalVideo) {
actions.push({
icon: !isSharingVideo ? 'external-video' : 'external-video_off',
label: !isSharingVideo
? intl.formatMessage(intlMessages.startExternalVideoLabel)
: intl.formatMessage(intlMessages.stopExternalVideoLabel),
key: 'external-video',
onClick: isSharingVideo ? stopExternalVideoShare : this.handleExternalVideoClick,
dataTest: 'shareExternalVideo',
});
}
if (amIPresenter && isSelectRandomUserEnabled) {
actions.push({
icon: 'user',
label: intl.formatMessage(intlMessages.selectRandUserLabel),
key: this.selectUserRandId,
onClick: () => this.setRandomUserSelectModalIsOpen(true),
dataTest: 'selectRandomUser',
});
}
if (amIModerator && isTimerEnabled && isTimerFeatureEnabled) {
2023-05-11 04:03:20 +08:00
actions.push({
icon: 'time',
label: isTimerActive
2023-07-20 02:00:48 +08:00
? intl.formatMessage(intlMessages.deactivateTimerStopwatchLabel)
: intl.formatMessage(intlMessages.activateTimerStopwatchLabel),
2023-05-11 04:03:20 +08:00
key: this.timerId,
onClick: () => this.handleTimerClick(),
2023-10-26 04:29:52 +08:00
dataTest: 'timerStopWatchFeature',
});
2023-05-11 04:03:20 +08:00
}
const { selectedLayout } = Settings.application;
const shouldShowManageLayoutButton = selectedLayout !== LAYOUT_TYPE.CAMERAS_ONLY
&& selectedLayout !== LAYOUT_TYPE.PRESENTATION_ONLY
2023-11-28 18:41:24 +08:00
&& selectedLayout !== LAYOUT_TYPE.PARTICIPANTS_AND_CHAT_ONLY;
if (shouldShowManageLayoutButton && isLayoutsEnabled()) {
2023-02-23 20:05:57 +08:00
actions.push({
icon: 'manage_layout',
2023-02-23 20:05:57 +08:00
label: intl.formatMessage(intlMessages.layoutModal),
key: 'layoutModal',
onClick: () => this.setLayoutModalIsOpen(true),
dataTest: 'manageLayoutBtn',
divider: !isDirectLeaveButtonEnabled,
2023-02-23 20:05:57 +08:00
});
}
if (isCameraAsContentEnabled && amIPresenter) {
actions.push({
icon: hasCameraAsContent ? 'video_off' : 'video',
label: hasCameraAsContent
? intl.formatMessage(intlMessages.unshareCameraAsContent)
: intl.formatMessage(intlMessages.shareCameraAsContent),
key: 'camera as content',
onClick: hasCameraAsContent
? screenshareHasEnded
: () => {
screenshareHasEnded();
this.setCameraAsContentModalIsOpen(true);
},
dataTest: 'shareCameraAsContent',
});
}
actionButtonDropdownItems.forEach((actionButtonItem) => {
switch (actionButtonItem.type) {
case ActionButtonDropdownItemType.OPTION:
actions.push({
icon: actionButtonItem.icon,
label: actionButtonItem.label,
key: actionButtonItem.id,
onClick: actionButtonItem.onClick,
allowed: actionButtonItem.allowed,
});
break;
case ActionButtonDropdownItemType.SEPARATOR:
actions.push({
key: actionButtonItem.id,
allowed: actionButtonItem.allowed,
isSeparator: true,
});
break;
default:
break;
}
});
return actions;
2018-01-17 21:34:35 +08:00
}
makePresentationItems() {
const {
presentations,
setPresentation,
setPresentationFitToWidth,
} = this.props;
2021-04-07 22:37:49 +08:00
const presentationItemElements = presentations
.sort((a, b) => a.name.localeCompare(b.name))
2021-04-07 22:37:49 +08:00
.map((p) => {
const customStyles = { color: colorPrimary };
return (
{
customStyles: p.current ? customStyles : null,
icon: 'file',
iconRight: p.current ? 'check' : null,
selected: !!p.current,
label: p.name,
description: 'uploaded presentation file',
key: `uploaded-presentation-${p.presentationId}`,
onClick: () => {
setPresentationFitToWidth(false);
setPresentation(p.presentationId);
},
}
2021-04-07 22:37:49 +08:00
);
});
return presentationItemElements;
}
setExternalVideoModalIsOpen(value) {
this.setState({ isExternalVideoModalOpen: value });
}
2023-06-15 02:04:58 +08:00
setRandomUserSelectModalIsOpen(value) {
this.setState({ isRandomUserSelectModalOpen: value });
}
2023-06-15 02:04:58 +08:00
setLayoutModalIsOpen(value) {
this.setState({ isLayoutModalOpen: value });
}
2023-06-15 02:04:58 +08:00
setCameraAsContentModalIsOpen(value) {
this.setState({ isCameraAsContentModalOpen: value });
}
2023-06-15 02:04:58 +08:00
setPropsToPassModal(value) {
this.setState({ propsToPassModal: value });
}
setForceOpen(value) {
this.setState({ forceOpen: value });
}
renderModal(isOpen, setIsOpen, priority, Component) {
return isOpen ? (
<Component
{...{
onRequestClose: () => setIsOpen(false),
priority,
setIsOpen,
isOpen,
}}
/>
) : null;
}
2016-10-18 05:29:00 +08:00
render() {
2017-09-13 04:47:06 +08:00
const {
intl,
amIPresenter,
shortcuts: OPEN_ACTIONS_AK,
2019-06-27 00:29:34 +08:00
isMeteorConnected,
2021-05-12 22:07:18 +08:00
isDropdownOpen,
isMobile,
2022-05-13 21:42:19 +08:00
isRTL,
isSelectRandomUserEnabled,
propsToPassModal,
2017-09-13 04:47:06 +08:00
} = this.props;
2017-03-24 23:37:33 +08:00
const {
isExternalVideoModalOpen,
isRandomUserSelectModalOpen,
isLayoutModalOpen,
isCameraAsContentModalOpen,
} = this.state;
2018-01-17 21:34:35 +08:00
const availableActions = this.getAvailableActions();
const availablePresentations = this.makePresentationItems();
2023-06-15 02:04:58 +08:00
const children = availablePresentations.length > 1 && amIPresenter
? availablePresentations.concat(availableActions)
: availableActions;
2018-01-17 21:34:35 +08:00
const customStyles = { top: '-1rem' };
if (availableActions.length === 0 || !isMeteorConnected) {
return null;
}
2016-10-18 05:29:00 +08:00
return (
<>
<BBBMenu
customStyles={!isMobile ? customStyles : null}
accessKey={OPEN_ACTIONS_AK}
trigger={(
<Styled.HideDropdownButton
open={isDropdownOpen}
hideLabel
aria-label={intl.formatMessage(intlMessages.actionsLabel)}
data-test="actionsButton"
label={intl.formatMessage(intlMessages.actionsLabel)}
icon="plus"
color="primary"
size="lg"
circle
onClick={() => null}
/>
)}
actions={children}
opts={{
id: 'actions-dropdown-menu',
keepMounted: true,
transitionDuration: 0,
elevation: 3,
2023-05-10 09:31:48 +08:00
getcontentanchorel: null,
fullwidth: 'true',
anchorOrigin: { vertical: 'top', horizontal: isRTL ? 'right' : 'left' },
transformOrigin: { vertical: 'bottom', horizontal: isRTL ? 'right' : 'left' },
}}
/>
{this.renderModal(
isExternalVideoModalOpen,
this.setExternalVideoModalIsOpen,
'low',
2023-06-15 02:04:58 +08:00
ExternalVideoModal,
)}
{amIPresenter && isSelectRandomUserEnabled
? this.renderModal(
2023-06-15 02:04:58 +08:00
isRandomUserSelectModalOpen,
this.setRandomUserSelectModalIsOpen,
'low',
RandomUserSelectContainer,
)
: null}
{this.renderModal(
isLayoutModalOpen,
this.setLayoutModalIsOpen,
'low',
2023-06-15 02:04:58 +08:00
LayoutModalContainer,
)}
{this.renderModal(
isCameraAsContentModalOpen,
this.setCameraAsContentModalIsOpen,
'low',
() => (
<VideoPreviewContainer
cameraAsContent
amIPresenter
{...{
callbackToClose: () => {
this.setPropsToPassModal({});
this.setForceOpen(false);
},
priority: 'low',
setIsOpen: this.setCameraAsContentModalIsOpen,
isOpen: isCameraAsContentModalOpen,
}}
{...propsToPassModal}
/>
),
)}
</>
2016-10-18 05:29:00 +08:00
);
}
}
2017-06-07 20:01:18 +08:00
ActionsDropdown.propTypes = propTypes;
ActionsDropdown.defaultProps = defaultProps;
2017-06-07 20:01:18 +08:00
export default withShortcutHelper(ActionsDropdown, 'openActions');