jiti-meet/react/features/toolbox/components/web/VideoSettingsButton.js

191 lines
5.0 KiB
JavaScript
Raw Normal View History

// @flow
import React, { Component } from 'react';
2020-05-20 10:57:03 +00:00
import { isMobileBrowser } from '../../../base/environment/utils';
2021-02-23 11:09:22 +00:00
import { translate } from '../../../base/i18n';
import { IconArrowUp } from '../../../base/icons';
import { connect } from '../../../base/redux';
2020-07-24 12:14:33 +00:00
import { ToolboxButtonWithIcon } from '../../../base/toolbox/components';
import { getLocalJitsiVideoTrack } from '../../../base/tracks';
import { VideoSettingsPopup, toggleVideoSettings } from '../../../settings';
import { getVideoSettingsVisibility } from '../../../settings/functions';
2020-05-20 10:57:03 +00:00
import { isVideoSettingsButtonDisabled } from '../../functions';
import VideoMuteButton from '../VideoMuteButton';
type Props = {
/**
* The button's key.
*/
buttonKey?: string,
/**
* External handler for click action.
*/
handleClick: Function,
/**
* Click handler for the small icon. Opens video options.
*/
onVideoOptionsClick: Function,
/**
* Indicates whether video permissions have been granted or denied.
*/
hasPermissions: boolean,
/**
* Whether there is a video track or not.
*/
hasVideoTrack: boolean,
/**
2021-11-04 21:10:43 +00:00
* If the button should be disabled.
*/
2020-04-16 10:47:10 +00:00
isDisabled: boolean,
/**
* Notify mode for `toolbarButtonClicked` event -
* whether to only notify or to also prevent button click routine.
*/
notifyMode?: string,
/**
* Flag controlling the visibility of the button.
* VideoSettings popup is currently disabled on mobile browsers
* as mobile devices do not support capture of more than one
* camera at a time.
*/
2021-02-23 11:09:22 +00:00
visible: boolean,
/**
2021-11-04 21:10:43 +00:00
* Used for translation.
2021-02-23 11:09:22 +00:00
*/
t: Function,
/**
2021-11-04 21:10:43 +00:00
* Defines is popup is open.
*/
isOpen: boolean
};
/**
* Button used for video & video settings.
*
* @returns {ReactElement}
*/
class VideoSettingsButton extends Component<Props> {
/**
* Initializes a new {@code VideoSettingsButton} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onEscClick = this._onEscClick.bind(this);
this._onClick = this._onClick.bind(this);
}
/**
* Returns true if the settings icon is disabled.
*
* @returns {boolean}
*/
_isIconDisabled() {
const { hasPermissions, hasVideoTrack, isDisabled } = this.props;
return (!hasPermissions || isDisabled) && !hasVideoTrack;
2020-04-16 10:47:10 +00:00
}
_onEscClick: (KeyboardEvent) => void;
/**
* Click handler for the more actions entries.
*
* @param {KeyboardEvent} event - Esc key click to close the popup.
* @returns {void}
*/
_onEscClick(event) {
if (event.key === 'Escape' && this.props.isOpen) {
event.preventDefault();
event.stopPropagation();
this._onClick();
}
}
2020-04-16 10:47:10 +00:00
_onClick: () => void;
/**
* Click handler for the more actions entries.
*
* @returns {void}
*/
_onClick() {
const { onVideoOptionsClick } = this.props;
onVideoOptionsClick();
}
/**
* Implements React's {@link Component#render}.
*
* @inheritdoc
*/
render() {
const { t, visible, isOpen, buttonKey, notifyMode } = this.props;
return visible ? (
<VideoSettingsPopup>
<ToolboxButtonWithIcon
ariaControls = 'video-settings-dialog'
ariaExpanded = { isOpen }
ariaHasPopup = { true }
ariaLabel = { this.props.t('toolbar.videoSettings') }
buttonKey = { buttonKey }
icon = { IconArrowUp }
iconDisabled = { this._isIconDisabled() }
iconId = 'video-settings-button'
2021-02-23 11:09:22 +00:00
iconTooltip = { t('toolbar.videoSettings') }
notifyMode = { notifyMode }
onIconClick = { this._onClick }
onIconKeyDown = { this._onEscClick }>
<VideoMuteButton
buttonKey = { buttonKey }
notifyMode = { notifyMode } />
</ToolboxButtonWithIcon>
</VideoSettingsPopup>
) : <VideoMuteButton
buttonKey = { buttonKey }
notifyMode = { notifyMode } />;
}
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @returns {Object}
*/
function mapStateToProps(state) {
const { permissions = {} } = state['features/base/devices'];
return {
hasPermissions: permissions.video,
hasVideoTrack: Boolean(getLocalJitsiVideoTrack(state)),
2020-04-16 10:47:10 +00:00
isDisabled: isVideoSettingsButtonDisabled(state),
isOpen: getVideoSettingsVisibility(state),
visible: !isMobileBrowser()
};
}
const mapDispatchToProps = {
onVideoOptionsClick: toggleVideoSettings
};
2021-02-23 11:09:22 +00:00
export default translate(connect(
mapStateToProps,
2021-11-04 21:10:43 +00:00
mapDispatchToProps
2021-02-23 11:09:22 +00:00
)(VideoSettingsButton));