mirror of https://github.com/jitsi/jitsi-meet
Audio only mode can be used to save bandwidth. In this mode local video is muted and last N is set to 0, thus disabling all remote video. When this mode is enabled avatars are shown.pull/1509/head
Saúl Ibarra Corretgé
8 years ago
committed by
Leonard Kim
parent
1bcdbd1d96
commit
9ba3a1c4ff
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,104 @@ |
||||
import React, { Component } from 'react'; |
||||
|
||||
import UIUtil from '../../../../modules/UI/util/UIUtil'; |
||||
|
||||
import { translate } from '../../base/i18n'; |
||||
|
||||
/** |
||||
* React {@code Component} for displaying a message to indicate audio only mode |
||||
* is active and for triggering a tooltip to provide more information about |
||||
* audio only mode. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
export class AudioOnlyLabel extends Component { |
||||
/** |
||||
* {@code AudioOnlyLabel}'s property types. |
||||
* |
||||
* @static |
||||
*/ |
||||
static propTypes = { |
||||
/** |
||||
* Invoked to obtain translated strings. |
||||
*/ |
||||
t: React.PropTypes.func |
||||
} |
||||
|
||||
/** |
||||
* Initializes a new {@code AudioOnlyLabel} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
/** |
||||
* The internal reference to the DOM/HTML element at the top of the |
||||
* React {@code Component}'s DOM/HTML hierarchy. It is necessary for |
||||
* setting a tooltip to display when hovering over the component. |
||||
* |
||||
* @private |
||||
* @type {HTMLDivElement} |
||||
*/ |
||||
this._rootElement = null; |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._setRootElement = this._setRootElement.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Sets a tooltip on the component to display on hover. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {void} |
||||
*/ |
||||
componentDidMount() { |
||||
this._setTooltip(); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
return ( |
||||
<div |
||||
className = 'audio-only-label' |
||||
ref = { this._setRootElement }> |
||||
<i className = 'icon-visibility-off' /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Sets the instance variable for the component's root element so it can be |
||||
* accessed directly. |
||||
* |
||||
* @param {HTMLDivElement} element - The topmost DOM element of the |
||||
* component's DOM/HTML hierarchy. |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_setRootElement(element) { |
||||
this._rootElement = element; |
||||
} |
||||
|
||||
/** |
||||
* Sets the tooltip on the component's root element. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_setTooltip() { |
||||
UIUtil.setTooltip( |
||||
this._rootElement, |
||||
'audioOnly.howToDisable', |
||||
'left' |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default translate(AudioOnlyLabel); |
||||
@ -0,0 +1,58 @@ |
||||
import React, { Component } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import AudioOnlyLabel from './AudioOnlyLabel'; |
||||
|
||||
/** |
||||
* Component responsible for displaying a label that indicates some state of the |
||||
* current conference. The AudioOnlyLabel component will be displayed when the |
||||
* conference is in audio only mode. |
||||
*/ |
||||
export class StatusLabel extends Component { |
||||
/** |
||||
* StatusLabel component's property types. |
||||
* |
||||
* @static |
||||
*/ |
||||
static propTypes = { |
||||
/** |
||||
* The redux store representation of the current conference. |
||||
*/ |
||||
_conference: React.PropTypes.object |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement|null} |
||||
*/ |
||||
render() { |
||||
if (!this.props._conference.audioOnly) { |
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div className = 'moveToCorner'> |
||||
<AudioOnlyLabel /> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps (parts of) the Redux state to the associated StatusLabel's props. |
||||
* |
||||
* @param {Object} state - The Redux state. |
||||
* @private |
||||
* @returns {{ |
||||
* _conference: Object, |
||||
* }} |
||||
*/ |
||||
function _mapStateToProps(state) { |
||||
return { |
||||
_conference: state['features/base/conference'] |
||||
}; |
||||
} |
||||
|
||||
export default connect(_mapStateToProps)(StatusLabel); |
||||
@ -0,0 +1 @@ |
||||
export { default as StatusLabel } from './StatusLabel'; |
||||
@ -0,0 +1 @@ |
||||
export * from './components'; |
||||
@ -0,0 +1,103 @@ |
||||
import React, { Component } from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
|
||||
import { toggleAudioOnly } from '../../base/conference'; |
||||
|
||||
import ToolbarButton from './ToolbarButton'; |
||||
|
||||
/** |
||||
* React {@code Component} for toggling audio only mode. |
||||
* |
||||
* @extends Component |
||||
*/ |
||||
class AudioOnlyButton extends Component { |
||||
/** |
||||
* {@code AudioOnlyButton}'s property types. |
||||
* |
||||
* @static |
||||
*/ |
||||
static propTypes = { |
||||
/** |
||||
* Whether or not audio only mode is enabled. |
||||
*/ |
||||
_audioOnly: React.PropTypes.bool, |
||||
|
||||
/** |
||||
* Invoked to toggle audio only mode. |
||||
*/ |
||||
dispatch: React.PropTypes.func, |
||||
|
||||
/** |
||||
* From which side the button tooltip should appear. |
||||
*/ |
||||
tooltipPosition: React.PropTypes.string |
||||
} |
||||
|
||||
/** |
||||
* Initializes a new {@code AudioOnlyButton} instance. |
||||
* |
||||
* @param {Object} props - The read-only properties with which the new |
||||
* instance is to be initialized. |
||||
*/ |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
// Bind event handlers so they are only bound once for every instance.
|
||||
this._onClick = this._onClick.bind(this); |
||||
} |
||||
|
||||
/** |
||||
* Implements React's {@link Component#render()}. |
||||
* |
||||
* @inheritdoc |
||||
* @returns {ReactElement} |
||||
*/ |
||||
render() { |
||||
const buttonConfiguration = { |
||||
buttonName: 'audioonly', |
||||
classNames: [ 'button', 'icon-visibility' ], |
||||
enabled: true, |
||||
id: 'toolbar_button_audioonly', |
||||
tooltipKey: 'toolbar.audioonly' |
||||
}; |
||||
|
||||
if (this.props._audioOnly) { |
||||
buttonConfiguration.classNames.push('toggled button-active'); |
||||
} |
||||
|
||||
return ( |
||||
<ToolbarButton |
||||
button = { buttonConfiguration } |
||||
onClick = { this._onClick } |
||||
tooltipPosition = { this.props.tooltipPosition } /> |
||||
); |
||||
} |
||||
|
||||
/** |
||||
* Dispatches an action to toggle audio only mode. |
||||
* |
||||
* @private |
||||
* @returns {void} |
||||
*/ |
||||
_onClick() { |
||||
this.props.dispatch(toggleAudioOnly()); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Maps (parts of) the Redux state to the associated {@code AudioOnlyButton}'s |
||||
* props. |
||||
* |
||||
* @param {Object} state - The Redux state. |
||||
* @private |
||||
* @returns {{ |
||||
* _audioOnly: boolean |
||||
* }} |
||||
*/ |
||||
function _mapStateToProps(state) { |
||||
return { |
||||
_audioOnly: state['features/base/conference'].audioOnly |
||||
}; |
||||
} |
||||
|
||||
export default connect(_mapStateToProps)(AudioOnlyButton); |
||||
@ -1 +1,2 @@ |
||||
export { default as AudioOnlyButton } from './AudioOnlyButton'; |
||||
export { default as Toolbox } from './Toolbox'; |
||||
|
||||
Loading…
Reference in new issue