From 866c1b76bd842e31ec1f040bd88ad5c8629a1772 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 12:57:42 +0200 Subject: [PATCH 1/7] Basic TS conversion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- ...ettingsTab.js => VoiceUserSettingsTab.tsx} | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) rename src/components/views/settings/tabs/user/{VoiceUserSettingsTab.js => VoiceUserSettingsTab.tsx} (84%) diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx similarity index 84% rename from src/components/views/settings/tabs/user/VoiceUserSettingsTab.js rename to src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index fe6261cb21..bce047665d 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.js +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx @@ -18,7 +18,7 @@ limitations under the License. import React from 'react'; import { _t } from "../../../../../languageHandler"; import SdkConfig from "../../../../../SdkConfig"; -import MediaDeviceHandler from "../../../../../MediaDeviceHandler"; +import MediaDeviceHandler, { IMediaDevices } from "../../../../../MediaDeviceHandler"; import Field from "../../../elements/Field"; import AccessibleButton from "../../../elements/AccessibleButton"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; @@ -27,13 +27,20 @@ import Modal from "../../../../../Modal"; import { SettingLevel } from "../../../../../settings/SettingLevel"; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; +interface IState { + mediaDevices: IMediaDevices; + activeAudioOutput: string; + activeAudioInput: string; + activeVideoInput: string; +} + @replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab") -export default class VoiceUserSettingsTab extends React.Component { +export default class VoiceUserSettingsTab extends React.Component<{}, IState> { constructor() { - super(); + super({}); this.state = { - mediaDevices: false, + mediaDevices: null, activeAudioOutput: null, activeAudioInput: null, activeVideoInput: null, @@ -43,11 +50,11 @@ export default class VoiceUserSettingsTab extends React.Component { async componentDidMount() { const canSeeDeviceLabels = await MediaDeviceHandler.hasAnyLabeledDevices(); if (canSeeDeviceLabels) { - this._refreshMediaDevices(); + this.refreshMediaDevices(); } } - _refreshMediaDevices = async (stream) => { + private refreshMediaDevices = async (stream?: MediaStream) => { this.setState({ mediaDevices: await MediaDeviceHandler.getDevices(), activeAudioOutput: MediaDeviceHandler.getAudioOutput(), @@ -62,7 +69,7 @@ export default class VoiceUserSettingsTab extends React.Component { } }; - _requestMediaPermissions = async () => { + private requestMediaPermissions = async () => { let constraints; let stream; let error; @@ -95,40 +102,40 @@ export default class VoiceUserSettingsTab extends React.Component { ), }); } else { - this._refreshMediaDevices(stream); + this.refreshMediaDevices(stream); } }; - _setAudioOutput = (e) => { + private setAudioOutput = (e) => { MediaDeviceHandler.instance.setAudioOutput(e.target.value); this.setState({ activeAudioOutput: e.target.value, }); }; - _setAudioInput = (e) => { + private setAudioInput = (e) => { MediaDeviceHandler.instance.setAudioInput(e.target.value); this.setState({ activeAudioInput: e.target.value, }); }; - _setVideoInput = (e) => { + private setVideoInput = (e) => { MediaDeviceHandler.instance.setVideoInput(e.target.value); this.setState({ activeVideoInput: e.target.value, }); }; - _changeWebRtcMethod = (p2p) => { + private changeWebRtcMethod = (p2p) => { MatrixClientPeg.get().setForceTURN(!p2p); }; - _changeFallbackICEServerAllowed = (allow) => { + private changeFallbackICEServerAllowed = (allow) => { MatrixClientPeg.get().setFallbackICEServerAllowed(allow); }; - _renderDeviceOptions(devices, category) { + private renderDeviceOptions(devices, category) { return devices.map((d) => { return (); }); @@ -141,11 +148,11 @@ export default class VoiceUserSettingsTab extends React.Component { let speakerDropdown = null; let microphoneDropdown = null; let webcamDropdown = null; - if (this.state.mediaDevices === false) { + if (!this.state.mediaDevices) { requestButton = (

{_t("Missing media permissions, click the button below to request.")}

- + {_t("Request media permissions")}
@@ -177,8 +184,8 @@ export default class VoiceUserSettingsTab extends React.Component { speakerDropdown = ( - {this._renderDeviceOptions(audioOutputs, 'audioOutput')} + onChange={this.setAudioOutput}> + {this.renderDeviceOptions(audioOutputs, 'audioOutput')} ); } @@ -189,8 +196,8 @@ export default class VoiceUserSettingsTab extends React.Component { microphoneDropdown = ( - {this._renderDeviceOptions(audioInputs, 'audioInput')} + onChange={this.setAudioInput}> + {this.renderDeviceOptions(audioInputs, 'audioInput')} ); } @@ -201,8 +208,8 @@ export default class VoiceUserSettingsTab extends React.Component { webcamDropdown = ( - {this._renderDeviceOptions(videoInputs, 'videoInput')} + onChange={this.setVideoInput}> + {this.renderDeviceOptions(videoInputs, 'videoInput')} ); } @@ -220,12 +227,12 @@ export default class VoiceUserSettingsTab extends React.Component { From dadfba90753607508872619679025ee63a76b53f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 13:08:39 +0200 Subject: [PATCH 2/7] Add MediaDeviceKindEnum MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 31 +++++++++---------- .../views/rooms/VoiceRecordComposerTile.tsx | 4 +-- .../tabs/user/VoiceUserSettingsTab.tsx | 8 ++--- 3 files changed, 20 insertions(+), 23 deletions(-) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index 49ef123def..bc0291a623 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -20,12 +20,15 @@ import { SettingLevel } from "./settings/SettingLevel"; import { setMatrixCallAudioInput, setMatrixCallVideoInput } from "matrix-js-sdk/src/matrix"; import EventEmitter from 'events'; -interface IMediaDevices { - audioOutput: Array; - audioInput: Array; - videoInput: Array; +// XXX: MediaDeviceKind is a union type, so we make our own enum +export enum MediaDeviceKindEnum { + AudioOutput = "audiooutput", + AudioInput = "audioinput", + VideoInput = "videoinput", } +export type IMediaDevices = Record>; + export enum MediaDeviceHandlerEvent { AudioOutputChanged = "audio_output_changed", } @@ -51,20 +54,14 @@ export default class MediaDeviceHandler extends EventEmitter { try { const devices = await navigator.mediaDevices.enumerateDevices(); + const output = { + [MediaDeviceKindEnum.AudioOutput]: [], + [MediaDeviceKindEnum.AudioInput]: [], + [MediaDeviceKindEnum.VideoInput]: [], + }; - const audioOutput = []; - const audioInput = []; - const videoInput = []; - - devices.forEach((device) => { - switch (device.kind) { - case 'audiooutput': audioOutput.push(device); break; - case 'audioinput': audioInput.push(device); break; - case 'videoinput': videoInput.push(device); break; - } - }); - - return { audioOutput, audioInput, videoInput }; + devices.forEach((device) => output[device.kind].push(device)); + return output; } catch (error) { console.warn('Unable to refresh WebRTC Devices: ', error); } diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index f08c8fe6df..5d984eacfa 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -33,7 +33,7 @@ import RecordingPlayback from "../audio_messages/RecordingPlayback"; import { MsgType } from "matrix-js-sdk/src/@types/event"; import Modal from "../../../Modal"; import ErrorDialog from "../dialogs/ErrorDialog"; -import MediaDeviceHandler from "../../../MediaDeviceHandler"; +import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler"; interface IProps { room: Room; @@ -135,7 +135,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index bce047665d..f5adc05d6b 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx @@ -18,7 +18,7 @@ limitations under the License. import React from 'react'; import { _t } from "../../../../../languageHandler"; import SdkConfig from "../../../../../SdkConfig"; -import MediaDeviceHandler, { IMediaDevices } from "../../../../../MediaDeviceHandler"; +import MediaDeviceHandler, { IMediaDevices, MediaDeviceKindEnum } from "../../../../../MediaDeviceHandler"; import Field from "../../../elements/Field"; import AccessibleButton from "../../../elements/AccessibleButton"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; @@ -178,7 +178,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { } }; - const audioOutputs = this.state.mediaDevices.audioOutput.slice(0); + const audioOutputs = this.state.mediaDevices[MediaDeviceKindEnum.AudioOutput].slice(0); if (audioOutputs.length > 0) { const defaultDevice = getDefaultDevice(audioOutputs); speakerDropdown = ( @@ -190,7 +190,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { ); } - const audioInputs = this.state.mediaDevices.audioInput.slice(0); + const audioInputs = this.state.mediaDevices[MediaDeviceKindEnum.AudioInput].slice(0); if (audioInputs.length > 0) { const defaultDevice = getDefaultDevice(audioInputs); microphoneDropdown = ( @@ -202,7 +202,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { ); } - const videoInputs = this.state.mediaDevices.videoInput.slice(0); + const videoInputs = this.state.mediaDevices[MediaDeviceKindEnum.VideoInput].slice(0); if (videoInputs.length > 0) { const defaultDevice = getDefaultDevice(videoInputs); webcamDropdown = ( From cd95be147c87afd5136db324313052c1efe7ed15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 13:45:39 +0200 Subject: [PATCH 3/7] Finish TS conversion MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../tabs/user/VoiceUserSettingsTab.tsx | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index f5adc05d6b..02ab96667c 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx @@ -22,16 +22,14 @@ import MediaDeviceHandler, { IMediaDevices, MediaDeviceKindEnum } from "../../.. import Field from "../../../elements/Field"; import AccessibleButton from "../../../elements/AccessibleButton"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; -import * as sdk from "../../../../../index"; import Modal from "../../../../../Modal"; import { SettingLevel } from "../../../../../settings/SettingLevel"; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; +import SettingsFlag from '../../../elements/SettingsFlag'; +import ErrorDialog from '../../../dialogs/ErrorDialog'; -interface IState { +interface IState extends Record { mediaDevices: IMediaDevices; - activeAudioOutput: string; - activeAudioInput: string; - activeVideoInput: string; } @replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab") @@ -41,9 +39,9 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { this.state = { mediaDevices: null, - activeAudioOutput: null, - activeAudioInput: null, - activeVideoInput: null, + [MediaDeviceKindEnum.AudioOutput]: null, + [MediaDeviceKindEnum.AudioInput]: null, + [MediaDeviceKindEnum.VideoInput]: null, }; } @@ -54,12 +52,12 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { } } - private refreshMediaDevices = async (stream?: MediaStream) => { + private refreshMediaDevices = async (stream?: MediaStream): Promise => { this.setState({ mediaDevices: await MediaDeviceHandler.getDevices(), - activeAudioOutput: MediaDeviceHandler.getAudioOutput(), - activeAudioInput: MediaDeviceHandler.getAudioInput(), - activeVideoInput: MediaDeviceHandler.getVideoInput(), + [MediaDeviceKindEnum.AudioOutput]: MediaDeviceHandler.getAudioOutput(), + [MediaDeviceKindEnum.AudioInput]: MediaDeviceHandler.getAudioInput(), + [MediaDeviceKindEnum.VideoInput]: MediaDeviceHandler.getVideoInput(), }); if (stream) { // kill stream (after we've enumerated the devices, otherwise we'd get empty labels again) @@ -69,7 +67,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { } }; - private requestMediaPermissions = async () => { + private requestMediaPermissions = async (): Promise => { let constraints; let stream; let error; @@ -93,7 +91,6 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { if (error) { console.log("Failed to list userMedia devices", error); const brand = SdkConfig.get().brand; - const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog'); Modal.createTrackedDialog('No media permissions', '', ErrorDialog, { title: _t('No media permissions'), description: _t( @@ -106,44 +103,42 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { } }; - private setAudioOutput = (e) => { + private setAudioOutput = (e): void => { MediaDeviceHandler.instance.setAudioOutput(e.target.value); this.setState({ - activeAudioOutput: e.target.value, + [MediaDeviceKindEnum.AudioOutput]: e.target.value, }); }; - private setAudioInput = (e) => { + private setAudioInput = (e): void => { MediaDeviceHandler.instance.setAudioInput(e.target.value); this.setState({ - activeAudioInput: e.target.value, + [MediaDeviceKindEnum.AudioInput]: e.target.value, }); }; - private setVideoInput = (e) => { + private setVideoInput = (e): void => { MediaDeviceHandler.instance.setVideoInput(e.target.value); this.setState({ - activeVideoInput: e.target.value, + [MediaDeviceKindEnum.VideoInput]: e.target.value, }); }; - private changeWebRtcMethod = (p2p) => { + private changeWebRtcMethod = (p2p: boolean): void => { MatrixClientPeg.get().setForceTURN(!p2p); }; - private changeFallbackICEServerAllowed = (allow) => { + private changeFallbackICEServerAllowed = (allow: boolean): void => { MatrixClientPeg.get().setFallbackICEServerAllowed(allow); }; - private renderDeviceOptions(devices, category) { + private renderDeviceOptions(devices: Array, category: MediaDeviceKindEnum): Array { return devices.map((d) => { return (); }); } render() { - const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag"); - let requestButton = null; let speakerDropdown = null; let microphoneDropdown = null; @@ -183,9 +178,9 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { const defaultDevice = getDefaultDevice(audioOutputs); speakerDropdown = ( - {this.renderDeviceOptions(audioOutputs, 'audioOutput')} + {this.renderDeviceOptions(audioOutputs, MediaDeviceKindEnum.AudioOutput)} ); } @@ -195,9 +190,9 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { const defaultDevice = getDefaultDevice(audioInputs); microphoneDropdown = ( - {this.renderDeviceOptions(audioInputs, 'audioInput')} + {this.renderDeviceOptions(audioInputs, MediaDeviceKindEnum.AudioInput)} ); } @@ -207,9 +202,9 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { const defaultDevice = getDefaultDevice(videoInputs); webcamDropdown = ( - {this.renderDeviceOptions(videoInputs, 'videoInput')} + {this.renderDeviceOptions(videoInputs, MediaDeviceKindEnum.VideoInput)} ); } From 1b209a9cb32a2505696cc1fed782f71740736769 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 14:13:31 +0200 Subject: [PATCH 4/7] Add setDevice() method MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/MediaDeviceHandler.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/MediaDeviceHandler.ts b/src/MediaDeviceHandler.ts index bc0291a623..073f24523d 100644 --- a/src/MediaDeviceHandler.ts +++ b/src/MediaDeviceHandler.ts @@ -103,6 +103,14 @@ export default class MediaDeviceHandler extends EventEmitter { setMatrixCallVideoInput(deviceId); } + public setDevice(deviceId: string, kind: MediaDeviceKindEnum): void { + switch (kind) { + case MediaDeviceKindEnum.AudioOutput: this.setAudioOutput(deviceId); break; + case MediaDeviceKindEnum.AudioInput: this.setAudioInput(deviceId); break; + case MediaDeviceKindEnum.VideoInput: this.setVideoInput(deviceId); break; + } + } + public static getAudioOutput(): string { return SettingsStore.getValueAt(SettingLevel.DEVICE, "webrtc_audiooutput"); } From dbc37675a02bd23dd5e0e1f7d2b7bd72e2dce425 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 14:15:36 +0200 Subject: [PATCH 5/7] Simplifie the code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../tabs/user/VoiceUserSettingsTab.tsx | 133 +++++++----------- 1 file changed, 53 insertions(+), 80 deletions(-) diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index 02ab96667c..3fd4455271 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx @@ -28,14 +28,29 @@ import { replaceableComponent } from "../../../../../utils/replaceableComponent" import SettingsFlag from '../../../elements/SettingsFlag'; import ErrorDialog from '../../../dialogs/ErrorDialog'; +const getDefaultDevice = (devices: Array>) => { + // Note we're looking for a device with deviceId 'default' but adding a device + // with deviceId == the empty string: this is because Chrome gives us a device + // with deviceId 'default', so we're looking for this, not the one we are adding. + if (!devices.some((i) => i.deviceId === 'default')) { + devices.unshift({ + deviceId: '', + label: _t('Default Device'), + }); + return ''; + } else { + return 'default'; + } +}; + interface IState extends Record { mediaDevices: IMediaDevices; } @replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab") export default class VoiceUserSettingsTab extends React.Component<{}, IState> { - constructor() { - super({}); + constructor(props: {}) { + super(props); this.state = { mediaDevices: null, @@ -103,25 +118,9 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { } }; - private setAudioOutput = (e): void => { - MediaDeviceHandler.instance.setAudioOutput(e.target.value); - this.setState({ - [MediaDeviceKindEnum.AudioOutput]: e.target.value, - }); - }; - - private setAudioInput = (e): void => { - MediaDeviceHandler.instance.setAudioInput(e.target.value); - this.setState({ - [MediaDeviceKindEnum.AudioInput]: e.target.value, - }); - }; - - private setVideoInput = (e): void => { - MediaDeviceHandler.instance.setVideoInput(e.target.value); - this.setState({ - [MediaDeviceKindEnum.VideoInput]: e.target.value, - }); + private setDevice = (deviceId: string, kind: MediaDeviceKindEnum): void => { + MediaDeviceHandler.instance.setDevice(deviceId, kind); + this.setState({ [kind]: deviceId }); }; private changeWebRtcMethod = (p2p: boolean): void => { @@ -138,6 +137,23 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { }); } + private renderDropdown(kind: MediaDeviceKindEnum, label: string): JSX.Element { + const devices = this.state.mediaDevices[kind].slice(0); + if (devices.length === 0) return null; + + const defaultDevice = getDefaultDevice(devices); + return ( + this.setDevice(e.target.value, kind)} + > + { this.renderDeviceOptions(devices, kind) } + + ); + } + render() { let requestButton = null; let speakerDropdown = null; @@ -153,71 +169,28 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> { ); } else if (this.state.mediaDevices) { - speakerDropdown =

{ _t('No Audio Outputs detected') }

; - microphoneDropdown =

{ _t('No Microphones detected') }

; - webcamDropdown =

{ _t('No Webcams detected') }

; - - const defaultOption = { - deviceId: '', - label: _t('Default Device'), - }; - const getDefaultDevice = (devices) => { - // Note we're looking for a device with deviceId 'default' but adding a device - // with deviceId == the empty string: this is because Chrome gives us a device - // with deviceId 'default', so we're looking for this, not the one we are adding. - if (!devices.some((i) => i.deviceId === 'default')) { - devices.unshift(defaultOption); - return ''; - } else { - return 'default'; - } - }; - - const audioOutputs = this.state.mediaDevices[MediaDeviceKindEnum.AudioOutput].slice(0); - if (audioOutputs.length > 0) { - const defaultDevice = getDefaultDevice(audioOutputs); - speakerDropdown = ( - - {this.renderDeviceOptions(audioOutputs, MediaDeviceKindEnum.AudioOutput)} - - ); - } - - const audioInputs = this.state.mediaDevices[MediaDeviceKindEnum.AudioInput].slice(0); - if (audioInputs.length > 0) { - const defaultDevice = getDefaultDevice(audioInputs); - microphoneDropdown = ( - - {this.renderDeviceOptions(audioInputs, MediaDeviceKindEnum.AudioInput)} - - ); - } - - const videoInputs = this.state.mediaDevices[MediaDeviceKindEnum.VideoInput].slice(0); - if (videoInputs.length > 0) { - const defaultDevice = getDefaultDevice(videoInputs); - webcamDropdown = ( - - {this.renderDeviceOptions(videoInputs, MediaDeviceKindEnum.VideoInput)} - - ); - } + speakerDropdown = ( + this.renderDropdown(MediaDeviceKindEnum.AudioOutput, _t("Audio Output")) || +

{ _t('No Audio Outputs detected') }

+ ); + microphoneDropdown = ( + this.renderDropdown(MediaDeviceKindEnum.AudioInput, _t("Microphone")) || +

{ _t('No Microphones detected') }

+ ); + webcamDropdown = ( + this.renderDropdown(MediaDeviceKindEnum.VideoInput, _t("Camera")) || +

{ _t('No Webcams detected') }

+ ); } return (
{_t("Voice & Video")}
- {requestButton} - {speakerDropdown} - {microphoneDropdown} - {webcamDropdown} + { requestButton } + { speakerDropdown } + { microphoneDropdown } + { webcamDropdown } Date: Fri, 9 Jul 2021 14:19:27 +0200 Subject: [PATCH 6/7] Fix styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/settings/tabs/user/VoiceUserSettingsTab.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx index 3fd4455271..86c32cc6cd 100644 --- a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx @@ -33,10 +33,7 @@ const getDefaultDevice = (devices: Array>) => { // with deviceId == the empty string: this is because Chrome gives us a device // with deviceId 'default', so we're looking for this, not the one we are adding. if (!devices.some((i) => i.deviceId === 'default')) { - devices.unshift({ - deviceId: '', - label: _t('Default Device'), - }); + devices.unshift({ deviceId: '', label: _t('Default Device') }); return ''; } else { return 'default'; From cdeb0be84778ff790873f619a748274c8745bdb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 9 Jul 2021 14:22:41 +0200 Subject: [PATCH 7/7] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7d4252545b..7795bb2610 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1364,17 +1364,17 @@ "Where you’re logged in": "Where you’re logged in", "Manage the names of and sign out of your sessions below or verify them in your User Profile.": "Manage the names of and sign out of your sessions below or verify them in your User Profile.", "A session's public name is visible to people you communicate with": "A session's public name is visible to people you communicate with", + "Default Device": "Default Device", "No media permissions": "No media permissions", "You may need to manually permit %(brand)s to access your microphone/webcam": "You may need to manually permit %(brand)s to access your microphone/webcam", "Missing media permissions, click the button below to request.": "Missing media permissions, click the button below to request.", "Request media permissions": "Request media permissions", - "No Audio Outputs detected": "No Audio Outputs detected", - "No Microphones detected": "No Microphones detected", - "No Webcams detected": "No Webcams detected", - "Default Device": "Default Device", "Audio Output": "Audio Output", + "No Audio Outputs detected": "No Audio Outputs detected", "Microphone": "Microphone", + "No Microphones detected": "No Microphones detected", "Camera": "Camera", + "No Webcams detected": "No Webcams detected", "Voice & Video": "Voice & Video", "This room is not accessible by remote Matrix servers": "This room is not accessible by remote Matrix servers", "Warning: Upgrading a room will not automatically migrate room members to the new version of the room. We'll post a link to the new room in the old version of the room - room members will have to click this link to join the new room.": "Warning: Upgrading a room will not automatically migrate room members to the new version of the room. We'll post a link to the new room in the old version of the room - room members will have to click this link to join the new room.",