Merge pull request #253 from havfo/feat-output-select

Feat output select

app/src/components/PeerAudio/AudioPeers.js

@@ -7,7 +7,8 @@ import PeerAudio from './PeerAudio';
 const AudioPeers = (props) =>
 {
 	const {
-		micConsumers
+		micConsumers,
+		audioOutputDevice
 	} = props;
 
 	return (
@@ -19,6 +20,7 @@ const AudioPeers = (props) =>
 						<PeerAudio
 							key={micConsumer.id}
 							audioTrack={micConsumer.track}
+							audioOutputDevice={audioOutputDevice}
 						/>
 					);
 				})
@@ -29,12 +31,14 @@ const AudioPeers = (props) =>
 
 AudioPeers.propTypes =
 {
-	micConsumers : PropTypes.array
+	micConsumers      : PropTypes.array,
+	audioOutputDevice : PropTypes.string
 };
 
 const mapStateToProps = (state) =>
 	({
-		micConsumers : micConsumerSelector(state)
+		micConsumers      : micConsumerSelector(state),
+		audioOutputDevice : state.settings.selectedAudioOutputDevice
 	});
 
 const AudioPeersContainer = connect(
@@ -45,7 +49,8 @@ const AudioPeersContainer = connect(
 		areStatesEqual : (next, prev) =>
 		{
 			return (
-				prev.consumers === next.consumers
+				prev.consumers === next.consumers &&
+				prev.settings.selectedAudioOutputDevice === next.settings.selectedAudioOutputDevice
 			);
 		}
 	}

app/src/components/PeerAudio/PeerAudio.js

@@ -10,6 +10,7 @@ export default class PeerAudio extends React.PureComponent
 		// Latest received audio track.
 		// @type {MediaStreamTrack}
 		this._audioTrack = null;
+		this._audioOutputDevice = null;
 	}
 
 	render()
@@ -24,17 +25,19 @@ export default class PeerAudio extends React.PureComponent
 
 	componentDidMount()
 	{
-		const { audioTrack } = this.props;
+		const { audioTrack, audioOutputDevice } = this.props;
 
 		this._setTrack(audioTrack);
+		this._setOutputDevice(audioOutputDevice);
 	}
 
 	// eslint-disable-next-line camelcase
 	UNSAFE_componentWillReceiveProps(nextProps)
 	{
-		const { audioTrack } = nextProps;
-
+		const { audioTrack, audioOutputDevice } = nextProps;
+	
 		this._setTrack(audioTrack);
+		this._setOutputDevice(audioOutputDevice);
 	}
 
 	_setTrack(audioTrack)
@@ -60,9 +63,23 @@ export default class PeerAudio extends React.PureComponent
 			audio.srcObject = null;
 		}
 	}
+
+	_setOutputDevice(audioOutputDevice)
+	{
+		if (this._audioOutputDevice === audioOutputDevice)
+			return;
+		
+		this._audioOutputDevice = audioOutputDevice;
+
+		const { audio } = this.refs;
+
+		if (audioOutputDevice && typeof audio.setSinkId === 'function')
+			audio.setSinkId(audioOutputDevice);
+	}
 }
 
 PeerAudio.propTypes =
 {
-	audioTrack : PropTypes.any
+	audioTrack        : PropTypes.any,
+	audioOutputDevice : PropTypes.string
 };

app/src/components/Settings/Settings.js

@@ -130,6 +130,13 @@ const Settings = ({
 		audioDevices = Object.values(me.audioDevices);
 	else
 		audioDevices = [];
+		
+	let audioOutputDevices;
+
+	if (me.audioOutputDevices)
+		audioOutputDevices = Object.values(me.audioOutputDevices);
+	else
+		audioOutputDevices = [];
 
 	return (
 		<Dialog
@@ -226,6 +233,55 @@ const Settings = ({
 					</FormHelperText>
 				</FormControl>
 			</form>
+			{ 	
+				'audioOutputSupportedBrowsers' in window.config &&
+				window.config.audioOutputSupportedBrowsers.includes(me.browser.name) &&
+				<form className={classes.setting} autoComplete='off'>
+					<FormControl className={classes.formControl}>
+						<Select
+							value={settings.selectedAudioOutputDevice || ''}
+							onChange={(event) =>
+							{
+								if (event.target.value)
+									roomClient.changeAudioOutputDevice(event.target.value);
+							}}
+							displayEmpty
+							name={intl.formatMessage({
+								id             : 'settings.audioOutput',
+								defaultMessage : 'Audio output device'
+							})}
+							autoWidth
+							className={classes.selectEmpty}
+							disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
+						>
+							{ audioOutputDevices.map((audioOutput, index) =>
+							{
+								return (
+									<MenuItem
+										key={index}
+										value={audioOutput.deviceId}
+									>
+										{audioOutput.label}
+									</MenuItem>
+								);
+							})}
+						</Select>
+						<FormHelperText>
+							{ audioOutputDevices.length > 0 ?
+								intl.formatMessage({
+									id             : 'settings.selectAudioOutput',
+									defaultMessage : 'Select audio output device'
+								})
+								:
+								intl.formatMessage({
+									id             : 'settings.cantSelectAudioOutput',
+									defaultMessage : 'Unable to select audio output device'
+								})
+							}
+						</FormHelperText>
+					</FormControl>
+				</form>
+			}
 			<form className={classes.setting} autoComplete='off'>
 				<FormControl className={classes.formControl}>
 					<Select