jiti-meet/react/features/video-status-label/components/VideoStatusLabel.js

225 lines
6.7 KiB
JavaScript

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 the filmstrip is displayed with remote videos. Used to
* determine display classes to set.
*/
_filmstripVisible: React.PropTypes.bool,
/**
* Whether or not a high-definition large video is displayed.
*/
_largeVideoHD: React.PropTypes.bool,
/**
* Whether or note remote videos are visible in the filmstrip,
* regardless of count. Used to determine display classes to set.
*/
_remoteVideosVisible: 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);
this.state = {
// Whether or not the filmstrip is transitioning from not visible
// to visible. Used to set a transition class for animation.
togglingToVisible: false
};
// Bind event handler so it is only bound once for every instance.
this._toggleAudioOnly = this._toggleAudioOnly.bind(this);
}
/**
* Updates the state for whether or not the filmstrip is being toggled to
* display after having being hidden.
*
* @inheritdoc
* @param {Object} nextProps - The read-only props which this Component will
* receive.
* @returns {void}
*/
componentWillReceiveProps(nextProps) {
this.setState({
togglingToVisible: nextProps._filmstripVisible
&& !this.props._filmstripVisible
});
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
_audioOnly,
_conferenceStarted,
_filmstripVisible,
_remoteVideosVisible,
_largeVideoHD,
t
} = this.props;
// FIXME 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.
if (!_conferenceStarted) {
return null;
}
let displayedLabel;
if (_audioOnly) {
displayedLabel = <i className = 'icon-visibility-off' />;
} else {
displayedLabel = _largeVideoHD
? t('videoStatus.hd') : t('videoStatus.sd');
}
// Determine which classes should be set on the component. These classes
// will used to help with animations and setting position.
const baseClasses = 'video-state-indicator moveToCorner';
const filmstrip
= _filmstripVisible ? 'with-filmstrip' : 'without-filmstrip';
const remoteVideosVisible = _remoteVideosVisible
? 'with-remote-videos'
: 'without-remote-videos';
const opening = this.state.togglingToVisible ? 'opening' : '';
const classNames
= `${baseClasses} ${filmstrip} ${remoteVideosVisible} ${opening}`;
return (
<div
className = { classNames }
id = 'videoResolutionLabel' >
{ displayedLabel }
{ this._renderVideonMenu() }
</div>
);
}
/**
* Renders a dropdown menu for changing video modes.
*
* @private
* @returns {ReactElement}
*/
_renderVideonMenu() {
const { _audioOnly, t } = this.props;
const audioOnlyAttributes = _audioOnly ? { className: 'active' }
: { onClick: this._toggleAudioOnly };
const videoAttributes = _audioOnly ? { onClick: this._toggleAudioOnly }
: { className: 'active' };
return (
<div className = 'video-state-indicator-menu'>
<div className = 'video-state-indicator-menu-options'>
<div { ...audioOnlyAttributes }>
<i className = 'icon-visibility' />
{ t('audioOnly.audioOnly') }
</div>
<div { ...videoAttributes }>
<i className = 'icon-camera' />
{ this.props._largeVideoHD
? t('videoStatus.hdVideo')
: t('videoStatus.sdVideo') }
</div>
</div>
</div>
);
}
/**
* Dispatches an action to toggle the state of audio only mode.
*
* @private
* @returns {void}
*/
_toggleAudioOnly() {
this.props.dispatch(toggleAudioOnly());
}
}
/**
* Maps (parts of) the Redux state to the associated {@code VideoStatusLabel}'s
* props.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _audioOnly: boolean,
* _conferenceStarted: boolean,
* _filmstripVisible: true,
* _largeVideoHD: (boolean|undefined),
* _remoteVideosVisible: boolean
* }}
*/
function _mapStateToProps(state) {
const {
audioOnly,
conference,
isLargeVideoHD
} = state['features/base/conference'];
const {
remoteVideosVisible,
visible
} = state['features/filmstrip'];
return {
_audioOnly: audioOnly,
_conferenceStarted: Boolean(conference),
_filmstripVisible: visible,
_largeVideoHD: isLargeVideoHD,
_remoteVideosVisible: remoteVideosVisible
};
}
export default translate(connect(_mapStateToProps)(VideoStatusLabel));