imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use semantic heading in user settings Sidebar & Voip (#10782)

Browse source 
* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* semantic headings and cleanup in Sidebar user settings

* semantic heading in voice user settings

* sonarcloud bug and test
This commit is contained in:
Kerry 2023-05-19 12:03:39 +12:00 • committed by GitHub
parent d9a61c093c
commit 55336bf932
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 446 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
View file

@ -26,6 +26,9 @@ import { SettingLevel } from "../../../../../settings/SettingLevel";
import SettingsFlag from "../../../elements/SettingsFlag";
import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
import { requestMediaPermissions } from "../../../../../utils/media/requestMediaPermissions";
import SettingsTab from "../SettingsTab";
import { SettingsSection } from "../../shared/SettingsSection";
import SettingsSubsection from "../../shared/SettingsSubsection";
interface IState {
mediaDevices: IMediaDevices | null;
@ -128,7 +131,7 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
let webcamDropdown: ReactNode | undefined;
if (!this.state.mediaDevices) {
requestButton = (
<div className="mx_VoiceUserSettingsTab_missingMediaPermissions">
<div>
<p>{_t("Missing media permissions, click the button below to request.")}</p>
<AccessibleButton onClick={this.requestMediaPermissions} kind="primary">
{_t("Request media permissions")}
@ -148,33 +151,30 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
}
return (
<div className="mx_SettingsTab mx_VoiceUserSettingsTab">
<div className="mx_SettingsTab_heading">{_t("Voice & Video")}</div>
{requestButton}
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Voice settings")}</span>
{speakerDropdown}
{microphoneDropdown}
<LabelledToggleSwitch
value={this.state.audioAutoGainControl}
onChange={async (v): Promise<void> => {
await MediaDeviceHandler.setAudioAutoGainControl(v);
this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
}}
label={_t("Automatically adjust the microphone volume")}
data-testid="voice-auto-gain"
/>
</div>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Video settings")}</span>
{webcamDropdown}
<SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
</div>
<SettingsTab>
<SettingsSection heading={_t("Voice & Video")}>
{requestButton}
<SettingsSubsection heading={_t("Voice settings")} stretchContent>
{speakerDropdown}
{microphoneDropdown}
<LabelledToggleSwitch
value={this.state.audioAutoGainControl}
onChange={async (v): Promise<void> => {
await MediaDeviceHandler.setAudioAutoGainControl(v);
this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
}}
label={_t("Automatically adjust the microphone volume")}
data-testid="voice-auto-gain"
/>
</SettingsSubsection>
<SettingsSubsection heading={_t("Video settings")} stretchContent>
{webcamDropdown}
<SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
</SettingsSubsection>
</SettingsSection>
<div className="mx_SettingsTab_heading">{_t("Advanced")}</div>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Voice processing")}</span>
<div className="mx_SettingsTab_section">
<SettingsSection heading={_t("Advanced")}>
<SettingsSubsection heading={_t("Voice processing")}>
<LabelledToggleSwitch
value={this.state.audioNoiseSuppression}
onChange={async (v): Promise<void> => {
@ -193,9 +193,8 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
label={_t("Echo cancellation")}
data-testid="voice-echo-cancellation"
/>
</div>
<div className="mx_SettingsTab_section">
<span className="mx_SettingsTab_subheading">{_t("Connection")}</span>
</SettingsSubsection>
<SettingsSubsection heading={_t("Connection")}>
<SettingsFlag
name="webRtcAllowPeerToPeer"
level={SettingLevel.DEVICE}
@ -206,9 +205,9 @@ export default class VoiceUserSettingsTab extends React.Component<{}, IState> {
level={SettingLevel.DEVICE}
onChange={this.changeFallbackICEServerAllowed}
/>
</div>
</div>
</div>
</SettingsSubsection>
</SettingsSection>
</SettingsTab>
);
}
}