OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Basic TS conversion 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-07-09 12:57:42 +02:00
parent ac0162c218
commit 866c1b76bd
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/views/settings/tabs/user/VoiceUserSettingsTab.js → src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
View File

@ -18,7 +18,7 @@ limitations under the License.
import React from 'react'; import React from 'react';
import { _t } from "../../../../../languageHandler"; import { _t } from "../../../../../languageHandler";
import SdkConfig from "../../../../../SdkConfig"; import SdkConfig from "../../../../../SdkConfig";
import MediaDeviceHandler from "../../../../../MediaDeviceHandler"; import MediaDeviceHandler, { IMediaDevices } from "../../../../../MediaDeviceHandler";
import Field from "../../../elements/Field"; import Field from "../../../elements/Field";
import AccessibleButton from "../../../elements/AccessibleButton"; import AccessibleButton from "../../../elements/AccessibleButton";
import { MatrixClientPeg } from "../../../../../MatrixClientPeg"; import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
@ -27,13 +27,20 @@ import Modal from "../../../../../Modal";
import { SettingLevel } from "../../../../../settings/SettingLevel"; import { SettingLevel } from "../../../../../settings/SettingLevel";
import { replaceableComponent } from "../../../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../../../utils/replaceableComponent";
interface IState {
mediaDevices: IMediaDevices;
activeAudioOutput: string;
activeAudioInput: string;
activeVideoInput: string;
}
@replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab") @replaceableComponent("views.settings.tabs.user.VoiceUserSettingsTab")
export default class VoiceUserSettingsTab extends React.Component { export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
constructor() { constructor() {
super(); super({});
this.state = { this.state = {
mediaDevices: false, mediaDevices: null,
activeAudioOutput: null, activeAudioOutput: null,
activeAudioInput: null, activeAudioInput: null,
activeVideoInput: null, activeVideoInput: null,
@ -43,11 +50,11 @@ export default class VoiceUserSettingsTab extends React.Component {
async componentDidMount() { async componentDidMount() {
const canSeeDeviceLabels = await MediaDeviceHandler.hasAnyLabeledDevices(); const canSeeDeviceLabels = await MediaDeviceHandler.hasAnyLabeledDevices();
if (canSeeDeviceLabels) { if (canSeeDeviceLabels) {
this._refreshMediaDevices(); this.refreshMediaDevices();
} }
} }
_refreshMediaDevices = async (stream) => { private refreshMediaDevices = async (stream?: MediaStream) => {
this.setState({ this.setState({
mediaDevices: await MediaDeviceHandler.getDevices(), mediaDevices: await MediaDeviceHandler.getDevices(),
activeAudioOutput: MediaDeviceHandler.getAudioOutput(), activeAudioOutput: MediaDeviceHandler.getAudioOutput(),
@ -62,7 +69,7 @@ export default class VoiceUserSettingsTab extends React.Component {
} }
}; };
_requestMediaPermissions = async () => { private requestMediaPermissions = async () => {
let constraints; let constraints;
let stream; let stream;
let error; let error;
@ -95,40 +102,40 @@ export default class VoiceUserSettingsTab extends React.Component {
), ),
}); });
} else { } else {
this._refreshMediaDevices(stream); this.refreshMediaDevices(stream);
} }
}; };
_setAudioOutput = (e) => { private setAudioOutput = (e) => {
MediaDeviceHandler.instance.setAudioOutput(e.target.value); MediaDeviceHandler.instance.setAudioOutput(e.target.value);
this.setState({ this.setState({
activeAudioOutput: e.target.value, activeAudioOutput: e.target.value,
}); });
}; };
_setAudioInput = (e) => { private setAudioInput = (e) => {
MediaDeviceHandler.instance.setAudioInput(e.target.value); MediaDeviceHandler.instance.setAudioInput(e.target.value);
this.setState({ this.setState({
activeAudioInput: e.target.value, activeAudioInput: e.target.value,
}); });
}; };
_setVideoInput = (e) => { private setVideoInput = (e) => {
MediaDeviceHandler.instance.setVideoInput(e.target.value); MediaDeviceHandler.instance.setVideoInput(e.target.value);
this.setState({ this.setState({
activeVideoInput: e.target.value, activeVideoInput: e.target.value,
}); });
}; };
_changeWebRtcMethod = (p2p) => { private changeWebRtcMethod = (p2p) => {
MatrixClientPeg.get().setForceTURN(!p2p); MatrixClientPeg.get().setForceTURN(!p2p);
}; };
_changeFallbackICEServerAllowed = (allow) => { private changeFallbackICEServerAllowed = (allow) => {
MatrixClientPeg.get().setFallbackICEServerAllowed(allow); MatrixClientPeg.get().setFallbackICEServerAllowed(allow);
}; };
_renderDeviceOptions(devices, category) { private renderDeviceOptions(devices, category) {
return devices.map((d) => { return devices.map((d) => {
return (<option key={`${category}-${d.deviceId}`} value={d.deviceId}>{d.label}</option>); return (<option key={`${category}-${d.deviceId}`} value={d.deviceId}>{d.label}</option>);
}); });
@ -141,11 +148,11 @@ export default class VoiceUserSettingsTab extends React.Component {
let speakerDropdown = null; let speakerDropdown = null;
let microphoneDropdown = null; let microphoneDropdown = null;
let webcamDropdown = null; let webcamDropdown = null;
if (this.state.mediaDevices === false) { if (!this.state.mediaDevices) {
requestButton = ( requestButton = (
<div className='mx_VoiceUserSettingsTab_missingMediaPermissions'> <div className='mx_VoiceUserSettingsTab_missingMediaPermissions'>
<p>{_t("Missing media permissions, click the button below to request.")}</p> <p>{_t("Missing media permissions, click the button below to request.")}</p>
<AccessibleButton onClick={this._requestMediaPermissions} kind="primary"> <AccessibleButton onClick={this.requestMediaPermissions} kind="primary">
{_t("Request media permissions")} {_t("Request media permissions")}
</AccessibleButton> </AccessibleButton>
</div> </div>
@ -177,8 +184,8 @@ export default class VoiceUserSettingsTab extends React.Component {
speakerDropdown = ( speakerDropdown = (
<Field element="select" label={_t("Audio Output")} <Field element="select" label={_t("Audio Output")}
value={this.state.activeAudioOutput || defaultDevice} value={this.state.activeAudioOutput || defaultDevice}
onChange={this._setAudioOutput}> onChange={this.setAudioOutput}>
{this._renderDeviceOptions(audioOutputs, 'audioOutput')} {this.renderDeviceOptions(audioOutputs, 'audioOutput')}
</Field> </Field>
); );
} }
@ -189,8 +196,8 @@ export default class VoiceUserSettingsTab extends React.Component {
microphoneDropdown = ( microphoneDropdown = (
<Field element="select" label={_t("Microphone")} <Field element="select" label={_t("Microphone")}
value={this.state.activeAudioInput || defaultDevice} value={this.state.activeAudioInput || defaultDevice}
onChange={this._setAudioInput}> onChange={this.setAudioInput}>
{this._renderDeviceOptions(audioInputs, 'audioInput')} {this.renderDeviceOptions(audioInputs, 'audioInput')}
</Field> </Field>
); );
} }
@ -201,8 +208,8 @@ export default class VoiceUserSettingsTab extends React.Component {
webcamDropdown = ( webcamDropdown = (
<Field element="select" label={_t("Camera")} <Field element="select" label={_t("Camera")}
value={this.state.activeVideoInput || defaultDevice} value={this.state.activeVideoInput || defaultDevice}
onChange={this._setVideoInput}> onChange={this.setVideoInput}>
{this._renderDeviceOptions(videoInputs, 'videoInput')} {this.renderDeviceOptions(videoInputs, 'videoInput')}
</Field> </Field>
); );
} }
@ -220,12 +227,12 @@ export default class VoiceUserSettingsTab extends React.Component {
<SettingsFlag <SettingsFlag
name='webRtcAllowPeerToPeer' name='webRtcAllowPeerToPeer'
level={SettingLevel.DEVICE} level={SettingLevel.DEVICE}
onChange={this._changeWebRtcMethod} onChange={this.changeWebRtcMethod}
/> />
<SettingsFlag <SettingsFlag
name='fallbackICEServerAllowed' name='fallbackICEServerAllowed'
level={SettingLevel.DEVICE} level={SettingLevel.DEVICE}
onChange={this._changeFallbackICEServerAllowed} onChange={this.changeFallbackICEServerAllowed}
/> />
</div> </div>
</div> </div>