jiti-meet/react/features/video-menu/components/native/RemoteVideoMenu.js

262 lines
7.7 KiB
JavaScript
Raw Normal View History

2018-12-19 18:40:17 +00:00
// @flow
import React, { PureComponent } from 'react';
2018-12-19 18:40:17 +00:00
import { Text, View } from 'react-native';
import { Divider } from 'react-native-paper';
2018-12-19 18:40:17 +00:00
2019-06-26 14:08:23 +00:00
import { Avatar } from '../../../base/avatar';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
2019-07-11 11:32:17 +00:00
import { BottomSheet, isDialogOpen } from '../../../base/dialog';
import { KICK_OUT_ENABLED, getFeatureFlag } from '../../../base/flags';
import { translate } from '../../../base/i18n';
import {
getParticipantById,
getParticipantDisplayName
} from '../../../base/participants';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
import PrivateMessageButton from '../../../chat/components/native/PrivateMessageButton';
import { hideRemoteVideoMenu } from '../../actions.native';
import ConnectionStatusButton from '../native/ConnectionStatusButton';
2018-12-19 18:40:17 +00:00
import AskUnmuteButton from './AskUnmuteButton';
import GrantModeratorButton from './GrantModeratorButton';
2018-12-19 18:40:17 +00:00
import KickButton from './KickButton';
import MuteButton from './MuteButton';
import MuteEveryoneElseButton from './MuteEveryoneElseButton';
import MuteVideoButton from './MuteVideoButton';
2019-06-19 13:32:09 +00:00
import PinButton from './PinButton';
import SendToBreakoutRoom from './SendToBreakoutRoom';
2018-12-19 18:40:17 +00:00
import styles from './styles';
// import VolumeSlider from './VolumeSlider';
2018-12-21 09:53:24 +00:00
/**
* Size of the rendered avatar in the menu.
*/
const AVATAR_SIZE = 24;
2018-12-21 09:53:24 +00:00
2018-12-19 18:40:17 +00:00
type Props = {
/**
* The Redux dispatch function.
*/
dispatch: Function,
/**
* The ID of the participant for which this menu opened for.
2018-12-19 18:40:17 +00:00
*/
participantId: String,
2018-12-19 18:40:17 +00:00
/**
* The color-schemed stylesheet of the BottomSheet.
*/
_bottomSheetStyles: StyleType,
/**
* The id of the current room.
*/
_currentRoomId: String,
/**
* Whether or not to display the kick button.
*/
_disableKick: boolean,
/**
* Whether or not to display the send private message button.
*/
_disablePrivateChat: Boolean,
/**
* Whether or not to display the remote mute buttons.
*/
_disableRemoteMute: boolean,
/**
* Whether or not to display the grant moderator button.
*/
_disableGrantModerator: Boolean,
2019-07-11 11:32:17 +00:00
/**
* True if the menu is currently open, false otherwise.
*/
_isOpen: boolean,
/**
* Whether the participant is present in the room or not.
*/
_isParticipantAvailable?: boolean,
2018-12-19 18:40:17 +00:00
/**
* Display name of the participant retrieved from Redux.
2018-12-19 18:40:17 +00:00
*/
_participantDisplayName: string,
/**
* Array containing the breakout rooms.
*/
_rooms: Array<Object>,
/**
* Translation function.
*/
t: Function
2018-12-19 18:40:17 +00:00
}
2019-07-11 11:32:17 +00:00
// eslint-disable-next-line prefer-const
let RemoteVideoMenu_;
2018-12-19 18:40:17 +00:00
/**
* Class to implement a popup menu that opens upon long pressing a thumbnail.
*/
class RemoteVideoMenu extends PureComponent<Props> {
2018-12-19 18:40:17 +00:00
/**
* Constructor of the component.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onCancel = this._onCancel.bind(this);
this._renderMenuHeader = this._renderMenuHeader.bind(this);
2018-12-19 18:40:17 +00:00
}
/**
* Implements {@code Component#render}.
*
* @inheritdoc
*/
render() {
const {
_disableKick,
_disablePrivateChat,
_disableRemoteMute,
_disableGrantModerator,
_isParticipantAvailable,
_rooms,
_currentRoomId,
participantId,
t
} = this.props;
2018-12-19 18:40:17 +00:00
const buttonProps = {
afterClick: this._onCancel,
showLabel: true,
participantID: participantId,
2019-11-25 12:01:54 +00:00
styles: this.props._bottomSheetStyles.buttons
2018-12-19 18:40:17 +00:00
};
return (
<BottomSheet
onCancel = { this._onCancel }
renderHeader = { this._renderMenuHeader }
showSlidingView = { _isParticipantAvailable }>
<AskUnmuteButton { ...buttonProps } />
{ !_disableRemoteMute && <MuteButton { ...buttonProps } /> }
<MuteEveryoneElseButton { ...buttonProps } />
{ !_disableRemoteMute && <MuteVideoButton { ...buttonProps } /> }
<Divider style = { styles.divider } />
{ !_disableKick && <KickButton { ...buttonProps } /> }
{ !_disableGrantModerator && <GrantModeratorButton { ...buttonProps } /> }
<PinButton { ...buttonProps } />
{ !_disablePrivateChat && <PrivateMessageButton { ...buttonProps } /> }
2020-12-22 09:12:52 +00:00
<ConnectionStatusButton { ...buttonProps } />
{_rooms.length > 1 && <>
<Divider style = { styles.divider } />
<View style = { styles.contextMenuItem }>
<Text style = { styles.contextMenuItemText }>
{t('breakoutRooms.actions.sendToBreakoutRoom')}
</Text>
</View>
{_rooms.map(room => _currentRoomId !== room.id && (<SendToBreakoutRoom
key = { room.id }
room = { room }
{ ...buttonProps } />))}
</>}
{/* <VolumeSlider participantID = { participantId } />*/}
2018-12-19 18:40:17 +00:00
</BottomSheet>
);
}
2019-07-11 11:32:17 +00:00
_onCancel: () => boolean;
2018-12-19 18:40:17 +00:00
/**
* Callback to hide the {@code RemoteVideoMenu}.
*
* @private
2019-07-11 11:32:17 +00:00
* @returns {boolean}
2018-12-19 18:40:17 +00:00
*/
_onCancel() {
2019-07-11 11:32:17 +00:00
if (this.props._isOpen) {
this.props.dispatch(hideRemoteVideoMenu());
return true;
}
return false;
2018-12-19 18:40:17 +00:00
}
_renderMenuHeader: () => React$Element<any>;
/**
* Function to render the menu's header.
*
* @returns {React$Element}
*/
_renderMenuHeader() {
const { _bottomSheetStyles, participantId } = this.props;
return (
<View
style = { [
_bottomSheetStyles.sheet,
styles.participantNameContainer ] }>
<Avatar
participantId = { participantId }
size = { AVATAR_SIZE } />
<Text style = { styles.participantNameLabel }>
{ this.props._participantDisplayName }
</Text>
</View>
);
}
2018-12-19 18:40:17 +00:00
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @param {Object} ownProps - Properties of component.
* @private
2019-07-11 11:32:17 +00:00
* @returns {Props}
2018-12-19 18:40:17 +00:00
*/
function _mapStateToProps(state, ownProps) {
const kickOutEnabled = getFeatureFlag(state, KICK_OUT_ENABLED, true);
const { participantId } = ownProps;
const { remoteVideoMenu = {}, disableRemoteMute } = state['features/base/config'];
const isParticipantAvailable = getParticipantById(state, participantId);
const { disableKick, disablePrivateChat } = remoteVideoMenu;
const _rooms = Object.values(getBreakoutRooms(state));
const _currentRoomId = getCurrentRoomId(state);
const shouldDisableKick = disableKick || !kickOutEnabled;
2018-12-19 18:40:17 +00:00
return {
_bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
_currentRoomId,
_disableKick: Boolean(shouldDisableKick),
_disableRemoteMute: Boolean(disableRemoteMute),
_disablePrivateChat: Boolean(disablePrivateChat),
2019-07-11 11:32:17 +00:00
_isOpen: isDialogOpen(state, RemoteVideoMenu_),
_isParticipantAvailable: Boolean(isParticipantAvailable),
_participantDisplayName: getParticipantDisplayName(state, participantId),
_rooms
2018-12-19 18:40:17 +00:00
};
}
RemoteVideoMenu_ = translate(connect(_mapStateToProps)(RemoteVideoMenu));
2019-07-11 11:32:17 +00:00
export default RemoteVideoMenu_;