settings: reorganize VoiseUserSettingsTab

This is a preparation step for adding new advanced voice processing options
to this settings tab.

3 additional sections have been added: Voice, Video, and Advanced

Signed-off-by: László Várady <[email protected]>

Author: MrAnno

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>
         );

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",

src/i18n/strings/en_US.json

@@ -11,6 +11,9 @@
     "Microphone": "Microphone",
     "Camera": "Camera",
     "Advanced": "Advanced",
+    "Voice settings": "Voice settings",
+    "Video settings": "Video settings",
+    "Connection": "Connection",
     "Always show message timestamps": "Always show message timestamps",
     "Authentication": "Authentication",
     "%(items)s and %(lastItem)s": "%(items)s and %(lastItem)s",

src/i18n/strings/hu.json

@@ -704,6 +704,9 @@
     "Missing media permissions, click the button below to request.": "Hiányzó média jogosultságok, kattints a gombra alul a jogok megadásához.",
     "Request media permissions": "Média jogosultságok megkérése",
     "Voice & Video": "Hang és videó",
+    "Voice settings": "Hangbeállítások",
+    "Video settings": "Videóbeállítások",
+    "Connection": "Kapcsolat",
     "Main address": "Fő cím",
     "Room avatar": "Szoba képe",
     "Room Name": "Szoba neve",