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

330 lines
9.5 KiB
React
Raw Normal View History

import React, { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
2017-12-16 14:41:54 +08:00
import _ from 'lodash';
import PropTypes from 'prop-types';
2017-04-19 03:06:51 +08:00
import { withModalMounter } from '/imports/ui/components/modal/service';
2019-01-12 08:20:04 +08:00
import EndMeetingConfirmationContainer from '/imports/ui/components/end-meeting-confirmation/container';
import { makeCall } from '/imports/ui/services/api';
2016-12-08 23:40:11 +08:00
import AboutContainer from '/imports/ui/components/about/container';
import SettingsMenuContainer from '/imports/ui/components/settings/container';
2016-09-02 04:19:37 +08:00
import Button from '/imports/ui/components/button/component';
import BBBMenu from "/imports/ui/components/menu/component";
2018-04-27 01:24:25 +08:00
import ShortcutHelpComponent from '/imports/ui/components/shortcut-help/component';
import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
2019-07-27 00:48:51 +08:00
import FullscreenService from '../../fullscreen-button/service';
2018-01-08 14:17:18 +08:00
import { styles } from '../styles';
2017-10-06 20:50:01 +08:00
2016-09-22 03:49:31 +08:00
const intlMessages = defineMessages({
optionsLabel: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.optionsLabel',
2017-04-10 23:50:03 +08:00
description: 'Options button label',
2016-09-22 03:49:31 +08:00
},
fullscreenLabel: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.fullscreenLabel',
2017-04-10 23:50:03 +08:00
description: 'Make fullscreen option label',
2016-09-22 03:49:31 +08:00
},
settingsLabel: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.settingsLabel',
2017-04-10 23:50:03 +08:00
description: 'Open settings option label',
2016-09-22 03:49:31 +08:00
},
2016-12-08 05:14:14 +08:00
aboutLabel: {
id: 'app.navBar.settingsDropdown.aboutLabel',
2017-04-10 23:50:03 +08:00
description: 'About option label',
2016-12-08 05:14:14 +08:00
},
aboutDesc: {
id: 'app.navBar.settingsDropdown.aboutDesc',
2017-04-10 23:50:03 +08:00
description: 'Describes about option',
2016-12-08 05:14:14 +08:00
},
2016-09-22 03:49:31 +08:00
leaveSessionLabel: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.leaveSessionLabel',
2017-04-10 23:50:03 +08:00
description: 'Leave session button label',
2016-09-22 03:49:31 +08:00
},
fullscreenDesc: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.fullscreenDesc',
2017-04-10 23:50:03 +08:00
description: 'Describes fullscreen option',
},
settingsDesc: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.settingsDesc',
2017-04-10 23:50:03 +08:00
description: 'Describes settings option',
},
leaveSessionDesc: {
2016-09-27 05:55:33 +08:00
id: 'app.navBar.settingsDropdown.leaveSessionDesc',
2017-04-10 23:50:03 +08:00
description: 'Describes leave session option',
},
2017-08-11 00:05:51 +08:00
exitFullscreenDesc: {
id: 'app.navBar.settingsDropdown.exitFullscreenDesc',
2017-04-10 23:50:03 +08:00
description: 'Describes exit fullscreen option',
2017-02-14 00:21:53 +08:00
},
2017-08-11 00:05:51 +08:00
exitFullscreenLabel: {
id: 'app.navBar.settingsDropdown.exitFullscreenLabel',
2017-04-10 23:50:03 +08:00
description: 'Exit fullscreen option label',
2017-02-14 00:21:53 +08:00
},
hotkeysLabel: {
id: 'app.navBar.settingsDropdown.hotkeysLabel',
2018-05-03 11:33:28 +08:00
description: 'Hotkeys options label',
},
hotkeysDesc: {
id: 'app.navBar.settingsDropdown.hotkeysDesc',
2018-05-03 11:33:28 +08:00
description: 'Describes hotkeys option',
},
helpLabel: {
id: 'app.navBar.settingsDropdown.helpLabel',
description: 'Help options label',
},
helpDesc: {
id: 'app.navBar.settingsDropdown.helpDesc',
description: 'Describes help option',
},
2019-01-12 08:20:04 +08:00
endMeetingLabel: {
id: 'app.navBar.settingsDropdown.endMeetingLabel',
description: 'End meeting options label',
},
endMeetingDesc: {
id: 'app.navBar.settingsDropdown.endMeetingDesc',
description: 'Describes settings option closing the current meeting',
},
2016-09-22 03:49:31 +08:00
});
const propTypes = {
intl: PropTypes.object.isRequired,
handleToggleFullscreen: PropTypes.func.isRequired,
mountModal: PropTypes.func.isRequired,
noIOSFullscreen: PropTypes.bool,
amIModerator: PropTypes.bool,
shortcuts: PropTypes.string,
2019-05-14 22:28:18 +08:00
isBreakoutRoom: PropTypes.bool,
2019-06-27 00:29:34 +08:00
isMeteorConnected: PropTypes.bool.isRequired,
};
const defaultProps = {
noIOSFullscreen: true,
amIModerator: false,
shortcuts: '',
2019-05-14 22:28:18 +08:00
isBreakoutRoom: false,
};
const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen;
class SettingsDropdown extends PureComponent {
constructor(props) {
super(props);
this.state = {
isSettingOpen: false,
2019-07-27 00:48:51 +08:00
isFullscreen: false,
};
// Set the logout code to 680 because it's not a real code and can be matched on the other side
this.LOGOUT_CODE = '680';
this.onActionsShow = this.onActionsShow.bind(this);
this.onActionsHide = this.onActionsHide.bind(this);
this.leaveSession = this.leaveSession.bind(this);
2019-07-27 00:48:51 +08:00
this.onFullscreenChange = this.onFullscreenChange.bind(this);
}
componentDidMount() {
2019-07-30 23:03:29 +08:00
document.documentElement.addEventListener('fullscreenchange', this.onFullscreenChange);
}
componentWillUnmount() {
document.documentElement.removeEventListener('fullscreenchange', this.onFullscreenChange);
2017-12-16 14:41:54 +08:00
}
onActionsShow() {
this.setState({
isSettingOpen: true,
});
}
onActionsHide() {
this.setState({
isSettingOpen: false,
});
}
2019-07-27 00:48:51 +08:00
onFullscreenChange() {
const { isFullscreen } = this.state;
const newIsFullscreen = FullscreenService.isFullScreen(document.documentElement);
if (isFullscreen !== newIsFullscreen) {
this.setState({ isFullscreen: newIsFullscreen });
}
}
getFullscreenItem(menuItems) {
const {
intl,
noIOSFullscreen,
handleToggleFullscreen,
} = this.props;
2019-07-27 00:48:51 +08:00
const { isFullscreen } = this.state;
if (noIOSFullscreen || !ALLOW_FULLSCREEN) return null;
2018-05-09 05:37:58 +08:00
let fullscreenLabel = intl.formatMessage(intlMessages.fullscreenLabel);
let fullscreenDesc = intl.formatMessage(intlMessages.fullscreenDesc);
let fullscreenIcon = 'fullscreen';
2016-09-02 04:19:37 +08:00
if (isFullscreen) {
fullscreenLabel = intl.formatMessage(intlMessages.exitFullscreenLabel);
fullscreenDesc = intl.formatMessage(intlMessages.exitFullscreenDesc);
fullscreenIcon = 'exit_fullscreen';
}
2018-05-09 05:37:58 +08:00
return (
menuItems.push(
{
key: "list-item-fullscreen",
icon: fullscreenIcon,
label: fullscreenLabel,
// description: fullscreenDesc,
onClick: handleToggleFullscreen
}
)
2018-12-06 01:42:31 +08:00
);
}
2019-05-25 05:26:00 +08:00
leaveSession() {
makeCall('userLeftMeeting');
// we don't check askForFeedbackOnLogout here,
// it is checked in meeting-ended component
Session.set('codeError', this.LOGOUT_CODE);
2019-05-25 05:26:00 +08:00
// mountModal(<MeetingEndedComponent code={LOGOUT_CODE} />);
}
renderMenuItems() {
const {
2019-06-27 00:29:34 +08:00
intl, mountModal, amIModerator, isBreakoutRoom, isMeteorConnected,
} = this.props;
2019-05-14 22:28:18 +08:00
const allowedToEndMeeting = amIModerator && !isBreakoutRoom;
const {
showHelpButton: helpButton,
helpLink,
allowLogout: allowLogoutSetting,
} = Meteor.settings.public.app;
this.menuItems = [];
this.getFullscreenItem(this.menuItems),
this.menuItems.push(
{
key: "list-item-settings",
icon: "settings",
dataTest: "settings",
label: intl.formatMessage(intlMessages.settingsLabel),
// description: intl.formatMessage(intlMessages.settingsDesc),
onClick: () => mountModal(<SettingsMenuContainer />)
},
{
key: "list-item-about",
icon: "about",
label: intl.formatMessage(intlMessages.aboutLabel),
// description: intl.formatMessage(intlMessages.aboutDesc),
onClick: () => mountModal(<AboutContainer />)
}
);
if (!helpButton) {
return null;
} else {
this.menuItems.push(
{
key: "list-item-help",
icon: "help",
iconRight: "popout_window",
label: intl.formatMessage(intlMessages.helpLabel),
// description: intl.formatMessage(intlMessages.helpDesc),
onClick: () => window.open(`${helpLink}`)
}
);
}
this.menuItems.push(
{
key: "list-item-shortcuts",
icon: "shortcuts",
label: intl.formatMessage(intlMessages.hotkeysLabel),
// description: intl.formatMessage(intlMessages.hotkeysDesc),
onClick: () => mountModal(<ShortcutHelpComponent />),
divider: true
}
);
if (allowedToEndMeeting && isMeteorConnected) {
this.menuItems.push(
{
key: "list-item-end-meeting",
icon: "application",
label: intl.formatMessage(intlMessages.endMeetingLabel),
// description: intl.formatMessage(intlMessages.endMeetingDesc),
onClick: () => mountModal(<EndMeetingConfirmationContainer />)
}
)
} else {
return null;
}
const logoutOption = (
this.menuItems.push(
{
key: "list-item-logout",
dataTest: "logout",
icon: "logout",
label: intl.formatMessage(intlMessages.leaveSessionLabel),
// description: intl.formatMessage(intlMessages.leaveSessionDesc),
onClick: () => this.leaveSession()
}
)
);
const shouldRenderLogoutOption = (isMeteorConnected && allowLogoutSetting) ? logoutOption : null;
shouldRenderLogoutOption;
return this.menuItems;
2017-12-16 14:41:54 +08:00
}
2017-02-14 00:21:53 +08:00
2017-12-16 14:41:54 +08:00
render() {
const {
intl,
shortcuts: OPEN_OPTIONS_AK,
isDropdownOpen,
} = this.props;
2017-02-14 00:21:53 +08:00
2019-01-12 08:20:04 +08:00
const { isSettingOpen } = this.state;
2016-09-02 04:19:37 +08:00
return (
<BBBMenu
2021-08-09 01:22:01 +08:00
accessKey={OPEN_OPTIONS_AK}
trigger={
2016-09-02 04:19:37 +08:00
<Button
label={intl.formatMessage(intlMessages.optionsLabel)}
2016-09-02 04:19:37 +08:00
icon="more"
2017-06-03 03:25:02 +08:00
ghost
circle
hideLabel
className={isDropdownOpen ? styles.hideDropdownButton : styles.btn}
// FIXME: Without onClick react proptypes keep warning
// even after the DropdownTrigger inject an onClick handler
onClick={() => null}
/>
}
actions={this.renderMenuItems()}
/>
2016-09-02 04:19:37 +08:00
);
}
}
SettingsDropdown.propTypes = propTypes;
SettingsDropdown.defaultProps = defaultProps;
export default withShortcutHelper(withModalMounter(injectIntl(SettingsDropdown)), 'openOptions');