Limit audio output selection to chrome - whitelist

app/src/components/Settings/Settings.js

@@ -58,6 +58,7 @@ const Settings = ({
 	room,
 	me,
 	settings,
+	browser,
 	onToggleAdvancedMode,
 	onTogglePermanentTopBar,
 	handleCloseSettings,
@@ -233,51 +234,53 @@ const Settings = ({
 					</FormHelperText>
 				</FormControl>
 			</form>
-			<form className={classes.setting} autoComplete='off'>
+			{ browser.name === 'chrome' &&
-				<FormControl className={classes.formControl}>
+				<form className={classes.setting} autoComplete='off'>
-					<Select
+					<FormControl className={classes.formControl}>
-						value={settings.selectedAudioOutputDevice || ''}
+						<Select
-						onChange={(event) =>
+							value={settings.selectedAudioOutputDevice || ''}
-						{
+							onChange={(event) =>
-							if (event.target.value)
+							{
-								roomClient.changeAudioOutputDevice(event.target.value);
+								if (event.target.value)
-						}}
+									roomClient.changeAudioOutputDevice(event.target.value);
-						displayEmpty
+							}}
-						name={intl.formatMessage({
+							displayEmpty
-							id             : 'settings.audioOutput',
+							name={intl.formatMessage({
-							defaultMessage : 'Audio output device'
+								id             : 'settings.audioOutput',
-						})}
+								defaultMessage : 'Audio output device'
-						autoWidth
+							})}
-						className={classes.selectEmpty}
+							autoWidth
-						disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
+							className={classes.selectEmpty}
-					>
+							disabled={audioOutputDevices.length === 0 || me.audioOutputInProgress}
-						{ audioOutputDevices.map((audioOutput, index) =>
+						>
-						{
+							{ audioOutputDevices.map((audioOutput, index) =>
-							return (
+							{
-								<MenuItem
+								return (
-									key={index}
+									<MenuItem
-									value={audioOutput.deviceId}
+										key={index}
-								>
+										value={audioOutput.deviceId}
-									{audioOutput.label}
+									>
-								</MenuItem>
+										{audioOutput.label}
-							);
+									</MenuItem>
-						})}
+								);
-					</Select>
+							})}
-					<FormHelperText>
+						</Select>
-						{ audioOutputDevices.length > 0 ?
+						<FormHelperText>
-							intl.formatMessage({
+							{ audioOutputDevices.length > 0 ?
-								id             : 'settings.selectAudioOutput',
+								intl.formatMessage({
-								defaultMessage : 'Select audio output device'
+									id             : 'settings.selectAudioOutput',
-							})
+									defaultMessage : 'Select audio output device'
-							:
+								})
-							intl.formatMessage({
+								:
-								id             : 'settings.cantSelectAudioOutput',
+								intl.formatMessage({
-								defaultMessage : 'Unable to select audio output device'
+									id             : 'settings.cantSelectAudioOutput',
-							})
+									defaultMessage : 'Unable to select audio output device'
-						}
+								})
-					</FormHelperText>
+							}
-				</FormControl>
+						</FormHelperText>
-			</form>
+					</FormControl>
+				</form>
+			}
 			<form className={classes.setting} autoComplete='off'>
 				<FormControl className={classes.formControl}>
 					<Select
@@ -409,6 +412,7 @@ Settings.propTypes =
 	me                      : appPropTypes.Me.isRequired,
 	room                    : appPropTypes.Room.isRequired,
 	settings                : PropTypes.object.isRequired,
+	browser                 : PropTypes.object.isRequired,
 	onToggleAdvancedMode    : PropTypes.func.isRequired,
 	onTogglePermanentTopBar : PropTypes.func.isRequired,
 	handleChangeMode        : PropTypes.func.isRequired,
@@ -421,7 +425,8 @@ const mapStateToProps = (state) =>
 	return {
 		me       : state.me,
 		room     : state.room,
-		settings : state.settings
+		settings : state.settings,
+		browser  : state.me.browser,
 	};
 };
 
@@ -441,6 +446,7 @@ export default withRoomContext(connect(
 		{
 			return (
 				prev.me === next.me &&
+				prev.me.browser === next.me.browser &&
 				prev.room === next.room &&
 				prev.settings === next.settings
 			);