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

262 lines
7.8 KiB
JavaScript
Raw Normal View History

// @flow
2019-11-25 12:01:54 +00:00
import React, { PureComponent } from 'react';
import { TouchableOpacity, View } from 'react-native';
2019-11-25 12:01:54 +00:00
import Collapsible from 'react-native-collapsible';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
2019-07-11 11:32:17 +00:00
import { BottomSheet, hideDialog, isDialogOpen } from '../../../base/dialog';
import { IconDragHandle } from '../../../base/icons';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { SharedDocumentButton } from '../../../etherpad';
import { InviteButton } from '../../../invite';
import { AudioRouteButton } from '../../../mobile/audio-mode';
2018-07-05 11:17:45 +00:00
import { LiveStreamButton, RecordButton } from '../../../recording';
2021-04-09 12:30:25 +00:00
import SecurityDialogButton from '../../../security/components/security-dialog/SecurityDialogButton';
import { SharedVideoButton } from '../../../shared-video/components';
import { ClosedCaptionButton } from '../../../subtitles';
import { TileViewButton } from '../../../video-layout';
import { getMovableButtons } from '../../functions.native';
2019-10-11 18:09:50 +00:00
import HelpButton from '../HelpButton';
import MuteEveryoneButton from '../MuteEveryoneButton';
import MuteEveryonesVideoButton from '../MuteEveryonesVideoButton';
2019-11-25 12:01:54 +00:00
import AudioOnlyButton from './AudioOnlyButton';
import MoreOptionsButton from './MoreOptionsButton';
2019-03-27 13:47:19 +00:00
import RaiseHandButton from './RaiseHandButton';
import ScreenSharingButton from './ScreenSharingButton.js';
2018-05-16 21:49:03 +00:00
import ToggleCameraButton from './ToggleCameraButton';
import styles from './styles';
2018-05-16 21:49:03 +00:00
/**
* The type of the React {@code Component} props of {@link OverflowMenu}.
*/
type Props = {
/**
* The color-schemed stylesheet of the dialog feature.
*/
_bottomSheetStyles: StyleType,
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,
/**
* Used for hiding the dialog when the selection was completed.
*/
dispatch: Function
};
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
/**
* True if the 'more' button set needas to be rendered.
*/
showMore: boolean
}
/**
2018-05-16 21:49:03 +00:00
* The exported React {@code Component}. We need it to execute
* {@link hideDialog}.
*
* XXX It does not break our coding style rule to not utilize globals for state,
* because it is merely another name for {@code export}'s {@code default}.
*/
2018-05-16 21:49:03 +00:00
let OverflowMenu_; // eslint-disable-line prefer-const
/**
* 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
showMore: false
};
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);
2019-11-25 12:01:54 +00:00
this._onSwipe = this._onSwipe.bind(this);
this._onToggleMenu = this._onToggleMenu.bind(this);
this._renderMenuExpandToggle = this._renderMenuExpandToggle.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { _bottomSheetStyles, _width } = this.props;
2019-11-25 12:01:54 +00:00
const { showMore } = this.state;
const toolbarButtons = getMovableButtons(_width);
2019-11-25 12:01:54 +00:00
const buttonProps = {
afterClick: this._onCancel,
showLabel: true,
2019-11-25 12:01:54 +00:00
styles: _bottomSheetStyles.buttons
};
const moreOptionsButtonProps = {
...buttonProps,
afterClick: this._onToggleMenu,
visible: !showMore
};
return (
2019-11-25 12:01:54 +00:00
<BottomSheet
onCancel = { this._onCancel }
onSwipe = { this._onSwipe }
renderHeader = { this._renderMenuExpandToggle }>
<AudioRouteButton { ...buttonProps } />
{!toolbarButtons.has('invite') && <InviteButton { ...buttonProps } />}
<AudioOnlyButton { ...buttonProps } />
{!toolbarButtons.has('raisehand') && <RaiseHandButton { ...buttonProps } />}
2021-04-09 12:30:25 +00:00
<SecurityDialogButton { ...buttonProps } />
<ScreenSharingButton { ...buttonProps } />
<MoreOptionsButton { ...moreOptionsButtonProps } />
2019-11-25 12:01:54 +00:00
<Collapsible collapsed = { !showMore }>
{!toolbarButtons.has('togglecamera') && <ToggleCameraButton { ...buttonProps } />}
{!toolbarButtons.has('tileview') && <TileViewButton { ...buttonProps } />}
<RecordButton { ...buttonProps } />
2019-11-25 12:01:54 +00:00
<LiveStreamButton { ...buttonProps } />
<SharedVideoButton { ...buttonProps } />
2020-03-24 11:24:36 +00:00
<ClosedCaptionButton { ...buttonProps } />
2019-11-25 12:01:54 +00:00
<SharedDocumentButton { ...buttonProps } />
<MuteEveryoneButton { ...buttonProps } />
<MuteEveryonesVideoButton { ...buttonProps } />
2019-11-25 12:01:54 +00:00
<HelpButton { ...buttonProps } />
</Collapsible>
</BottomSheet>
);
}
_renderMenuExpandToggle: () => React$Element<any>;
/**
* Function to render the menu toggle in the bottom sheet header area.
*
* @returns {React$Element}
*/
_renderMenuExpandToggle() {
return (
<View
style = { [
this.props._bottomSheetStyles.sheet,
styles.expandMenuContainer
] }>
<TouchableOpacity onPress = { this._onToggleMenu }>
{ /* $FlowFixMe */ }
<IconDragHandle
fill = { this.props._bottomSheetStyles.buttons.iconStyle.color } />
</TouchableOpacity>
</View>
);
}
2019-07-11 11:32:17 +00:00
_onCancel: () => boolean;
/**
2018-05-16 21:49:03 +00:00
* Hides this {@code OverflowMenu}.
*
* @private
2019-07-11 11:32:17 +00:00
* @returns {boolean}
*/
_onCancel() {
2019-07-11 11:32:17 +00:00
if (this.props._isOpen) {
this.props.dispatch(hideDialog(OverflowMenu_));
return true;
}
return false;
}
2019-11-25 12:01:54 +00:00
_onSwipe: string => void;
2019-11-25 12:01:54 +00:00
/**
* Callback to be invoked when swipe gesture is detected on the menu. Returns true
* if the swipe gesture is handled by the menu, false otherwise.
2019-11-25 12:01:54 +00:00
*
* @param {string} direction - Direction of 'up' or 'down'.
* @returns {boolean}
2019-11-25 12:01:54 +00:00
*/
_onSwipe(direction) {
2019-11-25 12:01:54 +00:00
const { showMore } = this.state;
switch (direction) {
case 'up':
2019-11-25 12:01:54 +00:00
!showMore && this.setState({
showMore: true
});
return !showMore;
case 'down':
showMore && this.setState({
showMore: false
});
return showMore;
2019-11-25 12:01:54 +00:00
}
}
_onToggleMenu: () => void;
/**
* Callback to be invoked when the expand menu button is pressed.
*
* @returns {void}
*/
_onToggleMenu() {
this.setState({
showMore: !this.state.showMore
});
}
}
/**
* 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 {
_bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
_isOpen: isDialogOpen(state, OverflowMenu_),
_width: state['features/base/responsive-ui'].clientWidth
};
}
OverflowMenu_ = connect(_mapStateToProps)(OverflowMenu);
export default OverflowMenu_;