settings: reorganize VoiseUserSettingsTab

This is a preparation step for adding new advanced voice processing options to the settings tab. 3 sections have been added: Voice, Video, and Advanced Signed-off-by: László Várady <laszlo.varady@protonmail.com>
matrix-org · Jun 6, 2022 · e896acb · e896acb
1 parent 7e244fc
commit e896acb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
@@ -183,22 +183,33 @@ 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">
-                    { requestButton }
+                    <span className="mx_SettingsTab_subheading">{ _t("Voice settings") }</span>
                     { speakerDropdown }
                     { microphoneDropdown }
+                </div>
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{ _t("Video settings") }</span>
                     { webcamDropdown }
                     <SettingsFlag name='VideoView.flipVideoHorizontally' level={SettingLevel.ACCOUNT} />
-                    <SettingsFlag
-                        name='webRtcAllowPeerToPeer'
-                        level={SettingLevel.DEVICE}
-                        onChange={this.changeWebRtcMethod}
-                    />
-                    <SettingsFlag
-                        name='fallbackICEServerAllowed'
-                        level={SettingLevel.DEVICE}
-                        onChange={this.changeFallbackICEServerAllowed}
-                    />
+                </div>
+
+                <div className="mx_SettingsTab_heading">{ _t("Advanced") }</div>
+                <div className="mx_SettingsTab_section">
+                    <div className="mx_SettingsTab_section">
+                        <span className="mx_SettingsTab_subheading">{ _t("Connection") }</span>
+                        <SettingsFlag
+                            name='webRtcAllowPeerToPeer'
+                            level={SettingLevel.DEVICE}
+                            onChange={this.changeWebRtcMethod}
+                        />
+                        <SettingsFlag
+                            name='fallbackICEServerAllowed'
+                            level={SettingLevel.DEVICE}
+                            onChange={this.changeFallbackICEServerAllowed}
+                        />
+                    </div>
                 </div>
             </div>
         );

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -1550,6 +1550,9 @@
     "Camera": "Camera",
     "No Webcams detected": "No Webcams detected",
     "Voice & Video": "Voice & Video",
+    "Voice settings": "Voice settings",
+    "Video settings": "Video settings",
+    "Connection": "Connection",
     "This room is not accessible by remote Matrix servers": "This room is not accessible by remote Matrix servers",
     "<b>Warning</b>: Upgrading a room will <i>not automatically migrate room members to the new version of the room.</i> 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.": "<b>Warning</b>: Upgrading a room will <i>not automatically migrate room members to the new version of the room.</i> 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.",
     "Upgrade this space to the recommended room version": "Upgrade this space to the recommended room version",