jiti-meet/react/features/video-layout/components/TileViewButton.js

100 lines
2.5 KiB
JavaScript
Raw Normal View History

// @flow
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
import {
createToolbarEvent,
sendAnalytics
} from '../../analytics';
2020-05-20 10:57:03 +00:00
import { TILE_VIEW_ENABLED, getFeatureFlag } from '../../base/flags';
import { translate } from '../../base/i18n';
2019-08-30 16:39:06 +00:00
import { IconTileView } from '../../base/icons';
2019-03-21 16:38:29 +00:00
import { connect } from '../../base/redux';
import {
AbstractButton,
type AbstractButtonProps
} from '../../base/toolbox';
import { setTileView } from '../actions';
import logger from '../logger';
/**
* The type of the React {@code Component} props of {@link TileViewButton}.
*/
type Props = AbstractButtonProps & {
/**
* Whether or not tile view layout has been enabled as the user preference.
*/
_tileViewEnabled: boolean,
/**
* Used to dispatch actions from the buttons.
*/
2019-03-19 15:42:25 +00:00
dispatch: Dispatch<any>
};
/**
* Component that renders a toolbar button for toggling the tile layout view.
*
* @extends AbstractButton
*/
class TileViewButton<P: Props> extends AbstractButton<P, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.tileView';
2019-08-30 16:39:06 +00:00
icon = IconTileView;
label = 'toolbar.enterTileView';
toggledLabel = 'toolbar.exitTileView';
tooltip = 'toolbar.tileViewToggle';
/**
* Handles clicking / pressing the button.
*
* @override
* @protected
* @returns {void}
*/
_handleClick() {
const { _tileViewEnabled, dispatch } = this.props;
sendAnalytics(createToolbarEvent(
'tileview.button',
{
'is_enabled': _tileViewEnabled
}));
const value = !_tileViewEnabled;
logger.debug(`Tile view ${value ? 'enable' : 'disable'}`);
dispatch(setTileView(value));
}
/**
* Indicates whether this button is in toggled state or not.
*
* @override
* @protected
* @returns {boolean}
*/
_isToggled() {
return this.props._tileViewEnabled;
}
}
/**
* Maps (parts of) the redux state to the associated props for the
* {@code TileViewButton} component.
*
* @param {Object} state - The Redux state.
* @param {Object} ownProps - The properties explicitly passed to the component instance.
* @returns {Props}
*/
function _mapStateToProps(state, ownProps) {
const enabled = getFeatureFlag(state, TILE_VIEW_ENABLED, true);
const { visible = enabled } = ownProps;
return {
_tileViewEnabled: state['features/video-layout'].tileViewEnabled,
visible
};
}
export default translate(connect(_mapStateToProps)(TileViewButton));