Categorize servers by continents

src/modules/ui/dialog/settings-dialog.ts

@@ -1044,13 +1044,37 @@ export class SettingsNavigationDialog extends NavigationDialog {
     }
 
     private renderServerSetting(setting: SettingTabContentItem): HTMLElement {
-        let selectedValue;
+        let selectedValue =getPref(PrefKey.SERVER_REGION);
+
+        const continents: Record<ServerContinent, {
+            label: string,
+            children?: HTMLOptionElement[],
+        }> = {
+            'america-north': {
+                label: t('continent-north-america'),
+            },
+            'america-south': {
+                label: t('continent-south-america'),
+            },
+            'asia': {
+                label: t('continent-asia'),
+            },
+            'australia': {
+                label: t('continent-australia'),
+            },
+            'europe': {
+                label: t('continent-europe'),
+            },
+            'other': {
+                label: t('other'),
+            },
+        };
 
         const $control = CE<HTMLSelectElement>('select', {
-                id: `bx_setting_${setting.pref}`,
+            id: `bx_setting_${setting.pref}`,
-                title: setting.label,
+            title: setting.label,
-                tabindex: 0,
+            tabindex: 0,
-            });
+        });
         $control.name = $control.id;
 
         $control.addEventListener('input', (e: Event) => {
@@ -1058,8 +1082,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             this.onGlobalSettingChanged(e);
         });
 
-        selectedValue = getPref(PrefKey.SERVER_REGION);
-
         setting.options = {};
         for (const regionName in STATES.serverRegions) {
             const region = STATES.serverRegions[regionName];
@@ -1076,15 +1098,29 @@ export class SettingsNavigationDialog extends NavigationDialog {
             }
 
             setting.options[value] = label;
+
+            const $option = CE<HTMLOptionElement>('option', {value: value}, label);
+            const continent = continents[region.contintent];
+            if (!continent.children) {
+                continent.children = [];
+            }
+            continent.children.push($option);
         }
 
-        for (const value in setting.options) {
+        const fragment = document.createDocumentFragment();
-            const label = setting.options[value];
+        let key: keyof typeof continents;
+        for (key in continents) {
+            const continent = continents[key];
+            if (!continent.children) {
+                continue;
+            }
 
-            const $option = CE('option', {value: value}, label);
+            fragment.appendChild(CE('optgroup', {
-            $control.appendChild($option);
+                label: continent.label,
+            }, ...continent.children));
         }
 
+        $control.appendChild(fragment);
         $control.disabled = Object.keys(STATES.serverRegions).length === 0;
 
         // Select preferred region

src/types/index.d.ts

@@ -21,14 +21,24 @@ interface Window {
 
 interface NavigatorBattery extends Navigator {
     getBattery: () => Promise<{
-        charging: boolean,
+        charging: boolean;
-        level: float,
+        level: float;
     }>,
 }
 
+type ServerContinent = 'america-north' | 'america-south' | 'asia' | 'australia' | 'europe' | 'other';
+type ServerRegion = {
+    baseUri: string;
+    isDefault: boolean;
+    name: string;
+    shortName: string;
+
+    contintent: ServerContinent;
+};
+
 type BxStates = {
     supportedRegion: boolean;
-    serverRegions: any;
+    serverRegions: Record<string, ServerRegion>;
     selectedRegion: any;
     gsToken: string;
     isSignedIn: boolean;

src/utils/translation.ts

@@ -67,6 +67,11 @@ const Texts = {
     "confirm-reload-stream": "Do you want to refresh the stream?",
     "connected": "Connected",
     "console-connect": "Connect",
+    "continent-asia": "Asia",
+    "continent-australia": "Australia",
+    "continent-europe": "Europe",
+    "continent-north-america": "North America",
+    "continent-south-america": "South America",
     "contrast": "Contrast",
     "controller": "Controller",
     "controller-friendly-ui": "Controller-friendly UI",

src/utils/xcloud-interceptor.ts

@@ -14,22 +14,31 @@ import { PrefKey } from "@/enums/pref-keys";
 import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 
 export class XcloudInterceptor {
-    private static readonly SERVER_EMOJIS = {
+    private static readonly SERVER_EXTRA_INFO: Record<string, [string, ServerContinent]> = {
-        AustraliaEast: '🇦🇺',
+        // North America
-        AustraliaSouthEast: '🇦🇺',
+        EastUS: ['🇺🇸', 'america-north'],
-        BrazilSouth: '🇧🇷',
+        EastUS2: ['🇺🇸', 'america-north'],
-        EastUS: '🇺🇸',
+        NorthCentralUs: ['🇺🇸', 'america-north'],
-        EastUS2: '🇺🇸',
+        SouthCentralUS: ['🇺🇸', 'america-north'],
-        JapanEast: '🇯🇵',
+        WestUS: ['🇺🇸', 'america-north'],
-        KoreaCentral: '🇰🇷',
+        WestUS2: ['🇺🇸', 'america-north'],
-        MexicoCentral: '🇲🇽',
+        MexicoCentral: ['🇲🇽', 'america-north'],
-        NorthCentralUs: '🇺🇸',
+
-        SouthCentralUS: '🇺🇸',
+        // South America
-        SwedenCentral: '🇸🇪',
+        BrazilSouth: ['🇧🇷', 'america-south'],
-        UKSouth: '🇬🇧',
+
-        WestEurope: '🇪🇺',
+        // Asia
-        WestUS: '🇺🇸',
+        JapanEast: ['🇯🇵', 'asia'],
-        WestUS2: '🇺🇸',
+        KoreaCentral: ['🇰🇷', 'asia'],
+
+        // Australia
+        AustraliaEast: ['🇦🇺', 'australia'],
+        AustraliaSouthEast: ['🇦🇺', 'australia'],
+
+        // Europe
+        SwedenCentral: ['🇸🇪', 'europe'],
+        UKSouth: ['🇬🇧', 'europe'],
+        WestEurope: ['🇪🇺', 'europe'],
     };
 
     private static async handleLogin(request: RequestInfo | URL, init?: RequestInit) {
@@ -53,10 +62,11 @@ export class XcloudInterceptor {
 
         // Get server list
         const serverRegex = /\/\/(\w+)\./;
-        const serverEmojis = XcloudInterceptor.SERVER_EMOJIS;
+        const serverExtra = XcloudInterceptor.SERVER_EXTRA_INFO;
 
-        for (let region of obj.offeringSettings.regions) {
+        let region: ServerRegion;
-            const regionName = region.name as keyof typeof serverEmojis;
+        for (region of obj.offeringSettings.regions) {
+            const regionName = region.name as keyof typeof serverExtra;
             let shortName = region.name;
 
             if (region.isDefault) {
@@ -66,8 +76,11 @@ export class XcloudInterceptor {
             let match = serverRegex.exec(region.baseUri);
             if (match) {
                 shortName = match[1];
-                if (serverEmojis[regionName]) {
+                if (serverExtra[regionName]) {
-                    shortName = serverEmojis[regionName] + ' ' + shortName;
+                    shortName = serverExtra[regionName][0] + ' ' + shortName;
+                    region.contintent = serverExtra[regionName][1];
+                } else {
+                    region.contintent = 'other';
                 }
             }