2f994b1227
The Device Selection modal consists of: - DeviceSelection, an overly smart component responsible for triggering stream creation and cleanup. - DeviceSelector for selector elements. - VideoInputPreview for displaying a video preview. - AudioInputPreview for displaying a volume meter. - AudioOutputPreview for a test sound output link. Store changes include is primarily storing the list of available devices in redux. Other app state has been left alone for future refactoring.
123 lines
2.8 KiB
JavaScript
123 lines
2.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import { translate } from '../../base/i18n';
|
|
|
|
const TEST_SOUND_PATH = 'sounds/ring.wav';
|
|
|
|
/**
|
|
* React component for playing a test sound through a specified audio device.
|
|
*
|
|
* @extends Component
|
|
*/
|
|
class AudioOutputPreview extends Component {
|
|
/**
|
|
* AudioOutputPreview component's property types.
|
|
*
|
|
* @static
|
|
*/
|
|
static propTypes = {
|
|
/**
|
|
* The device id of the audio output device to use.
|
|
*/
|
|
deviceId: React.PropTypes.string,
|
|
|
|
/**
|
|
* Invoked to obtain translated strings.
|
|
*/
|
|
t: React.PropTypes.func
|
|
}
|
|
|
|
/**
|
|
* Initializes a new AudioOutputPreview instance.
|
|
*
|
|
* @param {Object} props - The read-only React Component props with which
|
|
* the new instance is to be initialized.
|
|
*/
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this._audioElement = null;
|
|
|
|
this._onClick = this._onClick.bind(this);
|
|
this._setAudioElement = this._setAudioElement.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Sets the target output device on the component's audio element after
|
|
* initial render.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {void}
|
|
*/
|
|
componentDidMount() {
|
|
this._setAudioSink();
|
|
}
|
|
|
|
/**
|
|
* Updates the audio element when the target output device changes and the
|
|
* audio element has re-rendered.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {void}
|
|
*/
|
|
componentDidUpdate() {
|
|
this._setAudioSink();
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
return (
|
|
<div className = 'audio-output-preview'>
|
|
<a onClick = { this._onClick }>
|
|
{ this.props.t('deviceSelection.testAudio') }
|
|
</a>
|
|
<audio
|
|
preload = 'auto'
|
|
ref = { this._setAudioElement }
|
|
src = { TEST_SOUND_PATH } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Plays a test sound.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_onClick() {
|
|
this._audioElement
|
|
&& this._audioElement.play();
|
|
}
|
|
|
|
/**
|
|
* Sets the instance variable for the component's audio element so it can be
|
|
* accessed directly.
|
|
*
|
|
* @param {Object} element - The DOM element for the component's audio.
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_setAudioElement(element) {
|
|
this._audioElement = element;
|
|
}
|
|
|
|
/**
|
|
* Updates the target output device for playing the test sound.
|
|
*
|
|
* @private
|
|
* @returns {void}
|
|
*/
|
|
_setAudioSink() {
|
|
this._audioElement
|
|
&& this._audioElement.setSinkId(this.props.deviceId);
|
|
}
|
|
}
|
|
|
|
export default translate(AudioOutputPreview);
|