2018-11-23 22:14:48 +08:00
|
|
|
import React, { PureComponent } from 'react';
|
2020-05-26 04:00:13 +08:00
|
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
2017-12-16 14:41:54 +08:00
|
|
|
import _ from 'lodash';
|
2019-01-16 02:08:42 +08:00
|
|
|
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';
|
2019-05-18 03:39:05 +08:00
|
|
|
import { makeCall } from '/imports/ui/services/api';
|
2016-12-08 23:40:11 +08:00
|
|
|
import AboutContainer from '/imports/ui/components/about/container';
|
2016-11-24 04:01:09 +08:00
|
|
|
import SettingsMenuContainer from '/imports/ui/components/settings/container';
|
2016-09-02 04:19:37 +08:00
|
|
|
import Button from '/imports/ui/components/button/component';
|
2021-08-09 01:13:47 +08:00
|
|
|
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';
|
2018-11-01 02:51:56 +08:00
|
|
|
import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
|
2019-07-27 00:48:51 +08:00
|
|
|
import FullscreenService from '../../fullscreen-button/service';
|
2016-09-07 03:10:18 +08:00
|
|
|
|
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({
|
2016-09-23 04:51:00 +08:00
|
|
|
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
|
|
|
},
|
2016-09-23 04:51:00 +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',
|
2016-09-23 04:51:00 +08:00
|
|
|
},
|
|
|
|
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',
|
2016-09-23 04:51:00 +08:00
|
|
|
},
|
|
|
|
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',
|
2016-09-23 04:51:00 +08:00
|
|
|
},
|
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
|
|
|
},
|
2018-05-03 10:20:38 +08:00
|
|
|
hotkeysLabel: {
|
|
|
|
id: 'app.navBar.settingsDropdown.hotkeysLabel',
|
2018-05-03 11:33:28 +08:00
|
|
|
description: 'Hotkeys options label',
|
2018-05-03 10:20:38 +08:00
|
|
|
},
|
|
|
|
hotkeysDesc: {
|
|
|
|
id: 'app.navBar.settingsDropdown.hotkeysDesc',
|
2018-05-03 11:33:28 +08:00
|
|
|
description: 'Describes hotkeys option',
|
2018-05-03 10:20:38 +08:00
|
|
|
},
|
2018-08-10 05:08:16 +08:00
|
|
|
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
|
|
|
});
|
|
|
|
|
2019-01-16 02:08:42 +08:00
|
|
|
const propTypes = {
|
2020-05-26 04:00:13 +08:00
|
|
|
intl: PropTypes.object.isRequired,
|
2019-01-16 02:08:42 +08:00
|
|
|
handleToggleFullscreen: PropTypes.func.isRequired,
|
|
|
|
mountModal: PropTypes.func.isRequired,
|
2019-03-11 03:21:48 +08:00
|
|
|
noIOSFullscreen: PropTypes.bool,
|
2019-01-16 02:08:42 +08:00
|
|
|
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,
|
2019-01-16 02:08:42 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const defaultProps = {
|
2019-03-11 03:21:48 +08:00
|
|
|
noIOSFullscreen: true,
|
2019-01-16 02:08:42 +08:00
|
|
|
amIModerator: false,
|
|
|
|
shortcuts: '',
|
2019-05-14 22:28:18 +08:00
|
|
|
isBreakoutRoom: false,
|
2019-01-16 02:08:42 +08:00
|
|
|
};
|
|
|
|
|
2019-07-25 01:46:51 +08:00
|
|
|
const ALLOW_FULLSCREEN = Meteor.settings.public.app.allowFullscreen;
|
|
|
|
|
2018-11-23 22:14:48 +08:00
|
|
|
class SettingsDropdown extends PureComponent {
|
2016-09-07 03:10:18 +08:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2017-05-25 06:42:02 +08:00
|
|
|
|
|
|
|
this.state = {
|
|
|
|
isSettingOpen: false,
|
2019-07-27 00:48:51 +08:00
|
|
|
isFullscreen: false,
|
2017-05-25 06:42:02 +08:00
|
|
|
};
|
|
|
|
|
2019-06-13 23:02:02 +08:00
|
|
|
// 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';
|
|
|
|
|
2017-05-25 06:42:02 +08:00
|
|
|
this.onActionsShow = this.onActionsShow.bind(this);
|
|
|
|
this.onActionsHide = this.onActionsHide.bind(this);
|
2019-06-13 23:02:02 +08:00
|
|
|
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
|
|
|
}
|
|
|
|
|
2018-06-19 04:23:20 +08:00
|
|
|
onActionsShow() {
|
|
|
|
this.setState({
|
|
|
|
isSettingOpen: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onActionsHide() {
|
|
|
|
this.setState({
|
|
|
|
isSettingOpen: false,
|
|
|
|
});
|
2017-05-25 06:42:02 +08:00
|
|
|
}
|
|
|
|
|
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 });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-08-09 01:13:47 +08:00
|
|
|
getFullscreenItem(menuItems) {
|
2019-01-16 02:08:42 +08:00
|
|
|
const {
|
|
|
|
intl,
|
2019-03-11 03:21:48 +08:00
|
|
|
noIOSFullscreen,
|
2019-01-16 02:08:42 +08:00
|
|
|
handleToggleFullscreen,
|
|
|
|
} = this.props;
|
2019-07-27 00:48:51 +08:00
|
|
|
const { isFullscreen } = this.state;
|
2017-05-25 06:42:02 +08:00
|
|
|
|
2019-07-25 01:46:51 +08:00
|
|
|
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
|
|
|
|
2019-03-13 01:05:32 +08:00
|
|
|
if (isFullscreen) {
|
2018-05-09 00:04:15 +08:00
|
|
|
fullscreenLabel = intl.formatMessage(intlMessages.exitFullscreenLabel);
|
|
|
|
fullscreenDesc = intl.formatMessage(intlMessages.exitFullscreenDesc);
|
|
|
|
fullscreenIcon = 'exit_fullscreen';
|
|
|
|
}
|
2018-05-09 05:37:58 +08:00
|
|
|
|
2019-01-16 02:08:42 +08:00
|
|
|
return (
|
2021-08-09 01:13:47 +08:00
|
|
|
menuItems.push(
|
|
|
|
{
|
|
|
|
key: "list-item-fullscreen",
|
|
|
|
icon: fullscreenIcon,
|
|
|
|
label: fullscreenLabel,
|
|
|
|
// description: fullscreenDesc,
|
|
|
|
onClick: handleToggleFullscreen
|
|
|
|
}
|
|
|
|
)
|
2018-12-06 01:42:31 +08:00
|
|
|
);
|
2019-01-16 02:08:42 +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
|
2019-06-13 23:02:02 +08:00
|
|
|
Session.set('codeError', this.LOGOUT_CODE);
|
2019-05-25 05:26:00 +08:00
|
|
|
// mountModal(<MeetingEndedComponent code={LOGOUT_CODE} />);
|
|
|
|
}
|
|
|
|
|
2019-01-16 02:08:42 +08:00
|
|
|
renderMenuItems() {
|
2021-08-09 01:13:47 +08:00
|
|
|
|
2019-01-16 02:08:42 +08:00
|
|
|
const {
|
2019-06-27 00:29:34 +08:00
|
|
|
intl, mountModal, amIModerator, isBreakoutRoom, isMeteorConnected,
|
2019-01-16 02:08:42 +08:00
|
|
|
} = this.props;
|
|
|
|
|
2019-05-14 22:28:18 +08:00
|
|
|
const allowedToEndMeeting = amIModerator && !isBreakoutRoom;
|
|
|
|
|
2019-07-16 21:55:56 +08:00
|
|
|
const {
|
|
|
|
showHelpButton: helpButton,
|
|
|
|
helpLink,
|
|
|
|
allowLogout: allowLogoutSetting,
|
|
|
|
} = Meteor.settings.public.app;
|
|
|
|
|
2021-08-09 01:13:47 +08:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2019-07-16 21:55:56 +08:00
|
|
|
const logoutOption = (
|
2021-08-09 01:13:47 +08:00
|
|
|
this.menuItems.push(
|
|
|
|
{
|
|
|
|
key: "list-item-logout",
|
|
|
|
dataTest: "logout",
|
|
|
|
icon: "logout",
|
|
|
|
label: intl.formatMessage(intlMessages.leaveSessionLabel),
|
|
|
|
// description: intl.formatMessage(intlMessages.leaveSessionDesc),
|
|
|
|
onClick: () => this.leaveSession()
|
|
|
|
}
|
|
|
|
)
|
2019-07-16 21:55:56 +08:00
|
|
|
);
|
|
|
|
|
2021-08-09 01:13:47 +08:00
|
|
|
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() {
|
2018-11-01 02:51:56 +08:00
|
|
|
const {
|
|
|
|
intl,
|
|
|
|
shortcuts: OPEN_OPTIONS_AK,
|
2021-05-14 20:47:37 +08:00
|
|
|
isDropdownOpen,
|
2018-11-01 02:51:56 +08:00
|
|
|
} = 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 (
|
2021-08-09 01:13:47 +08:00
|
|
|
|
|
|
|
<BBBMenu
|
2021-08-09 01:22:01 +08:00
|
|
|
accessKey={OPEN_OPTIONS_AK}
|
2021-08-09 01:13:47 +08:00
|
|
|
trigger={
|
2016-09-02 04:19:37 +08:00
|
|
|
<Button
|
2016-09-23 04:51:00 +08:00
|
|
|
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
|
2021-05-14 20:47:37 +08:00
|
|
|
className={isDropdownOpen ? styles.hideDropdownButton : styles.btn}
|
2016-09-07 03:10:18 +08:00
|
|
|
|
|
|
|
// FIXME: Without onClick react proptypes keep warning
|
|
|
|
// even after the DropdownTrigger inject an onClick handler
|
|
|
|
onClick={() => null}
|
2021-08-09 01:13:47 +08:00
|
|
|
/>
|
|
|
|
}
|
|
|
|
|
|
|
|
actions={this.renderMenuItems()}
|
|
|
|
/>
|
|
|
|
|
2016-09-02 04:19:37 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-01-16 02:08:42 +08:00
|
|
|
SettingsDropdown.propTypes = propTypes;
|
|
|
|
SettingsDropdown.defaultProps = defaultProps;
|
2018-11-01 02:51:56 +08:00
|
|
|
export default withShortcutHelper(withModalMounter(injectIntl(SettingsDropdown)), 'openOptions');
|