jiti-meet/react/features/toolbox/components/native/OverflowMenu.js

193 lines
5.9 KiB
JavaScript
Raw Normal View History

// @flow
2019-11-25 12:01:54 +00:00
import React, { PureComponent } from 'react';
import { Divider } from 'react-native-paper';
import { BottomSheet, hideSheet } from '../../../base/dialog';
import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../base/redux';
import SettingsButton from '../../../base/settings/components/native/SettingsButton';
import { SharedDocumentButton } from '../../../etherpad';
import { ReactionMenu } from '../../../reactions/components';
import { isReactionsEnabled } from '../../../reactions/functions.any';
2018-07-05 11:17:45 +00:00
import { LiveStreamButton, RecordButton } from '../../../recording';
import SecurityDialogButton
from '../../../security/components/security-dialog/native/SecurityDialogButton';
import { SharedVideoButton } from '../../../shared-video/components';
import SpeakerStatsButton from '../../../speaker-stats/components/native/SpeakerStatsButton';
import { isSpeakerStatsDisabled } from '../../../speaker-stats/functions';
import { ClosedCaptionButton } from '../../../subtitles';
import { TileViewButton } from '../../../video-layout';
import styles from '../../../video-menu/components/native/styles';
import { getMovableButtons } from '../../functions.native';
2019-11-25 12:01:54 +00:00
import AudioOnlyButton from './AudioOnlyButton';
import LinkToSalesforceButton from './LinkToSalesforceButton';
import OpenCarmodeButton from './OpenCarmodeButton';
import RaiseHandButton from './RaiseHandButton';
import ScreenSharingButton from './ScreenSharingButton';
2018-05-16 21:49:03 +00:00
/**
* The type of the React {@code Component} props of {@link OverflowMenu}.
*/
type Props = {
2019-07-11 11:32:17 +00:00
/**
* True if the overflow menu is currently visible, false otherwise.
*/
_isOpen: boolean,
/**
* Whether the recoding button should be enabled or not.
*/
_recordingEnabled: boolean,
/**
* The width of the screen.
*/
_width: number,
/**
* Whether or not the reactions feature is enabled.
*/
_reactionsEnabled: boolean,
/**
* Used for hiding the dialog when the selection was completed.
*/
dispatch: Function,
/**
* Whether or not speaker stats is disable.
*/
_isSpeakerStatsDisabled: boolean
};
2019-11-25 12:01:54 +00:00
type State = {
/**
* True if the bottom scheet is scrolled to the top.
*/
scrolledToTop: boolean
2019-11-25 12:01:54 +00:00
}
/**
* Implements a React {@code Component} with some extra actions in addition to
* those in the toolbar.
*/
2019-11-25 12:01:54 +00:00
class OverflowMenu extends PureComponent<Props, State> {
/**
* Initializes a new {@code OverflowMenu} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
2019-11-25 12:01:54 +00:00
this.state = {
scrolledToTop: true
2019-11-25 12:01:54 +00:00
};
2018-05-16 21:49:03 +00:00
// Bind event handlers so they are only bound once per instance.
this._onCancel = this._onCancel.bind(this);
this._renderReactionMenu = this._renderReactionMenu.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
_isSpeakerStatsDisabled,
_reactionsEnabled,
_width
} = this.props;
const toolbarButtons = getMovableButtons(_width);
2019-11-25 12:01:54 +00:00
const buttonProps = {
afterClick: this._onCancel,
showLabel: true,
styles: bottomSheetStyles.buttons
};
const topButtonProps = {
afterClick: this._onCancel,
showLabel: true,
styles: {
...bottomSheetStyles.buttons,
style: {
...bottomSheetStyles.buttons.style,
borderTopLeftRadius: 16,
borderTopRightRadius: 16
}
}
};
return (
2019-11-25 12:01:54 +00:00
<BottomSheet
renderFooter = { _reactionsEnabled && !toolbarButtons.has('raisehand')
? this._renderReactionMenu
: null }>
<OpenCarmodeButton { ...topButtonProps } />
<AudioOnlyButton { ...buttonProps } />
{!_reactionsEnabled && !toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
<Divider style = { styles.divider } />
2021-04-09 12:30:25 +00:00
<SecurityDialogButton { ...buttonProps } />
<RecordButton { ...buttonProps } />
<LiveStreamButton { ...buttonProps } />
<LinkToSalesforceButton { ...buttonProps } />
<Divider style = { styles.divider } />
<SharedVideoButton { ...buttonProps } />
{!toolbarButtons.has('screensharing') && <ScreenSharingButton { ...buttonProps } />}
{!_isSpeakerStatsDisabled && <SpeakerStatsButton { ...buttonProps } />}
{!toolbarButtons.has('tileview') && <TileViewButton { ...buttonProps } />}
<Divider style = { styles.divider } />
<ClosedCaptionButton { ...buttonProps } />
<SharedDocumentButton { ...buttonProps } />
<SettingsButton { ...buttonProps } />
</BottomSheet>
);
}
/**
2018-05-16 21:49:03 +00:00
* Hides this {@code OverflowMenu}.
*
* @private
* @returns {void}
*/
_onCancel() {
this.props.dispatch(hideSheet());
}
2019-11-25 12:01:54 +00:00
/**
* Functoin to render the reaction menu as the footer of the bottom sheet.
2019-11-25 12:01:54 +00:00
*
* @returns {React$Element}
2019-11-25 12:01:54 +00:00
*/
_renderReactionMenu() {
return (<ReactionMenu
onCancel = { this._onCancel }
overflowMenu = { true } />);
2019-11-25 12:01:54 +00:00
}
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @private
2019-07-11 11:32:17 +00:00
* @returns {Props}
*/
function _mapStateToProps(state) {
return {
_isSpeakerStatsDisabled: isSpeakerStatsDisabled(state),
_reactionsEnabled: isReactionsEnabled(state),
_width: state['features/base/responsive-ui'].clientWidth
};
}
export default connect(_mapStateToProps)(OverflowMenu);