import React, { Component } from 'react'; import { connect } from 'react-redux'; import { toggleAudioOnly } from '../../base/conference'; import { translate } from '../../base/i18n'; /** * React {@code Component} responsible for displaying a label that indicates * the displayed video state of the current conference. {@code AudioOnlyLabel} * will display when the conference is in audio only mode. {@code HDVideoLabel} * will display if not in audio only mode and a high-definition large video is * being displayed. */ export class VideoStatusLabel extends Component { /** * {@code VideoStatusLabel}'s property types. * * @static */ static propTypes = { /** * Whether or not the conference is in audio only mode. */ _audioOnly: React.PropTypes.bool, /** * Whether or not a connection to a conference has been established. */ _conferenceStarted: React.PropTypes.bool, /** * Whether or not a high-definition large video is displayed. */ _largeVideoHD: React.PropTypes.bool, /** * Invoked to request toggling of audio only mode. */ dispatch: React.PropTypes.func, /** * Invoked to obtain translated strings. */ t: React.PropTypes.func } /** * Initializes a new {@code VideoStatusLabel} instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ constructor(props) { super(props); // Bind event handler so it is only bound once for every instance. this._toggleAudioOnly = this._toggleAudioOnly.bind(this); } /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { const { _audioOnly, _conferenceStarted, _largeVideoHD, t } = this.props; // FIXME These truthy checks should not be necessary. The // _conferenceStarted check is used to be defensive against toggling // audio only mode while there is no conference and hides the need for // error handling around audio only mode toggling. The _largeVideoHD // check is used to prevent the label from displaying while the video // resolution status is unknown but ties this component to the // LargeVideoManager. if (!_conferenceStarted || _largeVideoHD === undefined) { return null; } let displayedLabel; if (_audioOnly) { displayedLabel = ; } else { displayedLabel = _largeVideoHD ? t('videoStatus.hd') : t('videoStatus.sd'); } return (