2018-06-15 18:10:22 +00:00
|
|
|
import Tooltip from '@atlaskit/tooltip';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-05-21 22:16:38 +00:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
|
|
|
import { translate } from '../../../base/i18n';
|
|
|
|
|
|
|
|
/**
|
2018-06-15 18:10:22 +00:00
|
|
|
* React {@code Component} for starting or stopping a live streaming of the
|
|
|
|
* current conference and displaying the current state of live streaming.
|
|
|
|
*
|
|
|
|
* @extends Component
|
2018-05-21 22:16:38 +00:00
|
|
|
*/
|
2018-06-15 18:10:22 +00:00
|
|
|
class OverflowMenuLiveStreamingItem extends Component {
|
2018-05-21 22:16:38 +00:00
|
|
|
/**
|
2018-06-15 18:10:22 +00:00
|
|
|
* Default values for {@code OverflowMenuLiveStreamingItem}
|
|
|
|
* component's properties.
|
|
|
|
*
|
|
|
|
* @static
|
2018-05-21 22:16:38 +00:00
|
|
|
*/
|
2018-06-15 18:10:22 +00:00
|
|
|
static defaultProps = {
|
|
|
|
tooltipPosition: 'left',
|
|
|
|
disabled: false
|
|
|
|
};
|
2018-05-21 22:16:38 +00:00
|
|
|
|
|
|
|
/**
|
2018-06-15 18:10:22 +00:00
|
|
|
* The type of the React {@code Component} props of
|
|
|
|
* {@link OverflowMenuLiveStreamingItem}.
|
2018-05-21 22:16:38 +00:00
|
|
|
*/
|
2018-06-15 18:10:22 +00:00
|
|
|
static propTypes = {
|
2018-05-21 22:16:38 +00:00
|
|
|
|
2018-06-15 18:10:22 +00:00
|
|
|
/**
|
|
|
|
* Whether menu item is disabled or not.
|
|
|
|
*/
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The callback to invoke when {@code OverflowMenuLiveStreamingItem} is
|
|
|
|
* clicked.
|
|
|
|
*/
|
|
|
|
onClick: Function,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The current live streaming session, if any.
|
|
|
|
*/
|
|
|
|
session: PropTypes.object,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Invoked to obtain translated strings.
|
|
|
|
*/
|
|
|
|
t: Function,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The text to display in the tooltip.
|
|
|
|
*/
|
|
|
|
tooltip: PropTypes.string,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* From which direction the tooltip should appear, relative to the
|
|
|
|
* button.
|
|
|
|
*/
|
|
|
|
tooltipPosition: PropTypes.string
|
|
|
|
};
|
2018-05-21 22:16:38 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Implements React's {@link Component#render()}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
render() {
|
2018-06-15 18:10:22 +00:00
|
|
|
const { disabled, onClick, session, t, tooltip, tooltipPosition }
|
|
|
|
= this.props;
|
2018-05-21 22:16:38 +00:00
|
|
|
|
|
|
|
const translationKey = session
|
|
|
|
? 'dialog.stopLiveStreaming'
|
|
|
|
: 'dialog.startLiveStreaming';
|
|
|
|
|
2018-06-15 18:10:22 +00:00
|
|
|
let className = 'overflow-menu-item';
|
|
|
|
|
|
|
|
className += disabled ? ' disabled' : '';
|
|
|
|
|
|
|
|
const button = (// eslint-disable-line no-extra-parens
|
|
|
|
<span>
|
2018-05-21 22:16:38 +00:00
|
|
|
<span className = 'profile-text'>
|
|
|
|
{ t(translationKey) }
|
|
|
|
</span>
|
|
|
|
<span className = 'beta-tag'>
|
|
|
|
{ t('recording.beta') }
|
|
|
|
</span>
|
2018-06-15 18:10:22 +00:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<li
|
|
|
|
aria-label = { t('dialog.accessibilityLabel.liveStreaming') }
|
|
|
|
className = { className }
|
|
|
|
onClick = { disabled ? null : onClick }>
|
|
|
|
<span className = 'overflow-menu-item-icon'>
|
|
|
|
<i className = 'icon-public' />
|
|
|
|
</span>
|
|
|
|
{ tooltip
|
|
|
|
? <Tooltip
|
|
|
|
content = { tooltip }
|
|
|
|
position = { tooltipPosition }>
|
|
|
|
{ button }
|
|
|
|
</Tooltip>
|
|
|
|
: button }
|
2018-05-21 22:16:38 +00:00
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default translate(OverflowMenuLiveStreamingItem);
|