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'; |
export { default as Toolbox } from './Toolbox'; |
||||||
|
|||||||
Loading…
Reference in new issue