Bump version to 5.6.0

.github/ISSUE_TEMPLATE/02-feature-request.yml

@@ -14,41 +14,12 @@ body:
     id: device_type
     attributes:
       label: Device
-      description: "Which device are you using?"
+      description: "Which device type is this feature for?"
       options:
+        - All devices
         - Phone/Tablet
-        - Laptop
         - Desktop
         - TV
-        - Other
-      multiple: false
-    validations:
-      required: true
-  - type: dropdown
-    id: os
-    attributes:
-      label: "Operating System"
-      description: "Which operating system is it running?"
-      options:
-        - Windows
-        - macOS
-        - Linux
-        - Android
-        - iOS/iPadOS
-        - Other
-      multiple: false
-    validations:
-      required: true
-  - type: dropdown
-    id: browser
-    attributes:
-      label: "Browser"
-      description: "Which browser are you using?"
-      options:
-        - Chrome/Edge/Chromium
-        - Kiwi Browser
-        - Safari
-        - Other
       multiple: false
     validations:
       required: true

build.ts

@@ -2,9 +2,12 @@
 import { readFile } from "node:fs/promises";
 import { parseArgs } from "node:util";
 import { sys } from "typescript";
+// @ts-ignore
 import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
+// @ts-ignore
 import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
 import { assert } from "node:console";
+import { ESLint } from "eslint";
 
 enum BuildTarget {
     ALL = 'all',
@@ -22,10 +25,20 @@ const postProcess = (str: string): string => {
     // Replace "globalThis." with "var";
     str = str.replaceAll('globalThis.', 'var ');
 
+    // Remove enum's inlining comments
+    str = str.replaceAll(/ \/\* [A-Z0-9_]+ \*\//g, '');
+    str = str.replaceAll('/* @__PURE__ */ ', '');
+
+    // Remove comments from import
+    str = str.replaceAll(/\/\/ src.*\n/g, '');
+
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
 
     assert(str.includes('/* ADDITIONAL CODE */'));
+    assert(str.includes('window.BX_EXPOSED = BxExposed'));
+    assert(str.includes('window.BxEvent = BxEvent'));
+    assert(str.includes('window.BX_FETCH = window.fetch'));
 
     return str;
 }
@@ -71,10 +84,19 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
 
     // Save to script
     await Bun.write(path, scriptHeader + result);
-    console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
 
     // Create meta file
     await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+
+    // Check with ESLint
+    const eslint = new ESLint();
+    const results = await eslint.lintFiles([path]);
+    results[0].messages.forEach((msg: any) => {
+        console.error(`${path}#${msg.line}: ${msg.message}`);
+    });
+
+    console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
+    console.log(`---- [${target}] ${new Date()}`);
 }
 
 const buildTargets = [
@@ -101,9 +123,26 @@ if (!values['version']) {
     sys.exit(-1);
 }
 
-console.log('Building: ', values['version']);
+async function main() {
+    const config = {};
+    console.log('Building: ', values['version']);
+    for (const target of buildTargets) {
+        await build(target, values['version']!!, config);
+    }
 
-const config = {};
-for (const target of buildTargets) {
-    await build(target, values['version']!!, config);
+    console.log('\n** Press Enter to build or Esc to exit');
 }
+
+function onKeyPress(data: any) {
+    const keyCode = data[0];
+    if (keyCode === 13) {  // Enter key
+        main();
+    } else if (keyCode === 27) {  // Esc key
+        process.exit(0);
+    }
+}
+
+main();
+process.stdin.setRawMode(true);
+process.stdin.resume();
+process.stdin.on('data', onKeyPress);

dist/better-xcloud.meta.js

@@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      5.4.1
+// @version      5.6.0
 // ==/UserScript==

eslint.config.mjs

@@ -0,0 +1,3 @@
+import compat from "eslint-plugin-compat";
+
+export default [compat.configs['flat/recommended']];

package.json

@@ -2,13 +2,18 @@
   "name": "better-xcloud",
   "module": "src/index.ts",
   "type": "module",
+  "browserslist": [
+    "Chrome >= 80"
+  ],
   "bin": {
     "build": "build.ts"
   },
   "devDependencies": {
     "@types/bun": "^1.1.6",
-    "@types/node": "^20.14.10",
+    "@types/node": "^20.16.1",
     "@types/stylus": "^0.48.42",
+    "eslint": "^9.9.0",
+    "eslint-plugin-compat": "^6.0.0",
     "stylus": "^0.63.0"
   },
   "peerDependencies": {

src/assets/css/button.styl

@@ -1,5 +1,10 @@
 .bx-button {
-    background-color: var(--bx-default-button-color);
+    --button-rgb: var(--bx-default-button-rgb);
+    --button-hover-rgb: var(--bx-default-button-hover-rgb);
+    --button-active-rgb: var(--bx-default-button-active-rgb);
+    --button-disabled-rgb: var(--bx-default-button-disabled-rgb);
+
+    background-color: unquote('rgb(var(--button-rgb))');
     user-select: none;
     -webkit-user-select: none;
     color: #fff;
@@ -14,63 +19,101 @@
     cursor: pointer;
     overflow: hidden;
 
+    &:not([disabled]):active {
+        background-color: unquote('rgb(var(--button-active-rgb))');
+    }
+
     &:focus {
         outline: none !important;
     }
 
-    &:hover, &.bx-focusable:focus {
-        background-color: var(--bx-default-button-hover-color);
+    &:not([disabled]):not(:active) {
+        &:hover, &.bx-focusable:focus {
+            background-color: unquote('rgb(var(--button-hover-rgb))');
+        }
     }
 
+
     &:disabled {
         cursor: default;
-        background-color: var(--bx-default-button-disabled-color);
+        background-color: unquote('rgb(var(--button-disabled-rgb))');
     }
 
     &.bx-ghost {
         background-color: transparent;
 
-        &:hover, &.bx-focusable:focus {
-            background-color: var(--bx-default-button-hover-color);
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                background-color: unquote('rgb(var(--button-hover-rgb))');
+            }
         }
     }
 
     &.bx-primary {
-        background-color: var(--bx-primary-button-color);
+        --button-rgb: var(--bx-primary-button-rgb);
 
-        &:hover, &.bx-focusable:focus {
-            background-color: var(--bx-primary-button-hover-color);
+        &:not([disabled]):active {
+            --button-active-rgb: var(--bx-primary-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                --button-hover-rgb: var(--bx-primary-button-hover-rgb);
+            }
         }
 
         &:disabled {
-            background-color: var(--bx-primary-button-disabled-color);
+            --button-disabled-rgb: var(--bx-primary-button-disabled-rgb);
         }
     }
 
     &.bx-danger {
-        background-color: var(--bx-danger-button-color);
+        --button-rgb: var(--bx-danger-button-rgb);
 
-        &:hover, &.bx-focusable:focus {
-            background-color: var(--bx-danger-button-hover-color);
+        &:not([disabled]):active {
+            --button-active-rgb: var(--bx-danger-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                --button-hover-rgb: var(--bx-danger-button-hover-rgb);
+            }
         }
 
         &:disabled {
-            background-color: var(--bx-danger-button-disabled-color);
+            --button-disabled-rgb: var(--bx-danger-button-disabled-rgb);
         }
     }
 
+    &.bx-frosted {
+        --button-alpha: 0.2;
+        background-color: unquote('rgba(var(--button-rgb), var(--button-alpha))');
+        backdrop-filter: blur(4px) brightness(1.5);
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                background-color: unquote('rgba(var(--button-hover-rgb), var(--button-alpha))');
+            }
+        }
+    }
+
+    &.bx-drop-shadow {
+        box-shadow: 0 0 4px #00000080;
+    }
+
     &.bx-tall {
         height: calc(var(--bx-button-height) * 1.5) !important;
     }
 
+    &.bx-circular {
+        border-radius: var(--bx-button-height);
+        height: var(--bx-button-height);
+    }
+
     svg {
         display: inline-block;
         width: 16px;
         height: var(--bx-button-height);
-
-        &:not(:only-child) {
-            margin-right: 10px;
-        }
     }
 
     span {
@@ -82,25 +125,44 @@
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
+
+        &:not(:only-child) {
+            margin-left: 10px;
+        }
     }
 }
 
 .bx-focusable {
     position: relative;
+    overflow: visible;
 
     &::after {
         border: 2px solid transparent;
-        border-radius: 4px;
+        border-radius: 10px;
     }
 
     &:focus::after {
+        offset = -6px;
         content: '';
         border-color: white;
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        top: offset;
+        left: offset;
+        right: offset;
+        bottom: offset;
+    }
+
+    html[data-active-input=touch] &,
+    html[data-active-input=mouse] & {
+        &:focus::after {
+            border-color: transparent !important;
+        }
+    }
+
+    &.bx-circular {
+        &::after {
+            border-radius: var(--bx-button-height);
+        }
     }
 }
 
@@ -119,5 +181,13 @@ button.bx-inactive {
 }
 
 .bx-button-shortcut {
-    margin-top: 10px;
+    max-width: max-content;
+    margin: 10px 0 0 0;
+    flex: 1 0 auto;
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-button-shortcut {
+        margin: 8px 0 0 10px;
+    }
 }

src/assets/css/global-settings.styl

@@ -1,225 +0,0 @@
-.bx-settings-reload-button {
-    margin-top: 10px;
-}
-
-.bx-settings-container {
-    background-color: #151515;
-    user-select: none;
-    -webkit-user-select: none;
-    color: #fff;
-    font-family: var(--bx-normal-font);
-}
-
-@media (hover: hover) {
-    .bx-settings-wrapper a.bx-settings-title:hover {
-        color: #83f73a;
-    }
-}
-
-.bx-settings-wrapper {
-    min-width: 450px;
-    max-width: 600px;
-    margin: auto;
-    padding: 12px 6px;
-
-    @media screen and (max-width: 450px) {
-        min-width: unset;
-        width: 100%;
-    }
-
-    *:focus {
-        outline: none !important;
-    }
-
-    .bx-top-buttons {
-        .bx-button {
-            display: block;
-            margin-bottom: 8px;
-        }
-    }
-
-    .bx-settings-title-wrapper {
-        display: flex;
-        margin-bottom: 10px;
-        align-items: center;
-    }
-
-    a.bx-settings-title {
-        font-family: var(--bx-title-font);
-        font-size: 1.4rem;
-        text-decoration: none;
-        font-weight: bold;
-        display: block;
-        flex: 1;
-        text-transform: none;
-        margin-right: 10px;
-
-        span {
-            color: #5dc21e !important;
-        }
-
-        &:focus {
-            span {
-                color: #83f73a !important;
-            }
-        }
-    }
-
-    a.bx-settings-update {
-        display: block;
-        color: #ff834b;
-        text-decoration: none;
-        margin-bottom: 8px;
-        text-align: center;
-        background: #222;
-        border-radius: 4px;
-        padding: 4px;
-
-        &:hover {
-            @media (hover: hover) {
-                color: #ff9869;
-                text-decoration: underline;
-            }
-        }
-
-        &:focus {
-            color: #ff9869;
-            text-decoration: underline;
-        }
-    }
-}
-
-.bx-settings-group-label {
-    font-weight: bold;
-    display: block;
-    font-size: 1.1rem;
-}
-
-
-.bx-settings-row {
-    display: flex;
-    padding: 6px 12px;
-    position: relative;
-
-    label {
-        align-self: center;
-        margin: 0 4px 0;
-    }
-
-    .bx-setting-control {
-        flex: 1;
-        display: flex;
-        justify-content: right;
-    }
-
-
-    &:hover, &:focus-within {
-        background-color: #242424;
-    }
-
-    input {
-        align-self: center;
-        accent-color: var(--bx-primary-button-color);
-
-        &:focus {
-            accent-color: var(--bx-danger-button-color);
-        }
-    }
-
-    select {
-        &:disabled {
-            -webkit-appearance: none;
-            background: transparent;
-            text-align-last: right;
-            border: none;
-            color: #fff;
-        }
-    }
-
-    input[type=checkbox] {
-        cursor: pointer;
-    }
-
-    input[type=checkbox],
-    select {
-        &:focus {
-            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
-        }
-    }
-
-
-    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
-        &::before {
-            content: ' ';
-            border-radius: 4px;
-            border: 2px solid #fff;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-        }
-    }
-}
-
-.bx-settings-group-label b, .bx-settings-row label b {
-    display: block;
-    font-size: 12px;
-    font-style: italic;
-    font-weight: normal;
-    color: #828282;
-}
-
-.bx-settings-group-label b {
-    margin-bottom: 8px;
-}
-
-.bx-settings-app-version {
-    margin-top: 10px;
-    text-align: center;
-    color: #747474;
-    font-size: 12px;
-}
-
-.bx-donation-link {
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    height: 20px;
-    line-height: 20px;
-    font-size: 14px;
-    margin-top: 10px;
-    color: #5dc21e;
-
-    &:hover {
-        color: #6dd72b;
-    }
-
-    &:focus {
-        text-decoration: underline;
-    }
-}
-
-.bx-settings-custom-user-agent {
-    display: block;
-    width: 100%;
-}
-
-.bx-debug-info {
-    button {
-        margin-top: 10px;
-    }
-
-    pre {
-        margin-top: 10px;
-        cursor: copy;
-        color: white;
-        padding: 8px;
-        border: 1px solid #2d2d2d;
-        background: #212121;
-        white-space: break-spaces;
-
-        &:hover {
-            background: #272727;
-        }
-    }
-}

src/assets/css/header.styl

@@ -4,7 +4,7 @@
 
     svg {
         width: 24px;
-        height: 46px;
+        height: 24px;
     }
 }
 

src/assets/css/navigation-dialog.styl

@@ -0,0 +1,18 @@
+.bx-navigation-dialog {
+    position: absolute;
+    z-index: var(--bx-navigation-dialog-z-index);
+}
+
+.bx-navigation-dialog-overlay {
+    position: fixed;
+    background: #0b0b0be3;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--bx-navigation-dialog-overlay-z-index);
+
+    &[data-is-playing="true"] {
+        background: transparent;
+    }
+}

src/assets/css/root.styl

@@ -1,3 +1,18 @@
+button_color(name, normal, hover, active, disabled)
+    prefix = unquote('--bx-' + name + '-button');
+    {prefix + '-color'}: normal;
+    {prefix + '-rgb'}: red(normal), green(normal), blue(normal);
+
+    {prefix + '-hover-color'}: hover;
+    {prefix + '-hover-rgb'}: red(hover), green(hover), blue(hover);
+
+    {prefix + '-active-color'}: active;
+    {prefix + '-active-rgb'}: red(active), green(active), blue(active);
+
+    {prefix + '-disabled-color'}: disabled;
+    {prefix + '-disabled-rgb'}: red(disabled), green(disabled), blue(disabled);
+
+
 :root {
     --bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif;
     --bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif;
@@ -7,29 +22,26 @@
 
     --bx-button-height: 40px;
 
-    --bx-default-button-color: #2d3036;
-    --bx-default-button-hover-color: #515863;
-    --bx-default-button-disabled-color: #8e8e8e;
+    button_color('default', #2d3036, #515863, #222428, #8e8e8e);
+    button_color('primary', #008746, #04b358, #044e2a, #448262);
+    button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
 
-    --bx-primary-button-color: #008746;
-    --bx-primary-button-hover-color: #04b358;
-    --bx-primary-button-disabled-color: #448262;
+    --bx-fullscreen-text-z-index: 99999;
+    --bx-toast-z-index: 60000;
+    --bx-dialog-z-index: 50000;
 
-    --bx-danger-button-color: #c10404;
-    --bx-danger-button-hover-color: #e61d1d;
-    --bx-danger-button-disabled-color: #a26c6c;
+    --bx-dialog-overlay-z-index: 40200;
+    --bx-stats-bar-z-index: 40100;
+    --bx-mkb-pointer-lock-msg-z-index: 40000;
 
-    --bx-toast-z-index: 9999;
-    --bx-dialog-z-index: 9101;
-    --bx-dialog-overlay-z-index: 9100;
-    --bx-remote-play-popup-z-index: 9090;
-    --bx-stats-bar-z-index: 9010;
-    --bx-stream-settings-z-index: 9001;
-    --bx-mkb-pointer-lock-msg-z-index: 9000;
-    --bx-stream-settings-overlay-z-index: 8999;
-    --bx-game-bar-z-index: 8888;
-    --bx-wait-time-box-z-index: 100;
-    --bx-screenshot-animation-z-index: 1;
+    --bx-navigation-dialog-z-index: 30100;
+    --bx-navigation-dialog-overlay-z-index: 30000;
+
+    --bx-remote-play-popup-z-index: 20000;
+
+    --bx-game-bar-z-index: 10000;
+    --bx-screenshot-animation-z-index: 9000;
+    --bx-wait-time-box-z-index: 1000;
 }
 
 @font-face {
@@ -47,7 +59,7 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 /* Remove the "Cloud Gaming" text in header when the screen is too small */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
     header a[href="/play"] {
         display: none;
     }
@@ -65,6 +77,14 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     overflow: hidden !important;
 }
 
+.bx-hide-scroll-bar {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 .bx-gone {
     display: none !important;
 }
@@ -106,7 +126,11 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 .bx-line-through {
-    text-decoration: line-through
+    text-decoration: line-through !important;
+}
+
+.bx-normal-case {
+    text-transform: none !important;
 }
 
 select[multiple] {
@@ -168,3 +192,36 @@ div[class*=SupportedInputsBadge] {
         font-weight: bold;
     }
 }
+
+
+.bx-fullscreen-text {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000cc;
+    z-index: var(--bx-fullscreen-text-z-index);
+    line-height: 100vh;
+    color: #fff;
+    text-align: center;
+    font-weight: 400;
+    font-family: var(--bx-normal-font);
+    font-size: 1.3rem;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Device Code page */
+#root {
+    section[class*=DeviceCodePage-module__page] {
+        margin-left: 20px !important;
+        margin-right: 20px !important;
+        margin-top: 20px !important;
+        max-width: 800px !important;
+    }
+
+    div[class*=DeviceCodePage-module__back] {
+        display: none;
+    }
+}

src/assets/css/settings-dialog.styl

@@ -0,0 +1,569 @@
+.bx-settings-dialog {
+    display: flex;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.98;
+    user-select: none;
+    -webkit-user-select: none;
+
+    .bx-focusable {
+        &::after {
+            border-radius: 4px;
+        }
+
+        &:focus::after {
+            offset = 0;
+
+            top: offset;
+            left: offset;
+            right: offset;
+            bottom: offset;
+        }
+    }
+
+    .bx-settings-reload-note {
+        font-size: 0.8rem;
+        display: block;
+        padding: 8px;
+        font-style: italic;
+        font-weight: normal;
+        height: var(--bx-button-height);
+    }
+
+    input {
+        accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
+    }
+
+    select:disabled {
+        -webkit-appearance: none;
+        background: transparent;
+        text-align-last: right;
+        border: none;
+        color: #fff;
+    }
+
+    select option:disabled {
+        display: none;
+    }
+
+    input[type=checkbox],
+    select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+    a {
+        color: #5dc21e;
+        text-decoration: none;
+
+        &:hover, &:focus {
+            color: #128112;
+        }
+    }
+}
+
+.bx-settings-tabs-container {
+    position: fixed;
+    width: 48px;
+    max-height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    > div:last-of-type {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+
+        button {
+            flex-shrink: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-top: 8px;
+            height: unset;
+            padding: 8px 10px;
+
+            svg {
+                size = 16px;
+
+                width: size;
+                height: size;
+            }
+        }
+    }
+}
+
+.bx-settings-tabs {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 0 8px;
+    box-shadow: 0 0 6px #000;
+    overflow: overlay;
+    flex: 1;
+
+    svg {
+        size = 24px;
+        width: size;
+        height: size;
+        padding: 10px;
+        flex-shrink: 0;
+        box-sizing: content-box;
+        background: #131313;
+        cursor: pointer;
+        border-left: 4px solid #1e1e1e;
+
+        &.bx-active {
+            background: #222;
+            border-color: #008746;
+        }
+
+        &:not(.bx-active):hover {
+            background: #2f2f2f;
+            border-color: #484848;
+        }
+
+        &:focus {
+            border-color: #fff;
+            outline: none;
+        }
+
+        &[data-group=global] {
+            &[data-need-refresh=true] {
+                background: var(--bx-danger-button-color) !important;
+
+                &:hover {
+                    background: var(--bx-danger-button-hover-color) !important;
+                }
+            }
+        }
+    }
+}
+
+
+.bx-settings-tab-contents {
+    tabsWidth = 48px;
+
+    flex-direction: column;
+    padding: 10px;
+    margin-left: tabsWidth;
+    width: 450px;
+    max-width: calc(100vw - tabsWidth);
+    background: #1a1b1e;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    font-family: var(--bx-title-font);
+    text-align: center;
+    box-shadow: 0px 0px 6px #000;
+    overflow: overlay;
+    z-index: 1;
+
+    > div[data-tab-group=mkb] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    > div[data-tab-group=shortcuts] {
+        > div {
+            &[data-has-gamepad=true] {
+                > div:first-of-type {
+                    display: none;
+                }
+
+                > div:last-of-type {
+                    display: block;
+                }
+            }
+
+            &[data-has-gamepad=false] {
+                > div:first-of-type {
+                    display: block;
+                }
+
+                > div:last-of-type {
+                    display: none;
+                }
+            }
+        }
+
+        .bx-shortcut-profile {
+            width: 100%;
+            height: 36px;
+            display: block;
+        }
+
+        .bx-shortcut-note {
+            margin-top: 10px;
+            font-size: 14px;
+        }
+
+        .bx-shortcut-row {
+            display: flex;
+            margin-bottom: 10px;
+
+            label.bx-prompt {
+                flex: 1;
+                font-size: 26px;
+                margin-bottom: 0;
+            }
+
+            .bx-shortcut-actions {
+                flex: 2;
+                position: relative;
+
+                select {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+
+                    &:last-of-type {
+                        opacity: 0;
+                        z-index: calc(var(--bx-settings-z-index) + 1);
+                    }
+                }
+            }
+        }
+    }
+
+    &:focus,
+    *:focus {
+        outline: none !important;
+    }
+
+    .bx-top-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 8px;
+
+        .bx-button {
+            display: block;
+        }
+    }
+
+    h2 {
+        margin: 16px 0 8px 0;
+        display: flex;
+        align-items: center;
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+
+        span {
+            display: inline-block;
+            font-size: 20px;
+            font-weight: bold;
+            text-align: left;
+            flex: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+}
+
+@media (max-width: 500px) {
+    .bx-settings-tab-contents {
+        width: calc(100vw - 48px);
+    }
+}
+
+.bx-settings-row {
+    display: flex;
+    gap: 10px;
+    padding: 16px 10px;
+    margin: 0;
+    background: #2a2a2a;
+    border-bottom: 1px solid #343434;
+
+    &:hover, &:focus-within {
+        background-color: #242424;
+    }
+
+    &:not(:has(> input[type=checkbox])) {
+        flex-wrap: wrap;
+    }
+
+    /*
+    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
+        border-left-color: white;
+    }
+    */
+
+    > span.bx-settings-label {
+        font-size: 14px;
+        display: block;
+        text-align: left;
+        align-self: center;
+        margin-bottom: 0 !important;
+
+        + * {
+            margin: 0 0 0 auto;
+        }
+    }
+}
+
+.bx-settings-dialog-note {
+    display: block;
+    color: #afafb0;
+    font-size: 12px;
+    font-weight: lighter;
+    font-style: italic;
+
+    &:not(:has(a)) {
+        margin-top: 4px;
+    }
+
+    a {
+        display: inline-block;
+        padding: 4px;
+    }
+}
+
+.bx-settings-custom-user-agent {
+    display: block;
+    width: 100%;
+    padding: 6px;
+}
+
+.bx-donation-link {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    margin-top: 10px;
+}
+
+.bx-debug-info {
+    button {
+        margin-top: 10px;
+    }
+
+    pre {
+        margin-top: 10px;
+        cursor: copy;
+        color: white;
+        padding: 8px;
+        border: 1px solid #2d2d2d;
+        background: #212121;
+        white-space: break-spaces;
+        text-align: left;
+
+        &:hover {
+            background: #272727;
+        }
+    }
+}
+
+.bx-settings-app-version {
+    margin-top: 10px;
+    text-align: center;
+    color: #747474;
+    font-size: 12px;
+}
+
+.bx-note-unsupported {
+    display: block;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: normal;
+    color: #828282;
+}
+
+.bx-settings-tab-contents {
+    > div {
+        // Label at the beginning
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:has(+ .bx-settings-row) {
+            border-top-left-radius: 10px;
+            border-top-right-radius: 10px;
+        }
+
+        // Label at the end
+        .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+        }
+
+        // Single label
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-radius: 10px;
+        }
+    }
+}
+
+.bx-suggest-toggler {
+    text-align: left;
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #003861;
+
+    label {
+        flex: 1;
+        margin-bottom: 0;
+        padding: 10px;
+        background: #004f87;
+    }
+
+    span {
+        display: inline-block;
+        align-self: center;
+        padding: 10px;
+        width: 40px;
+        text-align: center;
+    }
+
+    &:hover, &:focus {
+        cursor: pointer;
+        background: #005da1;
+
+        label {
+            background: #006fbe;
+        }
+    }
+
+    &[bx-open] {
+        span {
+            transform: rotate(90deg);
+        }
+
+        &+ .bx-suggest-box {
+            display: block;
+        }
+    }
+}
+
+.bx-suggest-box {
+    display: none;
+    background: #161616;
+    padding: 10px;
+    box-shadow: 0px 0px 12px #0f0f0f inset;
+    border-radius: 10px;
+}
+
+.bx-suggest-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 10px;
+}
+
+.bx-suggest-note {
+    font-size: 11px;
+    color: #8c8c8c;
+    font-style: italic;
+    font-weight: 100;
+}
+
+.bx-suggest-link {
+    font-size: 12px;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.bx-suggest-row {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    label {
+        flex: 1;
+        overflow: overlay;
+        border-radius: 4px;
+
+        .bx-suggest-label {
+            background: #323232;
+            padding: 4px 10px;
+            font-size: 12px;
+            text-align: left;
+        }
+
+        .bx-suggest-value {
+            padding: 6px;
+            font-size: 14px;
+
+            &.bx-suggest-change {
+                background-color: var(--bx-warning-color);
+            }
+        }
+    }
+
+    &.bx-suggest-ok {
+        input {
+            visibility: hidden;
+        }
+
+        .bx-suggest-label {
+            background-color: #008114;
+        }
+
+        .bx-suggest-value {
+            background-color: #13a72a;
+        }
+    }
+
+    &.bx-suggest-change {
+        .bx-suggest-label {
+            background-color: #a65e08;
+        }
+
+        .bx-suggest-value {
+            background-color: #d57f18;
+        }
+
+        &:hover {
+            label {
+                cursor: pointer;
+            }
+
+            .bx-suggest-label {
+                background-color: #995707;
+            }
+
+            .bx-suggest-value {
+                background-color: #bd7115;
+            }
+        }
+
+        // Unchecked setting
+        input:not(:checked) + label {
+            opacity: 0.5;
+
+            .bx-suggest-label {
+                background-color: #2a2a2a;
+            }
+
+            .bx-suggest-value {
+                background-color: #393939;
+            }
+        }
+
+        &:hover {
+            input:not(:checked) + label {
+                opacity: 1;
+
+                .bx-suggest-label {
+                    background-color: #202020;
+                }
+
+                .bx-suggest-value {
+                    background-color: #303030;
+                }
+            }
+        }
+    }
+}

src/assets/css/stream-settings.styl

@@ -1,237 +0,0 @@
-.bx-stream-settings-dialog {
-    display: flex;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: var(--bx-stream-settings-z-index);
-    opacity: 0.98;
-    user-select: none;
-    -webkit-user-select: none;
-}
-
-.bx-stream-settings-overlay {
-    position: fixed;
-    background: #0b0b0be3;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: var(--bx-stream-settings-overlay-z-index);
-
-    &[data-is-playing="true"] {
-        background: transparent;
-    }
-}
-
-.bx-stream-settings-tabs {
-    display: flex;
-    position: fixed;
-    flex-direction: column;
-    border-radius: 0 0 0 8px;
-    box-shadow: 0px 0px 6px #000;
-    overflow: clip;
-
-    svg {
-        width: 32px;
-        height: 32px;
-        padding: 10px;
-        box-sizing: content-box;
-        background: #131313;
-        cursor: pointer;
-        border-left: 4px solid #1e1e1e;
-
-        &.bx-active {
-            background: #222;
-            border-color: #008746;
-        }
-
-        &:not(.bx-active):hover {
-            background: #2f2f2f;
-            border-color: #484848;
-        }
-
-        &:focus {
-            border-color: #fff;
-            outline: none;
-        }
-    }
-}
-
-
-.bx-stream-settings-tab-contents {
-    flex-direction: column;
-    padding: 14px 14px 0;
-    width: 420px;
-    background: #1a1b1e;
-    color: #fff;
-    font-weight: 400;
-    font-size: 16px;
-    font-family: var(--bx-title-font);
-    text-align: center;
-    box-shadow: 0px 0px 6px #000;
-    overflow: overlay;
-    margin-left: 56px;
-    z-index: 1;
-
-    > div[data-tab-group=mkb] {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    &:focus,
-    *:focus {
-        outline: none !important;
-    }
-
-    h2 {
-        margin-bottom: 8px;
-        display: flex;
-        align-item: center;
-
-        span {
-            display: inline-block;
-            font-size: 24px;
-            font-weight: bold;
-            text-transform: uppercase;
-            text-align: left;
-            flex: 1;
-            height: var(--bx-button-height);
-            line-height: calc(var(--bx-button-height) + 4px);
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
-    }
-}
-
-@media screen and (max-width: 500px) {
-    .bx-stream-settings-tab-contents {
-        width: calc(100vw - 56px);
-    }
-}
-
-.bx-stream-settings-row {
-    display: flex;
-    border-bottom: 1px solid #40404080;
-    padding: 16px 8px;
-    border-left: 2px solid transparent;
-
-    &:hover, &:focus-within {
-        background-color: #242424;
-    }
-
-    input[type=checkbox],
-    select {
-        &:focus {
-            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
-        }
-    }
-
-    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
-        border-left-color: white;
-    }
-
-    > label {
-        font-size: 16px;
-        display: block;
-        text-align: left;
-        flex: 1;
-        align-self: center;
-        margin-bottom: 0 !important;
-    }
-
-    input {
-        accent-color: var(--bx-primary-button-color);
-
-        &:focus {
-            accent-color: var(--bx-danger-button-color);
-        }
-    }
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-        color: #fff;
-    }
-
-    select option:disabled {
-        display: none;
-    }
-}
-
-.bx-stream-settings-dialog-note {
-    display: block;
-    font-size: 12px;
-    font-weight: lighter;
-    font-style: italic;
-}
-
-.bx-stream-settings-tab-contents {
-    div[data-tab-group="shortcuts"] {
-        > div {
-            &[data-has-gamepad=true] {
-                > div:first-of-type {
-                    display: none;
-                }
-
-                > div:last-of-type {
-                    display: block;
-                }
-            }
-
-            &[data-has-gamepad=false] {
-                > div:first-of-type {
-                    display: block;
-                }
-
-                > div:last-of-type {
-                    display: none;
-                }
-            }
-        }
-
-        .bx-shortcut-profile {
-            width: 100%;
-            height: 36px;
-            display: block;
-        }
-
-        .bx-shortcut-note {
-            margin-top: 10px;
-            font-size: 14px;
-        }
-
-        .bx-shortcut-row {
-            display: flex;
-            margin-bottom: 10px;
-
-            label.bx-prompt {
-                flex: 1;
-                font-size: 26px;
-                margin-bottom: 0;
-            }
-
-            .bx-shortcut-actions {
-                flex: 2;
-                position: relative;
-
-                select {
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    display: block;
-
-                    &:last-of-type {
-                        opacity: 0;
-                        z-index: calc(var(--bx-stream-settings-z-index) + 1);
-                    }
-                }
-            }
-        }
-    }
-}

src/assets/css/styles.styl

@@ -2,8 +2,9 @@
 
 @import 'button.styl';
 @import 'header.styl';
-@import 'global-settings.styl';
 @import 'dialog.styl';
+@import 'navigation-dialog.styl';
+@import 'settings-dialog.styl';
 @import 'toast.styl';
 @import 'loading-screen.styl';
 @import 'remote-play.styl';
@@ -13,5 +14,4 @@
 @import 'number-stepper.styl';
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
-@import 'stream-settings.styl';
 @import 'mkb.styl';

src/assets/css/web-components.styl

@@ -85,6 +85,7 @@
         font-weight: bold;
         font-size: 12px;
         font-family: var(--bx-monospaced-font);
+        flex-shrink: 0;
 
         span {
             line-height: unset;

src/assets/header_script.txt

@@ -12,4 +12,4 @@
 // @updateURL    https://raw.githubusercontent.com/redphx/better-xcloud/typescript/dist/better-xcloud.meta.js
 // @downloadURL  https://github.com/redphx/better-xcloud/releases/latest/download/better-xcloud.user.js
 // ==/UserScript==
-'use strict';
+"use strict";

src/assets/svg/better-xcloud.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='2' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M16.001 7.236h-2.328c-.443 0-1.941-.851-2.357-.905-.824-.106-1.684 0-2.489.176a13.04 13.04 0 0 0-3.137 1.14c-.392.275-.677.668-.866 1.104v.03l-3.302 8.963-.015.015c-.288.867-.553 3.75-.5 4.279a4.89 4.89 0 0 0 1.022 2.55c.654.823 3.71 1.364 4.057 1.016l4.462-4.475c.185-.186 1.547-.706 2.01-.706h6.884c.463 0 1.825.52 2.01.706l4.462 4.475c.347.348 3.403-.193 4.057-1.016a4.89 4.89 0 0 0 1.022-2.55c.053-.529-.212-3.412-.5-4.279l-.015-.015-3.302-8.963v-.03c-.189-.436-.474-.829-.866-1.104a13.04 13.04 0 0 0-3.137-1.14c-.805-.176-1.665-.282-2.489-.176-.416.054-1.914.905-2.357.905h-2.328' fill='none' stroke='#fff'/>
+    <path d='M8.172 12.914H6.519c-.235 0-.315.267-.335.452l-.052.578c0 .193.033.384.054.576.023.202.091.511.355.511h1.631l-.001 1.652c0 .234.266.315.452.335l.578.052c.193 0 .384-.033.576-.054.203-.023.511-.091.511-.355V15.03l1.652.001c.234 0 .315-.266.335-.452l.052-.578c-.001-.193-.033-.385-.055-.577-.022-.202-.09-.51-.354-.51h-1.632v-1.652c0-.234-.266-.315-.453-.335l-.577-.052c-.193 0-.385.033-.577.054-.202.023-.51.091-.51.355v1.631m16.546 2.994h-3.487c-.206 0-.413-.043-.604-.121-.177-.072-.339-.183-.476-.316-.149-.144-.259-.315-.341-.504-.156-.361-.172-.788-.032-1.157a1.57 1.57 0 0 1 .459-.641c.106-.089.223-.164.349-.222a1.52 1.52 0 0 1 .423-.123c.167-.024.338-.02.504.012a1.83 1.83 0 0 1 .455-.482 1.62 1.62 0 0 1 .522-.252c.307-.089.651-.09.959-.003a1.75 1.75 0 0 1 1.009.764 1.83 1.83 0 0 1 .251.721c.156 0 .312.031.456.09a1.24 1.24 0 0 1 .372.248c.091.087.165.19.221.302a1.19 1.19 0 0 1-.173 1.299c-.119.132-.276.239-.441.305a1.17 1.17 0 0 1-.426.08z' fill='#fff' stroke='none'/>
+</svg>

src/assets/svg/close.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M29.928,2.072L2.072,29.928'/>
+    <path d='M29.928,29.928L2.072,2.072'/>
+</svg>

src/assets/svg/create-shortcut.svg

@@ -1,4 +1,4 @@
 <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
-    <path d="M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957"/>
-    <path d="M24.24 2.781v9.957"/>
+    <path d='M13.253 3.639c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V3.639zm0 16.481c0-.758-.615-1.373-1.373-1.373H3.639c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zm16.481 0c0-.758-.615-1.373-1.373-1.373H20.12c-.758 0-1.373.615-1.373 1.373v8.241c0 .758.615 1.373 1.373 1.373h8.241c.758 0 1.373-.615 1.373-1.373V20.12zM19.262 7.76h9.957'/>
+    <path d='M24.24 2.781v9.957'/>
 </svg>

src/assets/svg/native-mkb.svg

@@ -1,10 +1,10 @@
 <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
-    <g stroke-width="2.1">
-        <path d="m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21"/>
-        <path d="m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2"/>
+    <g stroke-width='2.1'>
+        <path d='m15.817 6h-10.604c-2.215 0-4.013 1.798-4.013 4.013v12.213c0 2.215 1.798 4.013 4.013 4.013h11.21'/>
+        <path d='m5.698 20.617h1.124m-1.124-4.517h7.9m-7.881-4.5h7.9m-2.3 9h2.2'/>
     </g>
-    <g stroke-width="2.13">
-        <path d="m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z"/>
-        <path d="m23.705 14.715v-4.753"/>
+    <g stroke-width='2.13'>
+        <path d='m30.805 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.4c0 3.919 3.182 7.1 7.1 7.1s7.1-3.181 7.1-7.1z'/>
+        <path d='m23.705 14.715v-4.753'/>
     </g>
 </svg>

src/assets/svg/virtual-controller.svg

@@ -1,11 +1,11 @@
 <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
-    <g stroke-width="2.06">
-        <path d="M8.417 13.218h4.124"/>
-        <path d="M10.479 11.155v4.125"/>
-        <path d="M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192"/>
+    <g stroke-width='2.06'>
+        <path d='M8.417 13.218h4.124'/>
+        <path d='M10.479 11.155v4.125'/>
+        <path d='M12.787 19.404L7.36 25.565a3.61 3.61 0 0 1-2.551 1.056A3.63 3.63 0 0 1 1.2 23.013c0-.21.018-.42.055-.626l2.108-10.845C3.923 8.356 6.714 6.007 9.949 6h5.192'/>
     </g>
-    <g stroke-width="2.11">
-        <path d="M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z"/>
-        <path d="M23.7 14.724V9.966"/>
+    <g stroke-width='2.11'>
+        <path d='M30.8 13.1c0-3.919-3.181-7.1-7.1-7.1s-7.1 3.181-7.1 7.1v6.421c0 3.919 3.181 7.1 7.1 7.1s7.1-3.181 7.1-7.1V13.1z'/>
+        <path d='M23.7 14.724V9.966'/>
     </g>
 </svg>

src/enums/bypass-servers.ts

@@ -1,12 +1,16 @@
+import { t } from "@/utils/translation"
+
 export const BypassServers = {
-    'br': 'Brazil',
-    'jp': 'Japan',
-    'pl': 'Poland',
-    'us': 'United States',
+    'br': t('brazil'),
+    'jp': t('japan'),
+    'kr': t('korea'),
+    'pl': t('poland'),
+    'us': t('united-states'),
 }
 
-export const BypassServerIps = {
+export const BypassServerIps: Record<keyof typeof BypassServers, string> = {
     'br': '169.150.198.66',
+    'kr': '121.125.60.151',
     'jp': '138.199.21.239',
     'pl': '45.134.212.66',
     'us': '143.244.47.65',

src/enums/game-pass-gallery.ts

@@ -1,5 +1,6 @@
 export enum GamePassCloudGallery {
     ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
+    MOST_POPULAR = 'e7590b22-e299-44db-ae22-25c61405454c',
     NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486',
     TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
 }

src/enums/pref-keys.ts

@@ -0,0 +1,101 @@
+export enum StorageKey {
+    GLOBAL = 'better_xcloud',
+}
+
+export enum PrefKey {
+    LAST_UPDATE_CHECK = 'version_last_check',
+    LATEST_VERSION = 'version_latest',
+    CURRENT_VERSION = 'version_current',
+
+    BETTER_XCLOUD_LOCALE = 'bx_locale',
+
+    SERVER_REGION = 'server_region',
+    SERVER_BYPASS_RESTRICTION = 'server_bypass_restriction',
+
+    PREFER_IPV6_SERVER = 'prefer_ipv6_server',
+    STREAM_TARGET_RESOLUTION = 'stream_target_resolution',
+    STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
+    STREAM_CODEC_PROFILE = 'stream_codec_profile',
+
+    USER_AGENT_PROFILE = 'user_agent_profile',
+    STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
+
+    STREAM_COMBINE_SOURCES = 'stream_combine_sources',
+
+    STREAM_TOUCH_CONTROLLER = 'stream_touch_controller',
+    STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off',
+    STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity',
+    STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard',
+    STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom',
+
+    STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
+
+    BITRATE_VIDEO_MAX = 'bitrate_video_max',
+
+    GAME_BAR_POSITION = 'game_bar_position',
+
+    LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
+    // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
+
+    CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
+    CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
+    CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
+    CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
+    CONTROLLER_SHOW_CONNECTION_STATUS = 'controller_show_connection_status',
+
+    NATIVE_MKB_ENABLED = 'native_mkb_enabled',
+    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
+    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'native_mkb_scroll_y_sensitivity',
+
+    MKB_ENABLED = 'mkb_enabled',
+    MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
+    MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
+    MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
+
+    SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
+
+    BLOCK_TRACKING = 'block_tracking',
+    BLOCK_SOCIAL_FEATURES = 'block_social_features',
+    SKIP_SPLASH_VIDEO = 'skip_splash_video',
+    HIDE_DOTS_ICON = 'hide_dots_icon',
+    REDUCE_ANIMATIONS = 'reduce_animations',
+
+    UI_LOADING_SCREEN_GAME_ART = 'ui_loading_screen_game_art',
+    UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
+    UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
+
+    UI_CONTROLLER_FRIENDLY = 'ui_controller_friendly',
+    UI_LAYOUT = 'ui_layout',
+    UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
+    UI_HIDE_SECTIONS = 'ui_hide_sections',
+
+    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
+    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
+
+    VIDEO_PLAYER_TYPE = 'video_player_type',
+    VIDEO_PROCESSING = 'video_processing',
+    VIDEO_POWER_PREFERENCE = 'video_power_preference',
+    VIDEO_SHARPNESS = 'video_sharpness',
+    VIDEO_RATIO = 'video_ratio',
+    VIDEO_BRIGHTNESS = 'video_brightness',
+    VIDEO_CONTRAST = 'video_contrast',
+    VIDEO_SATURATION = 'video_saturation',
+
+    AUDIO_MIC_ON_PLAYING = 'audio_mic_on_playing',
+    AUDIO_ENABLE_VOLUME_CONTROL = 'audio_enable_volume_control',
+    AUDIO_VOLUME = 'audio_volume',
+
+    STATS_ITEMS = 'stats_items',
+    STATS_SHOW_WHEN_PLAYING = 'stats_show_when_playing',
+    STATS_QUICK_GLANCE = 'stats_quick_glance',
+    STATS_POSITION = 'stats_position',
+    STATS_TEXT_SIZE = 'stats_text_size',
+    STATS_TRANSPARENT = 'stats_transparent',
+    STATS_OPACITY = 'stats_opacity',
+    STATS_CONDITIONAL_FORMATTING = 'stats_conditional_formatting',
+
+    REMOTE_PLAY_ENABLED = 'xhome_enabled',
+    REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
+
+    GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
+}

src/enums/ui-sections.ts

@@ -1,6 +1,8 @@
 export enum UiSection {
-    NEWS = 'news',
+    ALL_GAMES = 'all-games',
     FRIENDS = 'friends',
     MOST_POPULAR = 'most-popular',
-    ALL_GAMES = 'all-games',
+    NATIVE_MKB = 'native-mkb',
+    NEWS = 'news',
+    TOUCH = 'touch',
 }

src/index.ts

@@ -11,8 +11,6 @@ import { StreamBadges } from "@modules/stream/stream-badges";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { addCss, preloadFonts } from "@utils/css";
 import { Toast } from "@utils/toast";
-import { setupStreamUi } from "@modules/ui/ui";
-import { PrefKey, getPref } from "@utils/preferences";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
@@ -22,20 +20,24 @@ import { RemotePlay } from "@modules/remote-play";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
 import { VibrationManager } from "@modules/vibration-manager";
 import { overridePreloadState } from "@utils/preload-state";
-import { patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
+import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
 import { AppInterface, STATES } from "@utils/global";
-import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
 import { BxLogger } from "@utils/bx-logger";
 import { GameBar } from "./modules/game-bar/game-bar";
 import { Screenshot } from "./utils/screenshot";
 import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
 import { GuideMenu, GuideMenuTab } from "./modules/ui/guide-menu";
-import { StreamSettings } from "./modules/stream/stream-settings";
 import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
 import { UiSection } from "./enums/ui-sections";
 import { HeaderSection } from "./modules/ui/header";
 import { GameTile } from "./modules/ui/game-tile";
 import { ProductDetailsPage } from "./modules/ui/product-details";
+import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
+import { PrefKey } from "./enums/pref-keys";
+import { getPref, StreamTouchController } from "./utils/settings-storages/global-settings-storage";
+import { compressCss } from "@macros/build" with {type: "macro"};
+import { SettingsNavigationDialog } from "./modules/ui/dialog/settings-dialog";
+import { StreamUiHandler } from "./modules/stream/stream-ui";
 
 
 // Handle login page
@@ -64,7 +66,7 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     window.stop();
 
     // Show the reloading overlay
-    const css = `
+    const css = compressCss(`
 .bx-reload-overlay {
     position: fixed;
     top: 0;
@@ -78,7 +80,7 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
 }
-`;
+`);
     const $fragment = document.createDocumentFragment();
     $fragment.appendChild(CE('style', {}, css));
     $fragment.appendChild(CE('div', {'class': 'bx-reload-overlay'}, t('safari-failed-message')));
@@ -110,14 +112,14 @@ document.addEventListener('readystatechange', e => {
         return;
     }
 
-    STATES.isSignedIn = (window as any).xbcUser.isSignedIn;
+    STATES.isSignedIn = !!((window as any).xbcUser?.isSignedIn);
 
     if (STATES.isSignedIn) {
         // Preload Remote Play
-        getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) && RemotePlay.preload();
     } else {
-        // Show Settings button in the header when not signed
-        HeaderSection.watchHeader();
+        // Show Settings button in the header when not signed in
+        window.setTimeout(HeaderSection.watchHeader, 2000);
     }
 
     // Hide "Play with Friends" skeleton section
@@ -125,6 +127,9 @@ document.addEventListener('readystatechange', e => {
         const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
         $parent && ($parent.style.display = 'none');
     }
+
+    // Preload fonts
+    preloadFonts();
 })
 
 window.BX_EXPOSED = BxExposed;
@@ -141,10 +146,14 @@ window.history.replaceState = patchHistoryMethod('replaceState');
 window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
     STATES.supportedRegion = false;
     window.setTimeout(HeaderSection.watchHeader, 2000);
+
+    // Open Settings dialog on Unsupported page
+    SettingsNavigationDialog.getInstance().show();
 });
 
 window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
-    HeaderSection.watchHeader();
+    STATES.isSignedIn = true;
+    window.setTimeout(HeaderSection.watchHeader, 2000);
 });
 
 window.addEventListener(BxEvent.STREAM_LOADING, e => {
@@ -159,9 +168,6 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
         STATES.currentStream.titleId = 'remote-play';
         STATES.currentStream.productId = '';
     }
-
-    // Setup UI
-    setupStreamUi();
 });
 
 // Setup loading screen
@@ -180,7 +186,7 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
     STATES.isPlaying = true;
-    injectStreamMenuButtons();
+    StreamUiHandler.observe();
 
     if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
         const gameBar = GameBar.getInstance();
@@ -223,7 +229,7 @@ function unload() {
     window.BX_EXPOSED.shouldShowSensorControls = false;
     window.BX_EXPOSED.stopTakRendering = false;
 
-    StreamSettings.getInstance().hide();
+    NavigationDialogManager.getInstance().hide();
     StreamStats.getInstance().onStoppedPlaying();
 
     MouseCursorHider.stop();
@@ -313,7 +319,11 @@ function main() {
     AppInterface && patchPointerLockApi();
 
     getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
-    getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
+
+    if (getPref(PrefKey.BLOCK_TRACKING)) {
+        patchMeControl();
+        disableAdobeAudienceManager();
+    }
 
     STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
     overridePreloadState();
@@ -325,10 +335,8 @@ function main() {
 
     // Setup UI
     addCss();
-    preloadFonts();
     Toast.setup();
     (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
-    BX_FLAGS.PreloadUi && setupStreamUi();
     Screenshot.setup();
 
     GuideMenu.observe();
@@ -351,7 +359,7 @@ function main() {
         RemotePlay.detect();
     }
 
-    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
         TouchController.setup();
     }
 

src/macros/build.ts

@@ -1,13 +1,19 @@
 import stylus from 'stylus';
 
-import cssStr from "@assets/css/styles.styl" with { type: "text" };
+export const renderStylus = async () => {
+    const file = Bun.file('./src/assets/css/styles.styl');
+    const cssStr = await file.text();
 
-const generatedCss = await (stylus(cssStr, {})
-	.set('filename', 'styles.css')
-	.set('compress', true)
-	.include('src/assets/css/'))
-	.render();
+    const generatedCss = await (stylus(cssStr, {})
+        .set('filename', 'styles.css')
+        .set('compress', true)
+        .include('src/assets/css/'))
+        .render();
 
-export const renderStylus = () => {
     return generatedCss;
 };
+
+
+export const compressCss = async (css: string) => {
+    return await (stylus(css, {}).set('compress', true)).render();
+};

src/modules/controller-shortcut.ts

@@ -1,19 +1,24 @@
 import { Screenshot } from "@utils/screenshot";
 import { GamepadKey } from "@enums/mkb";
 import { PrompFont } from "@enums/prompt-font";
-import { CE } from "@utils/html";
+import { CE, removeChildElements } from "@utils/html";
 import { t } from "@utils/translation";
 import { EmulatedMkbHandler } from "./mkb/mkb-handler";
 import { StreamStats } from "./stream/stream-stats";
 import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
 import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
-import { PrefKey, getPref } from "@utils/preferences";
 import { SoundShortcut } from "./shortcuts/shortcut-sound";
 import { BxEvent } from "@/utils/bx-event";
 import { AppInterface } from "@/utils/global";
 import { BxSelectElement } from "@/web-components/bx-select";
+import { setNearby } from "@/utils/navigation-utils";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { SettingsNavigationDialog } from "./ui/dialog/settings-dialog";
+
+const enum ShortcutAction {
+    BETTER_XCLOUD_SETTINGS_SHOW = 'bx-settings-show',
 
-enum ShortcutAction {
     STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
 
     STREAM_MENU_SHOW = 'stream-menu-show',
@@ -42,7 +47,7 @@ export class ControllerShortcut {
     static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
     static #$container: HTMLElement;
 
-    static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} = {};
+    static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} | null = null;
 
     static reset(index: number) {
         ControllerShortcut.#buttonsCache[index] = [];
@@ -50,8 +55,12 @@ export class ControllerShortcut {
     }
 
     static handle(gamepad: Gamepad): boolean {
+        if (!ControllerShortcut.#ACTIONS) {
+            ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
+        }
+
         const gamepadIndex = gamepad.index;
-        const actions = ControllerShortcut.#ACTIONS[gamepad.id];
+        const actions = ControllerShortcut.#ACTIONS![gamepad.id];
         if (!actions) {
             return false;
         }
@@ -83,6 +92,10 @@ export class ControllerShortcut {
 
     static #runAction(action: ShortcutAction) {
         switch (action) {
+            case ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW:
+                SettingsNavigationDialog.getInstance().show();
+                break;
+
             case ShortcutAction.STREAM_SCREENSHOT_CAPTURE:
                 Screenshot.takeScreenshot();
                 break;
@@ -122,15 +135,16 @@ export class ControllerShortcut {
     }
 
     static #updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) {
-        if (!(profile in ControllerShortcut.#ACTIONS)) {
-            ControllerShortcut.#ACTIONS[profile] = [];
+        const actions = ControllerShortcut.#ACTIONS!;
+        if (!(profile in actions)) {
+            actions[profile] = [];
         }
 
         if (!action) {
             action = null;
         }
 
-        ControllerShortcut.#ACTIONS[profile][button] = action;
+        actions[profile][button] = action;
 
         // Remove empty profiles
         for (const key in ControllerShortcut.#ACTIONS) {
@@ -160,9 +174,7 @@ export class ControllerShortcut {
         const $fragment = document.createDocumentFragment();
 
         // Remove old profiles
-        while ($select.firstElementChild) {
-            $select.firstElementChild.remove();
-        }
+        removeChildElements($select);
 
         const gamepads = navigator.getGamepads();
         let hasGamepad = false;
@@ -194,7 +206,7 @@ export class ControllerShortcut {
     }
 
     static #switchProfile(profile: string) {
-        let actions = ControllerShortcut.#ACTIONS[profile];
+        let actions = ControllerShortcut.#ACTIONS![profile];
         if (!actions) {
             actions = [];
         }
@@ -207,15 +219,20 @@ export class ControllerShortcut {
 
             BxEvent.dispatch($select, 'input', {
                 ignoreOnChange: true,
+                manualTrigger: true,
             });
         }
     }
 
+    static #getActionsFromStorage() {
+        return JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
+    }
+
     static renderSettings() {
         const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
 
         // Read actions from localStorage
-        ControllerShortcut.#ACTIONS = JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
+        ControllerShortcut.#ACTIONS = ControllerShortcut.#getActionsFromStorage();
 
         const buttons: Map<GamepadKey, PrompFont> = new Map();
         buttons.set(GamepadKey.Y, PrompFont.Y);
@@ -241,6 +258,10 @@ export class ControllerShortcut {
         buttons.set(GamepadKey.R3, PrompFont.R3);
 
         const actions: {[key: string]: Partial<{[key in ShortcutAction]: string | string[]}>} = {
+            [t('better-xcloud')]: {
+                [ShortcutAction.BETTER_XCLOUD_SETTINGS_SHOW]: [t('settings'), t('show')],
+            },
+
             [t('device')]: AppInterface && {
                 [ShortcutAction.DEVICE_SOUND_TOGGLE]: [t('sound'), t('toggle')],
                 [ShortcutAction.DEVICE_VOLUME_INC]: [t('volume'), t('increase')],
@@ -260,7 +281,7 @@ export class ControllerShortcut {
                 [ShortcutAction.STREAM_MENU_SHOW]: [t('menu'), t('show')],
                 [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')],
                 [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
-            }
+            },
         };
 
         const $baseSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'}, CE('option', {value: ''}, '---'));
@@ -292,13 +313,24 @@ export class ControllerShortcut {
         let $remap: HTMLElement;
         const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
 
-        const $container = CE('div', {'data-has-gamepad': 'false'},
+        const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
+
+        const $container = CE('div', {
+            'data-has-gamepad': 'false',
+            _nearby: {
+                focus: $profile,
+            },
+        },
             CE('div', {},
                 CE('p', {class: 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
             ),
 
             $remap = CE('div', {},
-                PREF_CONTROLLER_FRIENDLY_UI ? CE('div', {'data-focus-container': 'true'}, BxSelectElement.wrap($selectProfile)) : $selectProfile,
+                CE('div', {
+                    _nearby: {
+                        focus: $profile,
+                    },
+                }, $profile),
                 CE('p', {class: 'bx-shortcut-note'},
                     CE('span', {class: 'bx-prompt'}, PrompFont.HOME),
                     ': ' + t('controller-shortcuts-xbox-note'),
@@ -336,7 +368,6 @@ export class ControllerShortcut {
         for (const [button, prompt] of buttons) {
             const $row = CE('div', {
                 class: 'bx-shortcut-row',
-                'data-focus-container': 'true',
             });
 
             const $label = CE('label', {class: 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
@@ -358,9 +389,16 @@ export class ControllerShortcut {
             ControllerShortcut.#$selectActions[button] = $select;
 
             if (PREF_CONTROLLER_FRIENDLY_UI) {
-                $div.appendChild(BxSelectElement.wrap($select));
+                const $bxSelect = BxSelectElement.wrap($select);
+                $div.appendChild($bxSelect);
+                setNearby($row, {
+                    focus: $bxSelect,
+                });
             } else {
                 $div.appendChild($select);
+                setNearby($row, {
+                    focus: $select,
+                });
             }
 
             $row.appendChild($label);

src/modules/game-bar/game-bar.ts

@@ -5,8 +5,9 @@ import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import type { BaseGameBarAction } from "./action-base";
 import { STATES } from "@utils/global";
-import { PrefKey, getPref } from "@utils/preferences";
 import { MicrophoneAction } from "./action-microphone";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
 
 
 export class GameBar {
@@ -41,7 +42,7 @@ export class GameBar {
 
         this.actions = [
             new ScreenshotAction(),
-            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
+            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.OFF) ? [new TouchControlAction()] : []),
             new MicrophoneAction(),
         ];
 

src/modules/loading-screen.ts

@@ -1,8 +1,9 @@
 import { CE } from "@utils/html";
 import { getPreferredServerRegion } from "@utils/region";
-import { PrefKey, getPref } from "@utils/preferences";
 import { t } from "@utils/translation";
 import { STATES } from "@utils/global";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 export class LoadingScreen {
     static #$bgStyle: HTMLElement;

src/modules/mkb/mkb-handler.ts

@@ -2,7 +2,6 @@ import { MkbPreset } from "./mkb-preset";
 import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo, WheelCode } from "@enums/mkb";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BxEvent } from "@utils/bx-event";
-import { PrefKey, getPref } from "@utils/preferences";
 import { Toast } from "@utils/toast";
 import { t } from "@utils/translation";
 import { LocalDb } from "@utils/local-db";
@@ -14,7 +13,10 @@ import { BxLogger } from "@utils/bx-logger";
 import { PointerClient } from "./pointer-client";
 import { NativeMkbHandler } from "./native-mkb-handler";
 import { MkbHandler, MouseDataProvider } from "./base-mkb-handler";
-import { StreamSettings } from "../stream/stream-settings";
+import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog";
+import { NavigationDialogManager } from "../ui/dialog/navigation-dialog";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 const LOG_TAG = 'MkbHandler';
 
@@ -507,7 +509,10 @@ export class EmulatedMkbHandler extends MkbHandler {
                                 e.preventDefault();
                                 e.stopPropagation();
 
-                                StreamSettings.getInstance().show('mkb');
+                                // Show Settings dialog & focus the MKB tab
+                                const dialog = SettingsNavigationDialog.getInstance();
+                                dialog.focusTab('mkb');
+                                NavigationDialogManager.getInstance().show(dialog);
                             },
                         }),
                     ),

src/modules/mkb/mkb-preset.ts

@@ -1,9 +1,9 @@
 import { t } from "@utils/translation";
-import { SettingElementType } from "@utils/settings";
 import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "@enums/mkb";
 import { EmulatedMkbHandler } from "./mkb-handler";
 import type { MkbPresetData, MkbConvertedPresetData } from "@/types/mkb";
 import type { PreferenceSettings } from "@/types/preferences";
+import { SettingElementType } from "@/utils/setting-element";
 
 
 export class MkbPreset {

src/modules/mkb/mkb-remapper.ts

@@ -1,16 +1,17 @@
 import { CE, createButton, ButtonStyle } from "@utils/html";
 import { t } from "@utils/translation";
 import { Dialog } from "@modules/dialog";
-import { getPref, setPref, PrefKey } from "@utils/preferences";
 import { KeyHelper } from "./key-helper";
 import { MkbPreset } from "./mkb-preset";
 import { EmulatedMkbHandler } from "./mkb-handler";
 import { LocalDb } from "@utils/local-db";
 import { BxIcon } from "@utils/bx-icon";
-import { SettingElement } from "@utils/settings";
 import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb";
 import { MkbPresetKey, GamepadKey, GamepadKeyName } from "@enums/mkb";
 import { deepClone } from "@utils/global";
+import { SettingElement } from "@/utils/setting-element";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
 
 
 type MkbRemapperElements = {
@@ -317,7 +318,7 @@ export class MkbRemapper {
     render() {
         this.#$.wrapper = CE('div', {'class': 'bx-mkb-settings'});
 
-        this.#$.presetsSelect = CE<HTMLSelectElement>('select', {});
+        this.#$.presetsSelect = CE<HTMLSelectElement>('select', {tabindex: -1});
         this.#$.presetsSelect!.addEventListener('change', e => {
             this.#switchPreset(parseInt((e.target as HTMLSelectElement).value));
         });
@@ -336,80 +337,84 @@ export class MkbRemapper {
         };
 
         const $header = CE('div', {'class': 'bx-mkb-preset-tools'},
-                this.#$.presetsSelect,
-                // Rename button
-                createButton({
-                    title: t('rename'),
-                    icon: BxIcon.CURSOR_TEXT,
-                    onClick: e => {
-                        const preset = this.#getCurrentPreset();
+            this.#$.presetsSelect,
+            // Rename button
+            createButton({
+                title: t('rename'),
+                icon: BxIcon.CURSOR_TEXT,
+                tabIndex: -1,
+                onClick: e => {
+                    const preset = this.#getCurrentPreset();
 
-                        let newName = promptNewName(preset.name);
-                        if (!newName || newName === preset.name) {
+                    let newName = promptNewName(preset.name);
+                    if (!newName || newName === preset.name) {
+                        return;
+                    }
+
+                    // Update preset with new name
+                    preset.name = newName;
+                    LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh());
+                },
+            }),
+
+            // New button
+            createButton({
+                    icon: BxIcon.NEW,
+                    title: t('new'),
+                    tabIndex: -1,
+                    onClick: e => {
+                        let newName = promptNewName('');
+                        if (!newName) {
                             return;
                         }
 
-                        // Update preset with new name
-                        preset.name = newName;
-                        LocalDb.INSTANCE.updatePreset(preset).then(id => this.#refresh());
+                        // Create new preset selected name
+                        LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
+                            this.#STATE.currentPresetId = id;
+                            this.#refresh();
+                        });
                     },
                 }),
 
-                // New button
-                createButton({
-                      icon: BxIcon.NEW,
-                      title: t('new'),
-                      onClick: e => {
-                          let newName = promptNewName('');
-                          if (!newName) {
-                              return;
-                          }
+            // Copy button
+            createButton({
+                icon: BxIcon.COPY,
+                title: t('copy'),
+                tabIndex: -1,
+                onClick: e => {
+                    const preset = this.#getCurrentPreset();
 
-                          // Create new preset selected name
-                          LocalDb.INSTANCE.newPreset(newName, MkbPreset.DEFAULT_PRESET).then(id => {
-                              this.#STATE.currentPresetId = id;
-                              this.#refresh();
-                          });
-                      },
-                    }),
+                    let newName = promptNewName(`${preset.name} (2)`);
+                    if (!newName) {
+                        return;
+                    }
 
-                // Copy button
-                createButton({
-                        icon: BxIcon.COPY,
-                        title: t('copy'),
-                        onClick: e => {
-                            const preset = this.#getCurrentPreset();
+                    // Create new preset selected name
+                    LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => {
+                        this.#STATE.currentPresetId = id;
+                        this.#refresh();
+                    });
+                },
+            }),
 
-                            let newName = promptNewName(`${preset.name} (2)`);
-                            if (!newName) {
-                                return;
-                            }
+            // Delete button
+            createButton({
+                icon: BxIcon.TRASH,
+                style: ButtonStyle.DANGER,
+                title: t('delete'),
+                tabIndex: -1,
+                onClick: e => {
+                    if (!confirm(t('confirm-delete-preset'))) {
+                        return;
+                    }
 
-                            // Create new preset selected name
-                            LocalDb.INSTANCE.newPreset(newName, preset.data).then(id => {
-                                this.#STATE.currentPresetId = id;
-                                this.#refresh();
-                            });
-                        },
-                    }),
-
-                // Delete button
-                createButton({
-                        icon: BxIcon.TRASH,
-                        style: ButtonStyle.DANGER,
-                        title: t('delete'),
-                        onClick: e => {
-                            if (!confirm(t('confirm-delete-preset'))) {
-                                return;
-                            }
-
-                            LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
-                                this.#STATE.currentPresetId = 0;
-                                this.#refresh();
-                            });
-                        },
-                    }),
-            );
+                    LocalDb.INSTANCE.deletePreset(this.#STATE.currentPresetId).then(id => {
+                        this.#STATE.currentPresetId = 0;
+                        this.#refresh();
+                    });
+                },
+            }),
+        );
 
         this.#$.wrapper!.appendChild($header);
 
@@ -426,11 +431,11 @@ export class MkbRemapper {
             const $fragment = document.createDocumentFragment();
             for (let i = 0; i < keysPerButton; i++) {
                 $elm = CE('button', {
-                        type: 'button',
-                        'data-prompt': buttonPrompt,
-                        'data-button-index': buttonIndex,
-                        'data-key-slot': i,
-                    }, ' ');
+                    type: 'button',
+                    'data-prompt': buttonPrompt,
+                    'data-button-index': buttonIndex,
+                    'data-key-slot': i,
+                }, ' ');
 
                 $elm.addEventListener('mouseup', this.#onBindingKey);
                 $elm.addEventListener('contextmenu', this.#onContextMenu);
@@ -440,9 +445,9 @@ export class MkbRemapper {
             }
 
             const $keyRow = CE('div', {'class': 'bx-mkb-key-row'},
-                    CE('label', {'title': buttonName}, buttonPrompt),
-                    $fragment,
-                );
+                CE('label', {'title': buttonName}, buttonPrompt),
+                $fragment,
+            );
 
             $rows.appendChild($keyRow);
         }
@@ -460,10 +465,13 @@ export class MkbRemapper {
             const onChange = (e: Event, value: any) => {
                 (this.#STATE.editingPresetData!.mouse as any)[key] = value;
             };
-            const $row = CE('div', {'class': 'bx-stream-settings-row'},
-                    CE('label', {'for': `bx_setting_${key}`}, setting.label),
-                    $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
-                );
+            const $row = CE('label', {
+                class: 'bx-settings-row',
+                for: `bx_setting_${key}`
+            },
+                CE('span', {class: 'bx-settings-label'}, setting.label),
+                $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
+            );
 
             $mouseSettings.appendChild($row);
             this.#$.allMouseElements[key as MkbPresetKey] = $elm;
@@ -474,59 +482,63 @@ export class MkbRemapper {
 
         // Render action buttons
         const $actionButtons = CE('div', {'class': 'bx-mkb-action-buttons'},
-                CE('div', {},
-                   // Edit button
-                   createButton({
-                           label: t('edit'),
-                           onClick: e => this.#toggleEditing(true),
-                   }),
+            CE('div', {},
+                // Edit button
+                createButton({
+                    label: t('edit'),
+                    tabIndex: -1,
+                    onClick: e => this.#toggleEditing(true),
+                }),
 
-                   // Activate button
-                   this.#$.activateButton = createButton({
-                           label: t('activate'),
-                           style: ButtonStyle.PRIMARY,
-                           onClick: e => {
-                               setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
-                               EmulatedMkbHandler.getInstance().refreshPresetData();
+                // Activate button
+                this.#$.activateButton = createButton({
+                    label: t('activate'),
+                    style: ButtonStyle.PRIMARY,
+                    tabIndex: -1,
+                    onClick: e => {
+                        setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
+                        EmulatedMkbHandler.getInstance().refreshPresetData();
 
-                               this.#refresh();
-                           },
-                       }),
-                ),
+                        this.#refresh();
+                    },
+                }),
+            ),
 
-                CE('div', {},
-                   // Cancel button
-                   createButton({
-                           label: t('cancel'),
-                           style: ButtonStyle.GHOST,
-                           onClick: e => {
-                               // Restore preset
-                               this.#switchPreset(this.#STATE.currentPresetId);
-                               this.#toggleEditing(false);
-                           },
-                       }),
+            CE('div', {},
+                // Cancel button
+                createButton({
+                    label: t('cancel'),
+                    style: ButtonStyle.GHOST,
+                    tabIndex: -1,
+                    onClick: e => {
+                        // Restore preset
+                        this.#switchPreset(this.#STATE.currentPresetId);
+                        this.#toggleEditing(false);
+                    },
+                }),
 
-                   // Save button
-                   createButton({
-                           label: t('save'),
-                           style: ButtonStyle.PRIMARY,
-                           onClick: e => {
-                               const updatedPreset = deepClone(this.#getCurrentPreset());
-                               updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
+                // Save button
+                createButton({
+                    label: t('save'),
+                    style: ButtonStyle.PRIMARY,
+                    tabIndex: -1,
+                    onClick: e => {
+                        const updatedPreset = deepClone(this.#getCurrentPreset());
+                        updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
 
-                               LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
-                                   // If this is the default preset => refresh preset data
-                                   if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
-                                       EmulatedMkbHandler.getInstance().refreshPresetData();
-                                   }
+                        LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
+                            // If this is the default preset => refresh preset data
+                            if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
+                                EmulatedMkbHandler.getInstance().refreshPresetData();
+                            }
 
-                                   this.#toggleEditing(false);
-                                   this.#refresh();
-                               });
-                           },
-                       }),
-                ),
-            );
+                            this.#toggleEditing(false);
+                            this.#refresh();
+                        });
+                    },
+                }),
+            ),
+        );
 
         this.#$.wrapper!.appendChild($actionButtons);
 

src/modules/mkb/native-mkb-handler.ts

@@ -5,7 +5,8 @@ import { MkbHandler } from "./base-mkb-handler";
 import { t } from "@/utils/translation";
 import { BxEvent } from "@/utils/bx-event";
 import { ButtonStyle, CE, createButton } from "@/utils/html";
-import { PrefKey, getPref } from "@/utils/preferences";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 type NativeMouseData = {
     X: number,

src/modules/patcher.ts

@@ -1,6 +1,5 @@
 import { AppInterface, SCRIPT_VERSION, STATES } from "@utils/global";
 import { BX_FLAGS } from "@utils/bx-flags";
-import { getPref, PrefKey } from "@utils/preferences";
 import { VibrationManager } from "@modules/vibration-manager";
 import { BxLogger } from "@utils/bx-logger";
 import { hashCode, renderString } from "@utils/utils";
@@ -15,11 +14,41 @@ import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with {
 import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
 import { FeatureGates } from "@/utils/feature-gates.js";
 import { UiSection } from "@/enums/ui-sections.js";
+import { PrefKey } from "@/enums/pref-keys.js";
+import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
+import { GamePassCloudGallery } from "@/enums/game-pass-gallery.js";
 
 type PatchArray = (keyof typeof PATCHES)[];
 
-const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
+class PatcherUtils {
+    static indexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+        const index = txt.indexOf(searchString, startIndex);
+        if (index < 0 || (maxRange && index - startIndex > maxRange)) {
+            return -1;
+        }
 
+        return index;
+    }
+
+    static lastIndexOf(txt: string, searchString: string, startIndex: number, maxRange: number): number {
+        const index = txt.lastIndexOf(searchString, startIndex);
+        if (index < 0 || (maxRange && startIndex - index > maxRange)) {
+            return -1;
+        }
+
+        return index;
+    }
+
+    static insertAt(txt: string, index: number, insertString: string): string {
+        return txt.substring(0, index) + insertString + txt.substring(index);
+    }
+
+    static replaceWith(txt: string, index: number, fromString: string, toString: string): string {
+        return txt.substring(0, index) + toString + txt.substring(index + fromString.length);
+    }
+}
+
+const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
 const LOG_TAG = 'Patcher';
 
 const PATCHES = {
@@ -27,15 +56,15 @@ const PATCHES = {
     disableAiTrack(str: string) {
         const text = '.track=function(';
         const index = str.indexOf(text);
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
-        if (str.substring(0, index + 200).includes('"AppInsightsCore')) {
+        if (PatcherUtils.indexOf(str, '"AppInsightsCore', index, 200) < 0) {
             return false;
         }
 
-        return str.substring(0, index) + '.track=function(e){},!!function(' + str.substring(index + text.length);
+        return PatcherUtils.replaceWith(str, index, text, '.track=function(e){},!!function(');
     },
 
     // Set disableTelemetry() to true
@@ -94,7 +123,7 @@ const PATCHES = {
     // Replace "/direct-connect" with "/play"
     remotePlayDirectConnectUrl(str: string) {
         const index = str.indexOf('/direct-connect');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -138,16 +167,6 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
         return str.replace(text, text + newCode);
     },
 
-    // Disable trackEvent() function
-    disableTrackEvent(str: string) {
-        const text = 'this.trackEvent=';
-        if (!str.includes(text)) {
-            return false;
-        }
-
-        return str.replace(text, 'this.trackEvent=e=>{},this.uwuwu=');
-    },
-
     // Block WebRTC stats collector
     blockWebRtcStatsCollector(str: string) {
         const text = 'this.shouldCollectStats=!0';
@@ -160,7 +179,7 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
 
     patchPollGamepads(str: string) {
         const index = str.indexOf('},this.pollGamepads=()=>{');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -231,7 +250,7 @@ logFunc(logTag, '//', logMessage);
     // Override website's settings
     overrideSettings(str: string) {
         const index = str.indexOf(',EnableStreamGate:');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -249,7 +268,7 @@ logFunc(logTag, '//', logMessage);
 
     disableGamepadDisconnectedScreen(str: string) {
         const index = str.indexOf('"GamepadDisconnected_Title",');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -286,7 +305,7 @@ logFunc(logTag, '//', logMessage);
     // Disable StreamGate
     disableStreamGate(str: string) {
         const index = str.indexOf('case"partially-ready":');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -316,7 +335,7 @@ window.dispatchEvent(new Event("${BxEvent.TOUCH_LAYOUT_MANAGER_READY}"));
     patchBabylonRendererClass(str: string) {
         // ()=>{a.current.render(),h.current=window.requestAnimationFrame(l)
         let index = str.indexOf('.current.render(),');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -373,9 +392,11 @@ if (window.BX_EXPOSED.stopTakRendering) {
             return false;
         }
 
-        let remotePlayCode = '';
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
-            remotePlayCode = `
+        let autoOffCode = '';
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.OFF) {
+            autoOffCode = 'return;';
+        } else if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
+            autoOffCode = `
 const gamepads = window.navigator.getGamepads();
 let gamepadFound = false;
 
@@ -393,13 +414,11 @@ if (gamepadFound) {
         }
 
         const newCode = `
-if (!!window.BX_REMOTE_PLAY_CONFIG) {
-    ${remotePlayCode}
-} else {
-    const titleInfo = window.BX_EXPOSED.getTitleInfo();
-    if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport) {
-        return;
-    }
+${autoOffCode}
+
+const titleInfo = window.BX_EXPOSED.getTitleInfo();
+if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport) {
+    return;
 }
 `;
 
@@ -431,7 +450,7 @@ e.guideUI = null;
 `;
 
         // Remove the TAK Edit button when the touch controller is disabled
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off') {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.OFF) {
             newCode += 'e.canShowTakHUD = false;';
         }
 
@@ -454,7 +473,7 @@ BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
 
     patchGamepadPolling(str: string) {
         let index = str.indexOf('.shouldHandleGamepadInput)())return void');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -466,7 +485,7 @@ BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
     patchXcloudTitleInfo(str: string) {
         const text = 'async cloudConnect';
         let index = str.indexOf(text);
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -488,7 +507,7 @@ BxLogger.info('patchXcloudTitleInfo', ${titleInfoVar});
     patchRemotePlayMkb(str: string) {
         const text = 'async homeConsoleConnect';
         let index = str.indexOf(text);
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -709,7 +728,7 @@ true` + text;
         index > -1 && (index = str.indexOf('return ', index));
         index > -1 && (index = str.indexOf('?', index));
 
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -720,34 +739,92 @@ true` + text;
     // Don't render "Play With Friends" sections
     ignorePlayWithFriendsSection(str: string) {
         let index = str.indexOf('location:"PlayWithFriendsRow",');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
-        index = str.indexOf('return', index - 50);
-        if (index === -1) {
+        index = PatcherUtils.lastIndexOf(str, 'return', index, 50);
+        if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'return null;' + str.substring(index + 6);
+        str = PatcherUtils.replaceWith(str, index, 'return', 'return null;');
         return str;
     },
 
     // Don't render "All Games" sections
     ignoreAllGamesSection(str: string) {
         let index = str.indexOf('className:"AllGamesRow-module__allGamesRowContainer');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
-        index = str.indexOf('grid:!0,', index);
-        index > -1 && (index = str.indexOf('(0,', index - 70));
-
-        if (index === -1) {
+        index = PatcherUtils.indexOf(str, 'grid:!0,', index, 1500);
+        if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'true ? null :' + str.substring(index);
+        index = PatcherUtils.lastIndexOf(str, '(0,', index, 70);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'true ? null :');
+        return str;
+    },
+
+    // home-page.js
+    ignorePlayWithTouchSection(str: string) {
+        let index = str.indexOf('("Play_With_Touch"),');
+        if (index < 0) {
+            return false;
+        }
+
+        index = PatcherUtils.lastIndexOf(str, 'const ', index, 30);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'return null;');
+        return str;
+    },
+
+    // home-page.js
+    ignoreSiglSections(str: string) {
+        let index = str.indexOf('SiglRow-module__heroCard___');
+        if (index < 0) {
+            return false;
+        }
+
+        index = PatcherUtils.lastIndexOf(str, 'const[', index, 300);
+        if (index < 0) {
+            return false;
+        }
+
+        const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS) as UiSection[];
+        const siglIds: GamePassCloudGallery[] = [];
+
+        const sections: PartialRecord<UiSection, GamePassCloudGallery> = {
+            [UiSection.NATIVE_MKB]: GamePassCloudGallery.NATIVE_MKB,
+            [UiSection.MOST_POPULAR]: GamePassCloudGallery.MOST_POPULAR,
+        };
+
+        PREF_HIDE_SECTIONS.forEach(section => {
+            const galleryId = sections[section];
+            galleryId && siglIds.push(galleryId);
+        });
+
+        const checkSyntax = siglIds.map(item => `siglId === "${item}"`).join(' || ');
+
+        const newCode = `
+if (e && e.id) {
+    const siglId = e.id;
+    if (${checkSyntax}) {
+        return null;
+    }
+}
+`;
+        str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
@@ -774,12 +851,12 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
     // game-stream.js   24.16.4
     alwaysShowStreamHud(str: string) {
         let index = str.indexOf(',{onShowStreamMenu:');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
         index = str.indexOf('&&(0,', index - 100);
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -791,7 +868,7 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
     // 24225.js#4127, 24.17.11
     patchSetCurrentlyFocusedInteractable(str: string) {
         let index = str.indexOf('.setCurrentlyFocusedInteractable=(');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
@@ -803,18 +880,38 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
     // product-details-page.js#2388, 24.17.20
     detectProductDetailsPage(str: string) {
         let index = str.indexOf('{location:"ProductDetailPage",');
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
         index = str.indexOf('return', index - 40);
-        if (index === -1) {
+        if (index < 0) {
             return false;
         }
 
         str = str.substring(0, index) + 'BxEvent.dispatch(window, BxEvent.XCLOUD_RENDERING_COMPONENT, {component: "product-details"});' + str.substring(index);
         return str;
     },
+
+    detectBrowserRouterReady(str: string) {
+        const text = 'BrowserRouter:()=>';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        let index = str.indexOf('{history:this.history,');
+        if (index < 0) {
+            return false;
+        }
+
+        index = PatcherUtils.lastIndexOf(str, 'return', index, 100);
+        if (index < 0) {
+            return false;
+        }
+
+        str = PatcherUtils.insertAt(str, index, 'window.BxEvent.dispatch(window, window.BxEvent.XCLOUD_ROUTER_HISTORY_READY, {history: this.history});');
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
@@ -825,6 +922,7 @@ let PATCH_ORDERS: PatchArray = [
         'exposeInputSink',
     ] : []),
 
+    'detectBrowserRouterReady',
     'patchRequestInfoCrash',
 
     'disableStreamGate',
@@ -847,6 +945,8 @@ let PATCH_ORDERS: PatchArray = [
 
     getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
     getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
+    getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.TOUCH) && 'ignorePlayWithTouchSection',
+    (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.NATIVE_MKB) || getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.MOST_POPULAR)) && 'ignoreSiglSections',
 
     ...(getPref(PrefKey.BLOCK_TRACKING) ? [
         'disableAiTrack',
@@ -856,7 +956,6 @@ let PATCH_ORDERS: PatchArray = [
         'disableIndexDbLogging',
 
         'disableTelemetryProvider',
-        'disableTrackEvent',
     ] : []),
 
     ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
@@ -892,9 +991,9 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
     getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
 
     ...(STATES.userAgent.capabilities.touch ? [
-        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
-        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
-        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL && 'patchShowSensorControls',
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL && 'exposeTouchLayoutManager',
+        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.OFF || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
         getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
         'patchBabylonRendererClass',
     ] : []),
@@ -978,7 +1077,8 @@ export class Patcher {
             }
 
             const func = item[1][id];
-            let str = func.toString();
+            const funcStr = func.toString();
+            let patchedFuncStr = funcStr;
 
             let modified = false;
 
@@ -993,15 +1093,15 @@ export class Patcher {
                 }
 
                 // Check function against patch
-                const patchedStr = PATCHES[patchName].call(null, str);
+                const tmpStr = PATCHES[patchName].call(null, patchedFuncStr);
 
                 // Not patched
-                if (!patchedStr) {
+                if (!tmpStr) {
                     continue;
                 }
 
                 modified = true;
-                str = patchedStr;
+                patchedFuncStr = tmpStr;
 
                 BxLogger.info(LOG_TAG, `✅ ${patchName}`);
                 appliedPatches.push(patchName);
@@ -1014,7 +1114,13 @@ export class Patcher {
 
             // Apply patched functions
             if (modified) {
-                item[1][id] = eval(str);
+                try {
+                    item[1][id] = eval(patchedFuncStr);
+                } catch (e: unknown) {
+                    if (e instanceof Error) {
+                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message, patchedFuncStr);
+                    }
+                }
             }
 
             // Save to cache

src/modules/patches/expose-stream-session.js

@@ -15,6 +15,10 @@ window.dispatchEvent(new Event(BxEvent.STREAM_SESSION_READY));
 // Patch updateDimensions() to make native touch work correctly with WebGL2
 let updateDimensionsStr = this.updateDimensions.toString();
 
+if (updateDimensionsStr.startsWith('function ')) {
+    updateDimensionsStr = updateDimensionsStr.substring(9);
+}
+
 // if(r){
 const renderTargetVar = updateDimensionsStr.match(/if\((\w+)\){/)[1];
 

src/modules/patches/local-co-op-enable.js

@@ -1,6 +1,10 @@
 let match;
 let onGamepadChangedStr = this.onGamepadChanged.toString();
 
+if (onGamepadChangedStr.startsWith('function ')) {
+    onGamepadChangedStr = onGamepadChangedStr.substring(9);
+}
+
 onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
 eval(`this.onGamepadChanged = function ${onGamepadChangedStr}`);
 

src/modules/player/webgl2-player.ts

@@ -1,7 +1,8 @@
 import vertClarityBoost from "./shaders/clarity_boost.vert" with { type: "text" };
 import fsClarityBoost from "./shaders/clarity_boost.fs" with { type: "text" };
 import { BxLogger } from "@/utils/bx-logger";
-import { getPref, PrefKey } from "@/utils/preferences";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 
 const LOG_TAG = 'WebGL2Player';
@@ -123,7 +124,7 @@ export class WebGL2Player {
     #setupShaders() {
         BxLogger.info(LOG_TAG, 'Setting up', getPref(PrefKey.VIDEO_POWER_PREFERENCE));
 
-        const gl = this.#$canvas.getContext('webgl2', {
+        const gl = this.#$canvas.getContext('webgl', {
             isBx: true,
             antialias: true,
             alpha: false,

src/modules/remote-play.ts

@@ -3,15 +3,16 @@ import { CE, createButton, ButtonStyle } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
-import { getPref, PrefKey, setPref } from "@utils/preferences";
 import { t } from "@utils/translation";
 import { localRedirect } from "@modules/ui/ui";
 import { BxLogger } from "@utils/bx-logger";
 import { HeaderSection } from "./ui/header";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
 
 const LOG_TAG = 'RemotePlay';
 
-enum RemotePlayConsoleState {
+const enum RemotePlayConsoleState {
     ON = 'On',
     OFF = 'Off',
     STANDBY = 'ConnectedStandby',
@@ -53,8 +54,8 @@ export class RemotePlay {
             env: {
                 clientAppId: window.location.host,
                 clientAppType: 'browser',
-                clientAppVersion: '21.1.98',
-                clientSdkVersion: '8.5.3',
+                clientAppVersion: '24.17.36',
+                clientSdkVersion: '10.1.14',
                 httpEnvironment: 'prod',
                 sdkInstallId: '',
             },
@@ -82,7 +83,7 @@ export class RemotePlay {
             },
             browser: {
                 browserName: 'chrome',
-                browserVersion: '119.0',
+                browserVersion: '125.0',
             },
         },
     };

src/modules/shortcuts/shortcut-sound.ts

@@ -1,9 +1,9 @@
 import { t } from "@utils/translation";
 import { STATES } from "@utils/global";
-import { PrefKey, getPref, setPref } from "@utils/preferences";
 import { Toast } from "@utils/toast";
-import { BxEvent } from "@/utils/bx-event";
 import { ceilToNearest, floorToNearest } from "@/utils/utils";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
 
 export class SoundShortcut {
     static adjustGainNodeVolume(amount: number): number {
@@ -27,14 +27,11 @@ export class SoundShortcut {
             newValue = currentValue + amount;
         }
 
-        newValue = setPref(PrefKey.AUDIO_VOLUME, newValue);
+        newValue = setPref(PrefKey.AUDIO_VOLUME, newValue, true);
         SoundShortcut.setGainNodeVolume(newValue);
 
         // Show toast
         Toast.show(`${t('stream')} ❯ ${t('volume')}`, newValue + '%', {instant: true});
-        BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
-                volume: newValue,
-            });
 
         return newValue;
     }
@@ -51,10 +48,7 @@ export class SoundShortcut {
             let targetValue: number;
             if (settingValue === 0) {  // settingValue is 0 => set to 100
                 targetValue = 100;
-                setPref(PrefKey.AUDIO_VOLUME, targetValue);
-                BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
-                        volume: targetValue,
-                    });
+                setPref(PrefKey.AUDIO_VOLUME, targetValue, true);
             } else if (gainValue === 0) {  // is being muted => set to settingValue
                 targetValue = settingValue;
             } else {  // not being muted => mute

src/modules/stream-player.ts

@@ -1,9 +1,10 @@
 import { CE } from "@/utils/html";
 import { WebGL2Player } from "./player/webgl2-player";
-import { getPref, PrefKey } from "@/utils/preferences";
 import { Screenshot } from "@/utils/screenshot";
 import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
 import { STATES } from "@/utils/global";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 export type StreamPlayerOptions = Partial<{
     processing: string,

src/modules/stream/stream-settings-utils.ts

@@ -1,8 +1,9 @@
 import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
 import { STATES } from "@utils/global";
-import { getPref, PrefKey, setPref } from "@utils/preferences";
 import { UserAgent } from "@utils/user-agent";
 import type { StreamPlayerOptions } from "../stream-player";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
 
 export function onChangeVideoPlayerType() {
     const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
@@ -10,16 +11,22 @@ export function onChangeVideoPlayerType() {
     const $videoSharpness = document.getElementById('bx_setting_video_sharpness') as HTMLElement;
     const $videoPowerPreference = document.getElementById('bx_setting_video_power_preference') as HTMLElement;
 
+    if (!$videoProcessing) {
+        return;
+    }
+
     let isDisabled = false;
 
+    const $optCas = $videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement;
+
     if (playerType === StreamPlayerType.WEBGL2) {
-        ($videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement).disabled = false;
+        $optCas && ($optCas.disabled = false);
     } else {
         // Only allow USM when player type is Video
         $videoProcessing.value = StreamVideoProcessing.USM;
         setPref(PrefKey.VIDEO_PROCESSING, StreamVideoProcessing.USM);
 
-        ($videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement).disabled = true;
+        $optCas && ($optCas.disabled = true);
 
         if (UserAgent.isSafari()) {
             isDisabled = true;
@@ -30,7 +37,7 @@ export function onChangeVideoPlayerType() {
     $videoSharpness.dataset.disabled = isDisabled.toString();
 
     // Hide Power Preference setting if renderer isn't WebGL2
-    $videoPowerPreference.closest('.bx-stream-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
+    $videoPowerPreference.closest('.bx-settings-row')!.classList.toggle('bx-gone', playerType !== StreamPlayerType.WEBGL2);
 
     updateVideoPlayer();
 }

src/modules/stream/stream-settings.ts

@@ -1,791 +0,0 @@
-import { BxEvent } from "@utils/bx-event";
-import { BxIcon } from "@utils/bx-icon";
-import { STATES, AppInterface } from "@utils/global";
-import { ButtonStyle, CE, createButton, createSvgIcon } from "@utils/html";
-import { PrefKey, Preferences, getPref, toPrefElement } from "@utils/preferences";
-import { t } from "@utils/translation";
-import { ControllerShortcut } from "../controller-shortcut";
-import { MkbRemapper } from "../mkb/mkb-remapper";
-import { NativeMkbHandler } from "../mkb/native-mkb-handler";
-import { SoundShortcut } from "../shortcuts/shortcut-sound";
-import { TouchController } from "../touch-controller";
-import { VibrationManager } from "../vibration-manager";
-import { StreamStats } from "./stream-stats";
-import { BxSelectElement } from "@/web-components/bx-select";
-import { onChangeVideoPlayerType, updateVideoPlayer } from "./stream-settings-utils";
-import { GamepadKey } from "@/enums/mkb";
-import { EmulatedMkbHandler } from "../mkb/mkb-handler";
-
-enum NavigationDirection {
-    UP = 1,
-    RIGHT,
-    DOWN,
-    LEFT,
-}
-
-enum FocusContainer {
-    OUTSIDE,
-    TABS,
-    SETTINGS,
-}
-
-export class StreamSettings {
-    private static instance: StreamSettings;
-
-    public static getInstance(): StreamSettings {
-        if (!StreamSettings.instance) {
-            StreamSettings.instance = new StreamSettings();
-        }
-
-        return StreamSettings.instance;
-    }
-
-    static readonly MAIN_CLASS = 'bx-stream-settings-dialog';
-
-    private static readonly GAMEPAD_POLLING_INTERVAL = 50;
-    private static readonly GAMEPAD_KEYS = [
-        GamepadKey.UP,
-        GamepadKey.DOWN,
-        GamepadKey.LEFT,
-        GamepadKey.RIGHT,
-        GamepadKey.A,
-        GamepadKey.B,
-        GamepadKey.LB,
-        GamepadKey.RB,
-    ];
-
-    private static readonly GAMEPAD_DIRECTION_MAP = {
-        [GamepadKey.UP]: NavigationDirection.UP,
-        [GamepadKey.DOWN]: NavigationDirection.DOWN,
-        [GamepadKey.LEFT]: NavigationDirection.LEFT,
-        [GamepadKey.RIGHT]: NavigationDirection.RIGHT,
-
-        [GamepadKey.LS_UP]: NavigationDirection.UP,
-        [GamepadKey.LS_DOWN]: NavigationDirection.DOWN,
-        [GamepadKey.LS_LEFT]: NavigationDirection.LEFT,
-        [GamepadKey.LS_RIGHT]: NavigationDirection.RIGHT,
-    };
-
-    private gamepadPollingIntervalId: number | null = null;
-    private gamepadLastButtons: Array<GamepadKey | null> = [];
-
-    private $container: HTMLElement | undefined;
-    private $tabs: HTMLElement | undefined;
-    private $settings: HTMLElement | undefined;
-    private $overlay: HTMLElement | undefined;
-
-    readonly SETTINGS_UI = [{
-        icon: BxIcon.DISPLAY,
-        group: 'stream',
-        items: [{
-            group: 'audio',
-            label: t('audio'),
-            help_url: 'https://better-xcloud.github.io/ingame-features/#audio',
-            items: [{
-                pref: PrefKey.AUDIO_VOLUME,
-                onChange: (e: any, value: number) => {
-                    SoundShortcut.setGainNodeVolume(value);
-                },
-                params: {
-                    disabled: !getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL),
-                },
-                onMounted: ($elm: HTMLElement) => {
-                    const $range = $elm.querySelector('input[type=range') as HTMLInputElement;
-                    window.addEventListener(BxEvent.GAINNODE_VOLUME_CHANGED, e => {
-                        $range.value = (e as any).volume;
-                        BxEvent.dispatch($range, 'input', {
-                            ignoreOnChange: true,
-                        });
-                    });
-                },
-            }],
-        }, {
-            group: 'video',
-            label: t('video'),
-            help_url: 'https://better-xcloud.github.io/ingame-features/#video',
-            items: [{
-                pref: PrefKey.VIDEO_PLAYER_TYPE,
-                onChange: onChangeVideoPlayerType,
-            }, {
-                pref: PrefKey.VIDEO_RATIO,
-                onChange: updateVideoPlayer,
-            }, {
-                pref: PrefKey.VIDEO_PROCESSING,
-                onChange: updateVideoPlayer,
-            }, {
-                pref: PrefKey.VIDEO_POWER_PREFERENCE,
-                onChange: () => {
-                    const streamPlayer = STATES.currentStream.streamPlayer;
-                    if (!streamPlayer) {
-                        return;
-                    }
-
-                    streamPlayer.reloadPlayer();
-                    updateVideoPlayer();
-                },
-            }, {
-                pref: PrefKey.VIDEO_SHARPNESS,
-                onChange: updateVideoPlayer,
-            }, {
-                pref: PrefKey.VIDEO_SATURATION,
-                onChange: updateVideoPlayer,
-            }, {
-                pref: PrefKey.VIDEO_CONTRAST,
-                onChange: updateVideoPlayer,
-            }, {
-                pref: PrefKey.VIDEO_BRIGHTNESS,
-                onChange: updateVideoPlayer,
-            }],
-        }],
-        }, {
-            icon: BxIcon.CONTROLLER,
-            group: 'controller',
-            items: [{
-                group: 'controller',
-                label: t('controller'),
-                help_url: 'https://better-xcloud.github.io/ingame-features/#controller',
-                items: [{
-                    pref: PrefKey.CONTROLLER_ENABLE_VIBRATION,
-                    unsupported: !VibrationManager.supportControllerVibration(),
-                    onChange: () => VibrationManager.updateGlobalVars(),
-                }, {
-                    pref: PrefKey.CONTROLLER_DEVICE_VIBRATION,
-                    unsupported: !VibrationManager.supportDeviceVibration(),
-                    onChange: () => VibrationManager.updateGlobalVars(),
-                }, (VibrationManager.supportControllerVibration() || VibrationManager.supportDeviceVibration()) && {
-                    pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
-                    unsupported: !VibrationManager.supportDeviceVibration(),
-                    onChange: () => VibrationManager.updateGlobalVars(),
-                }],
-            },
-
-            STATES.userAgent.capabilities.touch && {
-                group: 'touch-controller',
-                label: t('touch-controller'),
-                items: [{
-                    label: t('layout'),
-                    content: CE('select', {disabled: true}, CE('option', {}, t('default'))),
-                    onMounted: ($elm: HTMLSelectElement) => {
-                        $elm.addEventListener('change', e => {
-                            TouchController.loadCustomLayout(STATES.currentStream?.xboxTitleId!, $elm.value, 1000);
-                        });
-
-                        window.addEventListener(BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, e => {
-                            const data = (e as any).data;
-
-                            if (STATES.currentStream?.xboxTitleId && ($elm as any).xboxTitleId === STATES.currentStream?.xboxTitleId) {
-                                $elm.dispatchEvent(new Event('change'));
-                                return;
-                            }
-
-                            ($elm as any).xboxTitleId = STATES.currentStream?.xboxTitleId;
-
-                            // Clear options
-                            while ($elm.firstChild) {
-                                $elm.removeChild($elm.firstChild);
-                            }
-
-                            $elm.disabled = !data;
-                            if (!data) {
-                                $elm.appendChild(CE('option', {value: ''}, t('default')));
-                                $elm.value = '';
-                                $elm.dispatchEvent(new Event('change'));
-                                return;
-                            }
-
-                            // Add options
-                            const $fragment = document.createDocumentFragment();
-                            for (const key in data.layouts) {
-                                const layout = data.layouts[key];
-
-                                let name;
-                                if (layout.author) {
-                                    name = `${layout.name} (${layout.author})`;
-                                } else {
-                                    name = layout.name;
-                                }
-
-                                const $option = CE('option', {value: key}, name);
-                                $fragment.appendChild($option);
-                            }
-
-                            $elm.appendChild($fragment);
-                            $elm.value = data.default_layout;
-                            $elm.dispatchEvent(new Event('change'));
-                        });
-                    },
-                }],
-            }],
-        },
-
-        getPref(PrefKey.MKB_ENABLED) && {
-            icon: BxIcon.VIRTUAL_CONTROLLER,
-            group: 'mkb',
-            items: [{
-                group: 'mkb',
-                label: t('virtual-controller'),
-                help_url: 'https://better-xcloud.github.io/mouse-and-keyboard/',
-                content: MkbRemapper.INSTANCE.render(),
-            }],
-        },
-
-        AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' && {
-            icon: BxIcon.NATIVE_MKB,
-            group: 'native-mkb',
-            items: [{
-                group: 'native-mkb',
-                label: t('native-mkb'),
-                items: [{
-                    pref: PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY,
-                    onChange: (e: any, value: number) => {
-                        NativeMkbHandler.getInstance().setVerticalScrollMultiplier(value / 100);
-                    },
-                }, {
-                    pref: PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY,
-                    onChange: (e: any, value: number) => {
-                        NativeMkbHandler.getInstance().setHorizontalScrollMultiplier(value / 100);
-                    },
-                }],
-            }],
-        }, {
-            icon: BxIcon.COMMAND,
-            group: 'shortcuts',
-            items: [{
-                group: 'shortcuts_controller',
-                label: t('controller-shortcuts'),
-                content: ControllerShortcut.renderSettings(),
-            }],
-        }, {
-            icon: BxIcon.STREAM_STATS,
-            group: 'stats',
-            items: [{
-                group: 'stats',
-                label: t('stream-stats'),
-                help_url: 'https://better-xcloud.github.io/stream-stats/',
-                items: [{
-                        pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
-                    }, {
-                        pref: PrefKey.STATS_QUICK_GLANCE,
-                        onChange: (e: InputEvent) => {
-                            const streamStats = StreamStats.getInstance();
-                            (e.target! as HTMLInputElement).checked ? streamStats.quickGlanceSetup() : streamStats.quickGlanceStop();
-                        },
-                    }, {
-                        pref: PrefKey.STATS_ITEMS,
-                        onChange: StreamStats.refreshStyles,
-                    }, {
-                        pref: PrefKey.STATS_POSITION,
-                        onChange: StreamStats.refreshStyles,
-                    }, {
-                        pref: PrefKey.STATS_TEXT_SIZE,
-                        onChange: StreamStats.refreshStyles,
-                    }, {
-                        pref: PrefKey.STATS_OPACITY,
-                        onChange: StreamStats.refreshStyles,
-                    }, {
-                        pref: PrefKey.STATS_TRANSPARENT,
-                        onChange: StreamStats.refreshStyles,
-                    }, {
-                        pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
-                        onChange: StreamStats.refreshStyles,
-                    },
-                ],
-            }],
-        },
-    ];
-
-    constructor() {
-        this.#setupDialog();
-
-        // Hide dialog when the Guide menu is shown
-        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
-    }
-
-    isShowing() {
-        return this.$container && !this.$container.classList.contains('bx-gone');
-    }
-
-    show(tabId?: string) {
-        const $container = this.$container!;
-        // Select tab
-        if (tabId) {
-            const $tab = $container.querySelector(`.bx-stream-settings-tabs svg[data-tab-group=${tabId}]`);
-            $tab && $tab.dispatchEvent(new Event('click'));
-        }
-
-        // Show overlay
-        this.$overlay!.classList.remove('bx-gone');
-        this.$overlay!.dataset.isPlaying = STATES.isPlaying.toString();
-
-        // Show dialog
-        $container.classList.remove('bx-gone');
-        // Lock scroll bar
-        document.body.classList.add('bx-no-scroll');
-
-        // Focus the first visible setting
-        this.#focusDirection(NavigationDirection.DOWN);
-
-        // Add event listeners
-        $container.addEventListener('keydown', this);
-
-        // Start gamepad polling
-        this.#startGamepadPolling();
-
-        // Disable xCloud's navigation polling
-        (window as any).BX_EXPOSED.disableGamepadPolling = true;
-
-        BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_SHOWN);
-
-        // Update video's settings
-        onChangeVideoPlayerType();
-    }
-
-    hide() {
-        // Hide overlay
-        this.$overlay!.classList.add('bx-gone');
-        // Hide dialog
-        this.$container!.classList.add('bx-gone');
-        // Show scroll bar
-        document.body.classList.remove('bx-no-scroll');
-
-        // Remove event listeners
-        this.$container!.removeEventListener('keydown', this);
-
-        // Stop gamepad polling();
-        this.#stopGamepadPolling();
-
-        // Enable xCloud's navigation polling
-        (window as any).BX_EXPOSED.disableGamepadPolling = false;
-
-        BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_DISMISSED);
-    }
-
-    #focusCurrentTab() {
-        const $currentTab = this.$tabs!.querySelector('.bx-active') as HTMLElement;
-        $currentTab && $currentTab.focus();
-    }
-
-    #pollGamepad() {
-        const gamepads = window.navigator.getGamepads();
-
-        let direction: NavigationDirection | null = null;
-        for (const gamepad of gamepads) {
-            if (!gamepad || !gamepad.connected) {
-                continue;
-            }
-
-            // Ignore virtual controller
-            if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
-                continue;
-            }
-
-            const axes = gamepad.axes;
-            const buttons = gamepad.buttons;
-
-            let lastButton = this.gamepadLastButtons[gamepad.index];
-            let pressedButton: GamepadKey | null = null;
-            let holdingButton: GamepadKey | null = null;
-
-            for (const key of StreamSettings.GAMEPAD_KEYS) {
-                if (typeof lastButton === 'number') {
-                    // Key released
-                    if (lastButton === key && !buttons[key].pressed) {
-                        pressedButton = key;
-                        break;
-                    }
-                } else if (buttons[key].pressed) {
-                    // Key pressed
-                    holdingButton = key;
-                    break;
-                }
-            }
-
-            if (holdingButton === null && pressedButton === null && axes && axes.length >= 2) {
-                // Check sticks
-                // LEFT left-right, LEFT up-down
-
-                if (typeof lastButton === 'number') {
-                    const releasedHorizontal = Math.abs(axes[0]) < 0.1 && (lastButton === GamepadKey.LS_LEFT || lastButton === GamepadKey.LS_RIGHT);
-                    const releasedVertical = Math.abs(axes[1]) < 0.1 && (lastButton === GamepadKey.LS_UP || lastButton === GamepadKey.LS_DOWN);
-
-                    if (releasedHorizontal || releasedVertical) {
-                        pressedButton = lastButton;
-                    }
-                } else {
-                    if (axes[0] < -0.5) {
-                        holdingButton = GamepadKey.LS_LEFT;
-                    } else if (axes[0] > 0.5) {
-                        holdingButton = GamepadKey.LS_RIGHT;
-                    } else if (axes[1] < -0.5) {
-                        holdingButton = GamepadKey.LS_UP;
-                    } else if (axes[1] > 0.5) {
-                        holdingButton = GamepadKey.LS_DOWN;
-                    }
-                }
-            }
-
-            if (holdingButton !== null) {
-                this.gamepadLastButtons[gamepad.index] = holdingButton;
-            }
-
-            if (pressedButton === null) {
-                continue;
-            }
-
-            this.gamepadLastButtons[gamepad.index] = null;
-
-            if (pressedButton === GamepadKey.A) {
-                document.activeElement && document.activeElement.dispatchEvent(new MouseEvent('click'));
-                return;
-            } else if (pressedButton === GamepadKey.B) {
-                this.hide();
-                return;
-            } else if (pressedButton === GamepadKey.LB || pressedButton === GamepadKey.RB) {
-                // Focus setting tabs
-                this.#focusCurrentTab();
-                return;
-            }
-
-            direction = StreamSettings.GAMEPAD_DIRECTION_MAP[pressedButton as keyof typeof StreamSettings.GAMEPAD_DIRECTION_MAP];
-            if (direction) {
-                let handled = false;
-                if (document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'range') {
-                    const $range = document.activeElement;
-                    if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
-                        $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
-                        $range.dispatchEvent(new InputEvent('input'));
-                        handled = true;
-                    }
-                }
-
-                if (!handled) {
-                    this.#focusDirection(direction);
-                }
-            }
-
-            return;
-        }
-    }
-
-    #startGamepadPolling() {
-        this.#stopGamepadPolling();
-
-        this.gamepadPollingIntervalId = window.setInterval(this.#pollGamepad.bind(this), StreamSettings.GAMEPAD_POLLING_INTERVAL);
-    }
-
-    #stopGamepadPolling() {
-        this.gamepadLastButtons = [];
-
-        this.gamepadPollingIntervalId && window.clearInterval(this.gamepadPollingIntervalId);
-        this.gamepadPollingIntervalId = null;
-    }
-
-    #handleTabsNavigation($focusing: HTMLElement, direction: NavigationDirection) {
-        if (direction === NavigationDirection.UP || direction === NavigationDirection.DOWN) {
-            let $sibling = $focusing;
-            const siblingProperty = direction === NavigationDirection.UP ? 'previousElementSibling' : 'nextElementSibling';
-
-            while ($sibling[siblingProperty]) {
-                $sibling = $sibling[siblingProperty] as HTMLElement;
-                $sibling && $sibling.focus();
-                return;
-            }
-
-            // If it's the first/last item -> loop around
-            const pseudo = direction === NavigationDirection.UP ? 'last-of-type' : 'first-of-type';
-            const $target = this.$tabs!.querySelector(`svg:not(.bx-gone):${pseudo}`);
-            $target && ($target as HTMLElement).focus();
-        } else if (direction === NavigationDirection.RIGHT) {
-            this.#focusFirstVisibleSetting();
-        }
-    }
-
-    #handleSettingsNavigation($focusing: HTMLElement, direction: NavigationDirection) {
-        // If current element's tabIndex property is not 0
-        if ($focusing.tabIndex !== 0) {
-            // Find first visible setting
-            const $childSetting = $focusing.querySelector('div[data-tab-group]:not(.bx-gone) [tabindex="0"]:not(a)') as HTMLElement;
-            if ($childSetting) {
-                $childSetting.focus();
-                return;
-            }
-        }
-
-        // Current element is setting -> Find the next one
-        // Find parent
-        let $parent = $focusing.closest('[data-focus-container]');
-
-        if (!$parent) {
-            return;
-        }
-
-        // Find sibling setting
-        let $sibling = $parent;
-        if (direction === NavigationDirection.UP || direction === NavigationDirection.DOWN) {
-            const siblingProperty = direction === NavigationDirection.UP ? 'previousElementSibling' : 'nextElementSibling';
-
-            while ($sibling[siblingProperty]) {
-                $sibling = $sibling[siblingProperty];
-                const $childSetting = $sibling.querySelector('[tabindex="0"]:last-of-type') as HTMLElement;
-                if ($childSetting) {
-                    $childSetting.focus();
-                    return;
-                }
-            }
-
-            // If it's the first/last item -> loop around
-            // TODO: bugged if pseudo is "first-of-type" and the first setting is disabled
-            const pseudo = direction === NavigationDirection.UP ? ':last-of-type' : '';
-            const $target = this.$settings!.querySelector(`div[data-tab-group]:not(.bx-gone) div[data-focus-container]${pseudo} [tabindex="0"]:not(:disabled):last-of-type`);
-            $target && ($target as HTMLElement).focus();
-        } else if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
-            // Find all child elements with tabindex
-            const children = Array.from($parent.querySelectorAll('[tabindex="0"]'));
-            const index = children.indexOf($focusing);
-            let nextIndex;
-            if (direction === NavigationDirection.LEFT) {
-                nextIndex = index - 1;
-            } else {
-                nextIndex = index + 1;
-            }
-
-            nextIndex = Math.max(-1, Math.min(nextIndex, children.length - 1));
-            if (nextIndex === -1) {
-                // Focus setting tabs
-                const $tab = this.$tabs!.querySelector('svg.bx-active') as HTMLElement;
-                $tab && $tab.focus();
-            } else if (nextIndex !== index) {
-                (children[nextIndex] as HTMLElement).focus();
-            }
-        }
-    }
-
-    #focusFirstVisibleSetting() {
-        // Focus the first visible tab content
-        const $tab = this.$settings!.querySelector('div[data-tab-group]:not(.bx-gone)') as HTMLElement;
-
-        if ($tab) {
-            // Focus on the first focusable setting
-            const $control = $tab.querySelector('[tabindex="0"]:not(a)') as HTMLElement;
-            if ($control) {
-                $control.focus();
-            } else {
-                // Focus tab
-                $tab.focus();
-            }
-        }
-    }
-
-    #focusDirection(direction: NavigationDirection) {
-        const $tabs = this.$tabs!;
-        const $settings = this.$settings!;
-
-        // Get current focused element
-        let $focusing = document.activeElement as HTMLElement;
-
-        let focusContainer = FocusContainer.OUTSIDE;
-        if ($focusing) {
-            if ($settings.contains($focusing)) {
-                focusContainer = FocusContainer.SETTINGS;
-            } else if ($tabs.contains($focusing)) {
-                focusContainer = FocusContainer.TABS;
-            }
-        }
-
-        // If not focusing any element or the focused element is not inside the dialog
-        if (focusContainer === FocusContainer.OUTSIDE) {
-            this.#focusFirstVisibleSetting();
-            return;
-        } else if (focusContainer === FocusContainer.SETTINGS) {
-            this.#handleSettingsNavigation($focusing, direction);
-        } else if (focusContainer === FocusContainer.TABS) {
-            this.#handleTabsNavigation($focusing, direction);
-        }
-    }
-
-    handleEvent(event: Event) {
-        switch (event.type) {
-            case 'keydown':
-                const $target = event.target as HTMLElement;
-                const keyboardEvent = event as KeyboardEvent;
-                const keyCode = keyboardEvent.code || keyboardEvent.key;
-
-                let handled = false;
-
-                if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
-                    handled = true;
-                    this.#focusDirection(keyCode === 'ArrowUp' ? NavigationDirection.UP : NavigationDirection.DOWN);
-                } else if (keyCode === 'ArrowLeft' || keyCode === 'ArrowRight') {
-                    if (($target as any).type !== 'range') {
-                        handled = true;
-                        this.#focusDirection(keyCode === 'ArrowLeft' ? NavigationDirection.LEFT : NavigationDirection.RIGHT);
-                    }
-                } else if (keyCode === 'Enter' || keyCode === 'Space') {
-                    if ($target instanceof SVGElement) {
-                        handled = true;
-                        $target.dispatchEvent(new Event('click'));
-                    }
-                } else if (keyCode === 'Tab') {
-                    handled = true;
-                    this.#focusCurrentTab();
-                } else if (keyCode === 'Escape') {
-                    handled = true;
-                    this.hide();
-                }
-
-                if (handled) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-
-                break;
-        }
-    }
-
-    #setupDialog() {
-        let $tabs: HTMLElement;
-        let $settings: HTMLElement;
-
-        const $overlay = CE('div', {class: 'bx-stream-settings-overlay bx-gone'});
-        this.$overlay = $overlay;
-
-        const $container = CE('div', {class: StreamSettings.MAIN_CLASS + ' bx-gone'},
-                $tabs = CE('div', {class: 'bx-stream-settings-tabs'}),
-                $settings = CE('div', {
-                    class: 'bx-stream-settings-tab-contents',
-                    tabindex: 10,
-                }),
-            );
-
-        this.$container = $container;
-        this.$tabs = $tabs;
-        this.$settings = $settings;
-
-        // Close dialog when clicking on the overlay
-        $overlay.addEventListener('click', e => {
-            e.preventDefault();
-            e.stopPropagation();
-            this.hide();
-        });
-
-        // Close dialog when not clicking on any child elements in the dialog
-        $container.addEventListener('click', e => {
-            if (e.target === $container) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.hide();
-            }
-        });
-
-        for (const settingTab of this.SETTINGS_UI) {
-            if (!settingTab) {
-                continue;
-            }
-
-            const $svg = createSvgIcon(settingTab.icon);
-            $svg.tabIndex = 0;
-
-            $svg.addEventListener('click', e => {
-                // Switch tab
-                for (const $child of Array.from($settings.children)) {
-                    if ($child.getAttribute('data-tab-group') === settingTab.group) {
-                        $child.classList.remove('bx-gone');
-                    } else {
-                        $child.classList.add('bx-gone');
-                    }
-                }
-
-                // Highlight current tab button
-                for (const $child of Array.from($tabs.children)) {
-                    $child.classList.remove('bx-active');
-                }
-
-                $svg.classList.add('bx-active');
-            });
-
-            $tabs.appendChild($svg);
-
-            const $group = CE('div', {'data-tab-group': settingTab.group, 'class': 'bx-gone'});
-
-            for (const settingGroup of settingTab.items) {
-                if (!settingGroup) {
-                    continue;
-                }
-
-                $group.appendChild(CE('h2', {'data-focus-container': 'true'},
-                        CE('span', {}, settingGroup.label),
-                        settingGroup.help_url && createButton({
-                                icon: BxIcon.QUESTION,
-                                style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
-                                url: settingGroup.help_url,
-                                title: t('help'),
-                                tabIndex: 0,
-                            }),
-                    ));
-                if (settingGroup.note) {
-                    if (typeof settingGroup.note === 'string') {
-                        settingGroup.note = document.createTextNode(settingGroup.note);
-                    }
-                    $group.appendChild(settingGroup.note);
-                }
-
-                if (settingGroup.content) {
-                    $group.appendChild(settingGroup.content);
-                    continue;
-                }
-
-                if (!settingGroup.items) {
-                    settingGroup.items = [];
-                }
-
-                for (const setting of settingGroup.items) {
-                    if (!setting) {
-                        continue;
-                    }
-
-                    const pref = setting.pref;
-
-                    let $control;
-                    if (setting.content) {
-                        $control = setting.content;
-                    } else if (!setting.unsupported) {
-                        $control = toPrefElement(pref, setting.onChange, setting.params);
-
-                        // Replace <select> with controller-friendly one
-                        if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-                            $control = BxSelectElement.wrap($control);
-                        }
-                    }
-
-                    const label = Preferences.SETTINGS[pref as PrefKey]?.label || setting.label;
-                    const note = Preferences.SETTINGS[pref as PrefKey]?.note || setting.note;
-
-                    const $content = CE('div', {
-                        class: 'bx-stream-settings-row',
-                        'data-type': settingGroup.group,
-                        'data-focus-container': 'true',
-                    },
-                        CE('label', {for: `bx_setting_${pref}`},
-                            label,
-                            note && CE('div', {'class': 'bx-stream-settings-dialog-note'}, note),
-                            setting.unsupported && CE('div', {'class': 'bx-stream-settings-dialog-note'}, t('browser-unsupported-feature')),
-                        ),
-                        !setting.unsupported && $control,
-                    );
-
-                    $group.appendChild($content);
-
-                    setting.onMounted && setting.onMounted($control);
-                }
-            }
-
-            $settings.appendChild($group);
-        }
-
-        // Select first tab
-        $tabs.firstElementChild!.dispatchEvent(new Event('click'));
-
-        document.documentElement.appendChild($overlay);
-        document.documentElement.appendChild($container);
-    }
-}

src/modules/stream/stream-stats.ts

@@ -1,8 +1,9 @@
-import { PrefKey, getPref } from "@utils/preferences"
 import { BxEvent } from "@utils/bx-event"
 import { CE } from "@utils/html"
 import { t } from "@utils/translation"
 import { STATES } from "@utils/global"
+import { PrefKey } from "@/enums/pref-keys"
+import { getPref } from "@/utils/settings-storages/global-settings-storage"
 
 export enum StreamStat {
     PING = 'ping',

src/modules/stream/stream-ui.ts

@@ -5,220 +5,274 @@ import { BxEvent } from "@utils/bx-event.ts";
 import { t } from "@utils/translation.ts";
 import { StreamBadges } from "./stream-badges.ts";
 import { StreamStats } from "./stream-stats.ts";
-import { StreamSettings } from "./stream-settings.ts";
+import { SettingsNavigationDialog } from "../ui/dialog/settings-dialog.ts";
 
 
-function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
-    const $container = $orgButton.cloneNode(true) as HTMLElement;
-    let timeout: number | null;
+export class StreamUiHandler {
+    private static $btnStreamSettings: HTMLElement | null | undefined;
+    private static $btnStreamStats: HTMLElement | null | undefined;
+    private static $btnRefresh: HTMLElement | null | undefined;
+    private static $btnHome: HTMLElement | null | undefined;
+    private static observer: MutationObserver | undefined;
 
-    const onTransitionStart = (e: TransitionEvent) => {
-        if (e.propertyName !== 'opacity') {
+    private static cloneStreamHudButton($btnOrg: HTMLElement, label: string, svgIcon: typeof BxIcon): HTMLElement | null {
+        if (!$btnOrg) {
+            return null;
+        }
+
+        const $container = $btnOrg.cloneNode(true) as HTMLElement;
+        let timeout: number | null;
+
+        // Prevent touching other button while the bar is showing/hiding
+        if (STATES.browser.capabilities.touch) {
+            const onTransitionStart = (e: TransitionEvent) => {
+                if (e.propertyName !== 'opacity') {
+                    return;
+                }
+
+                timeout && clearTimeout(timeout);
+                (e.target as HTMLElement).style.pointerEvents = 'none';
+            };
+
+            const onTransitionEnd = (e: TransitionEvent) => {
+                if (e.propertyName !== 'opacity') {
+                    return;
+                }
+
+                const $streamHud = (e.target as HTMLElement).closest('#StreamHud') as HTMLElement;
+                if (!$streamHud) {
+                    return;
+                }
+
+                const left = $streamHud.style.left;
+                if (left === '0px') {
+                    const $target = e.target as HTMLElement;
+                    timeout && clearTimeout(timeout);
+                    timeout = window.setTimeout(() => {
+                        $target.style.pointerEvents = 'auto';
+                    }, 100);
+                }
+            };
+
+            $container.addEventListener('transitionstart', onTransitionStart);
+            $container.addEventListener('transitionend', onTransitionEnd);
+        }
+
+        const $button = $container.querySelector('button') as HTMLElement;
+        if (!$button) {
+            return null;
+        }
+        $button.setAttribute('title', label);
+
+        const $orgSvg = $button.querySelector('svg') as SVGElement;
+        if (!$orgSvg) {
+            return null;
+        }
+
+        const $svg = createSvgIcon(svgIcon);
+        $svg.style.fill = 'none';
+        $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
+        $svg.ariaHidden = 'true';
+
+        $orgSvg.replaceWith($svg);
+        return $container;
+    }
+
+    private static cloneCloseButton($btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any): HTMLElement | null {
+        if (!$btnOrg) {
+            return null;
+        }
+        // Create button from the Close button
+        const $btn = $btnOrg.cloneNode(true) as HTMLElement;
+
+        const $svg = createSvgIcon(icon);
+        // Copy classes
+        $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
+        $svg.style.fill = 'none';
+
+        $btn.classList.add(className);
+        // Remove icon
+        $btn.removeChild($btn.firstElementChild!);
+        // Add icon
+        $btn.appendChild($svg);
+        // Add "click" event listener
+        $btn.addEventListener('click', onChange);
+
+        return $btn;
+    }
+
+    private static async handleStreamMenu() {
+        const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
+        if (!$btnCloseHud) {
             return;
         }
 
-        timeout && clearTimeout(timeout);
-        $container.style.pointerEvents = 'none';
-    };
+        let $btnRefresh = StreamUiHandler.$btnRefresh;
+        let $btnHome = StreamUiHandler.$btnHome;
 
-    const onTransitionEnd = (e: TransitionEvent) => {
-        if (e.propertyName !== 'opacity') {
+        // Create Refresh button from the Close button
+        if (typeof $btnRefresh === 'undefined') {
+            $btnRefresh = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
+                confirm(t('confirm-reload-stream')) && window.location.reload();
+            });
+        }
+
+        if (typeof $btnHome === 'undefined') {
+            $btnHome = StreamUiHandler.cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
+                confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+            });
+        }
+
+        // Add to website
+        if ($btnRefresh && $btnHome) {
+            $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
+            $btnRefresh.insertAdjacentElement('afterend', $btnHome);
+        }
+
+        // Render stream badges
+        const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
+        $menu?.appendChild(await StreamBadges.getInstance().render());
+    }
+
+    private static handleSystemMenu($streamHud: HTMLElement) {
+        // Grip handle
+        const $gripHandle = $streamHud.querySelector('button[class^=GripHandle]') as HTMLElement;
+        if (!$gripHandle) {
             return;
         }
 
-        const left = document.getElementById('StreamHud')?.style.left;
-        if (left === '0px') {
-            timeout && clearTimeout(timeout);
-            timeout = window.setTimeout(() => {
-                    $container.style.pointerEvents = 'auto';
-                }, 100);
+        // Get the last button
+        const $orgButton = $streamHud.querySelector('div[class^=HUDButton]') as HTMLElement;
+        if (!$orgButton) {
+            return;
         }
-    };
 
-    if (STATES.browser.capabilities.touch) {
-        $container.addEventListener('transitionstart', onTransitionStart);
-        $container.addEventListener('transitionend', onTransitionEnd);
-    }
-
-    const $button = $container.querySelector('button')!;
-    $button.setAttribute('title', label);
-
-    const $orgSvg = $button.querySelector('svg')!;
-    const $svg = createSvgIcon(svgIcon);
-    $svg.style.fill = 'none';
-    $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
-    $svg.ariaHidden = 'true';
-
-    $orgSvg.replaceWith($svg);
-    return $container;
-}
-
-
-function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any) {
-    // Create button from the Close button
-    const $btn = $$btnOrg.cloneNode(true) as HTMLElement;
-
-    // Refresh SVG
-    const $svg = createSvgIcon(icon);
-    // Copy classes
-    $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
-    $svg.style.fill = 'none';
-
-    $btn.classList.add(className);
-    // Remove icon
-    $btn.removeChild($btn.firstElementChild!);
-    // Add icon
-    $btn.appendChild($svg);
-    // Add "click" event listener
-    $btn.addEventListener('click', onChange);
-
-    return $btn;
-}
-
-
-export function injectStreamMenuButtons() {
-    const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
-    if (!$screen) {
-        return;
-    }
-
-    if (($screen as any).xObserving) {
-        return;
-    }
-
-    ($screen as any).xObserving = true;
-
-    let $btnStreamSettings: HTMLElement;
-    let $btnStreamStats: HTMLElement;
-    const streamStats = StreamStats.getInstance();
-
-    const observer = new MutationObserver(mutationList => {
-        mutationList.forEach(item => {
-            if (item.type !== 'childList') {
+        const hideGripHandle = () => {
+            if (!$gripHandle) {
                 return;
             }
 
-            item.addedNodes.forEach(async $node => {
-                if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
-                    return;
-                }
+            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
+            $gripHandle.click();
+            $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
+            $gripHandle.click();
+        }
 
-                let $elm: HTMLElement | null = $node as HTMLElement;
+        // Create Stream Settings button
+        let $btnStreamSettings = StreamUiHandler.$btnStreamSettings;
+        if (typeof $btnStreamSettings === 'undefined') {
+            $btnStreamSettings = StreamUiHandler.cloneStreamHudButton($orgButton, t('better-xcloud'), BxIcon.BETTER_XCLOUD);
+            $btnStreamSettings?.addEventListener('click', e => {
+                hideGripHandle();
+                e.preventDefault();
 
-                // Ignore SVG elements
-                if ($elm instanceof SVGSVGElement) {
-                    return;
-                }
+                // Show Stream Settings dialog
+                SettingsNavigationDialog.getInstance().show();
+            });
 
-                // Error Page: .PureErrorPage.ErrorScreen
-                if ($elm.className?.includes('PureErrorPage')) {
-                    BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
-                    return;
-                }
+            StreamUiHandler.$btnStreamSettings = $btnStreamSettings;
+        }
 
-                // Render badges
-                if ($elm.className?.startsWith('StreamMenu-module__container')) {
-                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
-                    if (!$btnCloseHud) {
-                        return;
-                    }
+        // Create Stream Stats button
+        const streamStats = StreamStats.getInstance();
+        let $btnStreamStats = StreamUiHandler.$btnStreamStats;
+        if (typeof $btnStreamStats === 'undefined') {
+            $btnStreamStats = StreamUiHandler.cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
+            $btnStreamStats?.addEventListener('click', e => {
+                hideGripHandle();
+                e.preventDefault();
 
-                    // Hide Stream Settings dialog when closing HUD
-                    $btnCloseHud.addEventListener('click', e => {
-                        StreamSettings.getInstance().hide();
-                    });
-
-                    // Create Refresh button from the Close button
-                    const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
-                        confirm(t('confirm-reload-stream')) && window.location.reload();
-                    });
-
-                    const $btnHome = cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
-                        confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
-                    });
-
-                    // Add to website
-                    $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
-                    $btnRefresh.insertAdjacentElement('afterend', $btnHome);
-
-                    // Render stream badges
-                    const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
-                    $menu?.appendChild(await StreamBadges.getInstance().render());
-
-                    return;
-                }
-
-                if ($elm.className?.startsWith('Overlay-module_') || $elm.className?.startsWith('InProgressScreen')) {
-                    $elm = $elm.querySelector('#StreamHud');
-                }
-
-                if (!$elm || ($elm.id || '') !== 'StreamHud') {
-                    return;
-                }
-
-                // Grip handle
-                const $gripHandle = $elm.querySelector('button[class^=GripHandle]') as HTMLElement;
-
-                const hideGripHandle = () => {
-                    if (!$gripHandle) {
-                        return;
-                    }
-
-                    $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                    $gripHandle.click();
-                    $gripHandle.dispatchEvent(new PointerEvent('pointerdown'));
-                    $gripHandle.click();
-                }
-
-                // Get the second last button
-                const $orgButton = $elm.querySelector('div[class^=HUDButton]') as HTMLElement;
-                if (!$orgButton) {
-                    return;
-                }
-
-                // Create Stream Settings button
-                if (!$btnStreamSettings) {
-                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('stream-settings'), BxIcon.STREAM_SETTINGS);
-                    $btnStreamSettings.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Show Stream Settings dialog
-                        StreamSettings.getInstance().show();
-                    });
-                }
-
-                // Create Stream Stats button
-                if (!$btnStreamStats) {
-                    $btnStreamStats = cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
-                    $btnStreamStats.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Toggle Stream Stats
-                        streamStats.toggle();
-
-                        const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                        $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
-                    });
-                }
+                // Toggle Stream Stats
+                streamStats.toggle();
 
                 const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
-                $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+                $btnStreamStats!.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+            });
 
-                if ($orgButton) {
-                    const $btnParent = $orgButton.parentElement!;
+            StreamUiHandler.$btnStreamStats = $btnStreamStats;
+        }
 
-                    // Insert buttons after Stream Settings button
-                    $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
-                    $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
+        const $btnParent = $orgButton.parentElement!;
 
-                    // Move the Dots button to the beginning
-                    const $dotsButton = $btnParent.lastElementChild!;
-                    $dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
+        if ($btnStreamSettings && $btnStreamStats) {
+            const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
+            $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
+
+            // Insert buttons after Stream Settings button
+            $btnParent.insertBefore($btnStreamStats, $btnParent.lastElementChild);
+            $btnParent.insertBefore($btnStreamSettings, $btnStreamStats);
+        }
+
+        // Move the Dots button to the beginning
+        const $dotsButton = $btnParent.lastElementChild!;
+        $dotsButton.parentElement!.insertBefore($dotsButton, $dotsButton.parentElement!.firstElementChild);
+    }
+
+    static reset() {
+        StreamUiHandler.$btnStreamSettings = undefined;
+        StreamUiHandler.$btnStreamStats = undefined;
+        StreamUiHandler.$btnRefresh = undefined;
+        StreamUiHandler.$btnHome = undefined;
+
+        StreamUiHandler.observer && StreamUiHandler.observer.disconnect();
+        StreamUiHandler.observer = undefined;
+    }
+
+    static observe() {
+        StreamUiHandler.reset();
+
+        const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
+        if (!$screen) {
+            return;
+        }
+
+        const observer = new MutationObserver(mutationList => {
+            mutationList.forEach(item => {
+                if (item.type !== 'childList') {
+                    return;
                 }
+
+                item.addedNodes.forEach(async $node => {
+                    if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
+                        return;
+                    }
+
+                    let $elm: HTMLElement | null = $node as HTMLElement;
+
+                    // Ignore non-HTML elements
+                    if (!($elm instanceof HTMLElement)) {
+                        return;
+                    }
+
+                    const className = $elm.className || '';
+
+                    // Error Page: .PureErrorPage.ErrorScreen
+                    if (className.includes('PureErrorPage')) {
+                        BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
+                        return;
+                    }
+
+                    // Render badges
+                    if (className.startsWith('StreamMenu-module__container')) {
+                        StreamUiHandler.handleStreamMenu();
+                        return;
+                    }
+
+                    if (className.startsWith('Overlay-module_') || className.startsWith('InProgressScreen')) {
+                        $elm = $elm.querySelector('#StreamHud');
+                    }
+
+                    if (!$elm || ($elm.id || '') !== 'StreamHud') {
+                        return;
+                    }
+
+                    // Handle System Menu bar
+                    StreamUiHandler.handleSystemMenu($elm);
+                });
             });
         });
-    });
-    observer.observe($screen, {subtree: true, childList: true});
+
+        observer.observe($screen, {subtree: true, childList: true});
+        StreamUiHandler.observer = observer;
+    }
 }

src/modules/touch-controller.ts

@@ -1,14 +1,27 @@
-import { STATES } from "@utils/global";
 import { escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
-import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
-import { getPref, PrefKey } from "@utils/preferences";
+import { NATIVE_FETCH } from "@utils/bx-flags";
 import { t } from "@utils/translation";
 import { BxLogger } from "@utils/bx-logger";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 const LOG_TAG = 'TouchController';
 
+type TouchControlLayout = {
+    name: string,
+    author: string,
+    content: any,
+};
+
+type TouchControlDefinition = {
+    name: string,
+    product_id: string,
+    default_layout: string,
+    layouts: Record<string, TouchControlLayout>,
+};
+
 export class TouchController {
     static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
             data: JSON.stringify({
@@ -28,25 +41,40 @@ export class TouchController {
 
     static #$style: HTMLStyleElement;
 
-    static #enable = false;
+    static #enabled = false;
     static #dataChannel: RTCDataChannel | null;
 
-    static #customLayouts: {[index: string]: any} = {};
-    static #baseCustomLayouts: {[index: string]: any} = {};
+    static #customLayouts: Record<string, TouchControlDefinition | null> = {};
+    static #baseCustomLayouts: Record<string, Record<string, TouchControlLayout>> = {};
     static #currentLayoutId: string;
 
     static #customList: string[];
 
+    static #xboxTitleId: string | null = null;
+
+    static setXboxTitleId(xboxTitleId: string) {
+        TouchController.#xboxTitleId = xboxTitleId;
+    }
+
+    static getCustomLayouts() {
+        const xboxTitleId = TouchController.#xboxTitleId;
+        if (!xboxTitleId) {
+            return null;
+        }
+
+        return TouchController.#customLayouts[xboxTitleId];
+    }
+
     static enable() {
-        TouchController.#enable = true;
+        TouchController.#enabled = true;
     }
 
     static disable() {
-        TouchController.#enable = false;
+        TouchController.#enabled = false;
     }
 
     static isEnabled() {
-        return TouchController.#enable;
+        return TouchController.#enabled;
     }
 
     static #showDefault() {
@@ -70,8 +98,9 @@ export class TouchController {
     }
 
     static reset() {
-        TouchController.#enable = false;
+        TouchController.#enabled = false;
         TouchController.#dataChannel = null;
+        TouchController.#xboxTitleId = null;
 
         TouchController.#$style && (TouchController.#$style.textContent = '');
     }
@@ -83,12 +112,18 @@ export class TouchController {
     }
 
     static #dispatchLayouts(data: any) {
-        BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, {
-            data: data,
-        });
+        // Load default layout
+        TouchController.applyCustomLayout(null, 1000);
+
+        BxEvent.dispatch(window, BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED);
     };
 
-    static async getCustomLayouts(xboxTitleId: string, retries: number=1) {
+    static async requestCustomLayouts(retries: number=1) {
+        const xboxTitleId = TouchController.#xboxTitleId;
+        if (!xboxTitleId) {
+            return;
+        }
+
         if (xboxTitleId in TouchController.#customLayouts) {
             TouchController.#dispatchLayouts(TouchController.#customLayouts[xboxTitleId]);
             return;
@@ -102,7 +137,7 @@ export class TouchController {
             return;
         }
 
-        const baseUrl = `https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts${BX_FLAGS.UseDevTouchLayout ? '/dev' : ''}`;
+        const baseUrl = 'https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts';
         const url = `${baseUrl}/${xboxTitleId}.json`;
 
         // Get layout info
@@ -137,17 +172,17 @@ export class TouchController {
             window.setTimeout(() => TouchController.#dispatchLayouts(json), 1000);
         } catch (e) {
             // Retry
-            TouchController.getCustomLayouts(xboxTitleId, retries + 1);
+            TouchController.requestCustomLayouts(retries + 1);
         }
     }
 
-    static loadCustomLayout(xboxTitleId: string, layoutId: string, delay: number=0) {
+    static applyCustomLayout(layoutId: string | null, delay: number=0) {
         // TODO: fix this
         if (!window.BX_EXPOSED.touchLayoutManager) {
             const listener = (e: Event) => {
                 window.removeEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
-                if (TouchController.#enable) {
-                    TouchController.loadCustomLayout(xboxTitleId, layoutId, 0);
+                if (TouchController.#enabled) {
+                    TouchController.applyCustomLayout(layoutId, 0);
                 }
             };
             window.addEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
@@ -155,13 +190,30 @@ export class TouchController {
             return;
         }
 
+        const xboxTitleId = TouchController.#xboxTitleId;
+        if (!xboxTitleId) {
+            BxLogger.error(LOG_TAG, 'Invalid xboxTitleId');
+            return;
+        }
+
+        if (!layoutId) {
+            // Get default layout ID from definition
+            layoutId = TouchController.#customLayouts[xboxTitleId]?.default_layout || null;
+        }
+
+        if (!layoutId) {
+            BxLogger.error(LOG_TAG, 'Invalid layoutId, show default controller');
+            TouchController.#enabled && TouchController.#showDefault();
+            return;
+        }
+
         const layoutChanged = TouchController.#currentLayoutId !== layoutId;
         TouchController.#currentLayoutId = layoutId;
 
         // Get layout data
         const layoutData = TouchController.#customLayouts[xboxTitleId];
         if (!xboxTitleId || !layoutId || !layoutData) {
-            TouchController.#enable && TouchController.#showDefault();
+            TouchController.#enabled && TouchController.#showDefault();
             return;
         }
 
@@ -223,7 +275,7 @@ export class TouchController {
 
             touchLayoutManager && touchLayoutManager.changeLayoutForScope({
                 type: 'showLayout',
-                scope: '' + STATES.currentStream?.xboxTitleId,
+                scope: '' + TouchController.#xboxTitleId,
                 subscope: 'base',
                 layout: {
                     id: 'System.Standard',
@@ -249,7 +301,7 @@ export class TouchController {
 
             // Apply touch controller's style
             let filter = '';
-            if (TouchController.#enable) {
+            if (TouchController.#enabled) {
                 if (PREF_STYLE_STANDARD === 'white') {
                     filter = 'grayscale(1) brightness(2)';
                 } else if (PREF_STYLE_STANDARD === 'muted') {
@@ -280,9 +332,9 @@ export class TouchController {
 
                 // Dispatch a message to display generic touch controller
                 if (msg.data.includes('touchcontrols/showtitledefault')) {
-                    if (TouchController.#enable) {
+                    if (TouchController.#enabled) {
                         if (focused) {
-                            TouchController.getCustomLayouts(STATES.currentStream?.xboxTitleId!);
+                            TouchController.requestCustomLayouts();
                         } else {
                             TouchController.#showDefault();
                         }
@@ -300,7 +352,7 @@ export class TouchController {
                             TouchController.#show();
                         }
 
-                        STATES.currentStream.xboxTitleId = parseInt(json.titleid, 16).toString();
+                        TouchController.setXboxTitleId(parseInt(json.titleid, 16).toString());
                     }
                 } catch (e) {
                     BxLogger.error(LOG_TAG, 'Load custom layout', e);

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

@@ -0,0 +1,605 @@
+import { GamepadKey } from "@/enums/mkb";
+import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
+import { BxEvent } from "@/utils/bx-event";
+import { STATES } from "@/utils/global";
+import { CE, isElementVisible } from "@/utils/html";
+import { setNearby } from "@/utils/navigation-utils";
+
+export enum NavigationDirection {
+    UP = 1,
+    RIGHT,
+    DOWN,
+    LEFT,
+}
+
+export type NavigationNearbyElements = Partial<{
+    orientation: 'horizontal' | 'vertical',
+    selfOrientation: 'horizontal' | 'vertical',
+
+    focus: NavigationElement | (() => boolean),
+    loop: ((direction: NavigationDirection) => boolean),
+    [NavigationDirection.UP]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.DOWN]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.LEFT]: NavigationElement | (() => void) | 'previous' | 'next',
+    [NavigationDirection.RIGHT]: NavigationElement | (() => void) | 'previous' | 'next',
+}>;
+
+export interface NavigationElement extends HTMLElement {
+    nearby?: NavigationNearbyElements;
+}
+
+
+export abstract class NavigationDialog {
+    abstract getDialog(): NavigationDialog;
+    abstract getContent(): HTMLElement;
+
+    abstract focusIfNeeded(): void;
+
+    abstract $container: HTMLElement;
+    dialogManager: NavigationDialogManager;
+
+    constructor() {
+        this.dialogManager = NavigationDialogManager.getInstance();
+    }
+
+    show() {
+        NavigationDialogManager.getInstance().show(this);
+
+        const $currentFocus = this.getFocusedElement();
+        // If not focusing on any element
+        if (!$currentFocus) {
+            this.focusIfNeeded();
+        }
+    }
+
+    hide() {
+        NavigationDialogManager.getInstance().hide();
+    }
+
+    getFocusedElement() {
+        const $activeElement = document.activeElement as HTMLElement;
+        if (!$activeElement) {
+            return null;
+        }
+
+        // Check if focused element is a child of dialog
+        if (this.$container.contains($activeElement)) {
+            return $activeElement;
+        }
+
+        return null;
+    }
+
+    onBeforeMount(): void {}
+    onMounted(): void {}
+    onBeforeUnmount(): void {}
+    onUnmounted(): void {}
+
+    handleKeyPress(key: string): boolean {
+        return false;
+    }
+
+    handleGamepad(button: GamepadKey): boolean {
+        return true;
+    }
+}
+
+export class NavigationDialogManager {
+    private static instance: NavigationDialogManager;
+    public static getInstance(): NavigationDialogManager {
+        if (!NavigationDialogManager.instance) {
+            NavigationDialogManager.instance = new NavigationDialogManager();
+        }
+        return NavigationDialogManager.instance;
+    }
+
+    private static readonly GAMEPAD_POLLING_INTERVAL = 50;
+    private static readonly GAMEPAD_KEYS = [
+        GamepadKey.UP,
+        GamepadKey.DOWN,
+        GamepadKey.LEFT,
+        GamepadKey.RIGHT,
+        GamepadKey.A,
+        GamepadKey.B,
+        GamepadKey.LB,
+        GamepadKey.RB,
+        GamepadKey.LT,
+        GamepadKey.RT,
+    ];
+
+    private static readonly GAMEPAD_DIRECTION_MAP = {
+        [GamepadKey.UP]: NavigationDirection.UP,
+        [GamepadKey.DOWN]: NavigationDirection.DOWN,
+        [GamepadKey.LEFT]: NavigationDirection.LEFT,
+        [GamepadKey.RIGHT]: NavigationDirection.RIGHT,
+
+        [GamepadKey.LS_UP]: NavigationDirection.UP,
+        [GamepadKey.LS_DOWN]: NavigationDirection.DOWN,
+        [GamepadKey.LS_LEFT]: NavigationDirection.LEFT,
+        [GamepadKey.LS_RIGHT]: NavigationDirection.RIGHT,
+    };
+
+    private static readonly SIBLING_PROPERTY_MAP = {
+        'horizontal': {
+            [NavigationDirection.LEFT]: 'previousElementSibling',
+            [NavigationDirection.RIGHT]: 'nextElementSibling',
+        },
+
+        'vertical': {
+            [NavigationDirection.UP]: 'previousElementSibling',
+            [NavigationDirection.DOWN]: 'nextElementSibling',
+        },
+    };
+
+    private gamepadPollingIntervalId: number | null = null;
+    private gamepadLastStates: Array<[number, GamepadKey, boolean] | null> = [];
+    private gamepadHoldingIntervalId: number | null = null;
+
+    private $overlay: HTMLElement;
+    private $container: HTMLElement;
+    private dialog: NavigationDialog | null = null;
+
+    constructor() {
+        this.$overlay = CE('div', {class: 'bx-navigation-dialog-overlay bx-gone'});
+        this.$overlay.addEventListener('click', e => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.hide();
+        });
+
+        document.documentElement.appendChild(this.$overlay);
+
+        this.$container = CE('div', {class: 'bx-navigation-dialog bx-gone'});
+        document.documentElement.appendChild(this.$container);
+
+        // Hide dialog when the Guide menu is shown
+        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
+    }
+
+    handleEvent(event: Event) {
+        switch (event.type) {
+            case 'keydown':
+                const $target = event.target as HTMLElement;
+                const keyboardEvent = event as KeyboardEvent;
+                const keyCode = keyboardEvent.code || keyboardEvent.key;
+
+                let handled = this.dialog?.handleKeyPress(keyCode);
+                if (handled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return;
+                }
+
+                if (keyCode === 'ArrowUp' || keyCode === 'ArrowDown') {
+                    handled = true;
+                    this.focusDirection(keyCode === 'ArrowUp' ? NavigationDirection.UP : NavigationDirection.DOWN);
+                } else if (keyCode === 'ArrowLeft' || keyCode === 'ArrowRight') {
+                    if (!($target instanceof HTMLInputElement && ($target.type === 'text' || $target.type === 'range'))) {
+                        handled = true;
+                        this.focusDirection(keyCode === 'ArrowLeft' ? NavigationDirection.LEFT : NavigationDirection.RIGHT);
+                    }
+                } else if (keyCode === 'Enter' || keyCode === 'NumpadEnter' || keyCode === 'Space') {
+                    if (!($target instanceof HTMLInputElement && $target.type === 'text')) {
+                        handled = true;
+                        $target.dispatchEvent(new MouseEvent('click'));
+                    }
+                } else if (keyCode === 'Escape') {
+                    handled = true;
+                    this.hide();
+                }
+
+                if (handled) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+
+                break;
+        }
+    }
+
+    isShowing() {
+        return this.$container && !this.$container.classList.contains('bx-gone');
+    }
+
+    private pollGamepad() {
+        const gamepads = window.navigator.getGamepads();
+
+        for (const gamepad of gamepads) {
+            if (!gamepad || !gamepad.connected) {
+                continue;
+            }
+
+            // Ignore virtual controller
+            if (gamepad.id === EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID) {
+                continue;
+            }
+
+            const axes = gamepad.axes;
+            const buttons = gamepad.buttons;
+
+            let releasedButton: GamepadKey | null = null;
+            let heldButton: GamepadKey | null = null;
+
+            let lastState = this.gamepadLastStates[gamepad.index];
+            let lastTimestamp;
+            let lastKey;
+            let lastKeyPressed;
+            if (lastState) {
+                [lastTimestamp, lastKey, lastKeyPressed] = lastState;
+            }
+
+            if (lastTimestamp && lastTimestamp === gamepad.timestamp) {
+                continue;
+            }
+
+            for (const key of NavigationDialogManager.GAMEPAD_KEYS) {
+                // Key released
+                if (lastKey === key && !buttons[key].pressed) {
+                    releasedButton = key;
+                    break;
+                } else if (buttons[key].pressed) {
+                    // Key pressed
+                    heldButton = key;
+                    break;
+                }
+            }
+
+            // If not pressing any key => check analog sticks
+            if (heldButton === null && releasedButton === null && axes && axes.length >= 2) {
+                // [LEFT left-right, LEFT up-down]
+                if (lastKey) {
+                    const releasedHorizontal = Math.abs(axes[0]) < 0.1 && (lastKey === GamepadKey.LS_LEFT || lastKey === GamepadKey.LS_RIGHT);
+                    const releasedVertical = Math.abs(axes[1]) < 0.1 && (lastKey === GamepadKey.LS_UP || lastKey === GamepadKey.LS_DOWN);
+
+                    if (releasedHorizontal || releasedVertical) {
+                        releasedButton = lastKey;
+                    } else {
+                        heldButton = lastKey;
+                    }
+                } else {
+                    if (axes[0] < -0.5) {
+                        heldButton = GamepadKey.LS_LEFT;
+                    } else if (axes[0] > 0.5) {
+                        heldButton = GamepadKey.LS_RIGHT;
+                    } else if (axes[1] < -0.5) {
+                        heldButton = GamepadKey.LS_UP;
+                    } else if (axes[1] > 0.5) {
+                        heldButton = GamepadKey.LS_DOWN;
+                    }
+                }
+            }
+
+            // Save state if holding a button
+            if (heldButton !== null) {
+                this.gamepadLastStates[gamepad.index] = [gamepad.timestamp, heldButton, false];
+
+                this.clearGamepadHoldingInterval();
+
+                // Only set turbo for d-pad and stick
+                if (NavigationDialogManager.GAMEPAD_DIRECTION_MAP[heldButton as keyof typeof NavigationDialogManager.GAMEPAD_DIRECTION_MAP]) {
+                    this.gamepadHoldingIntervalId = window.setInterval(() => {
+                        const lastState = this.gamepadLastStates[gamepad.index];
+                        // Avoid pressing the incorrect key
+                        if (lastState) {
+                            [lastTimestamp, lastKey, lastKeyPressed] = lastState;
+                            if (lastKey === heldButton) {
+                                this.handleGamepad(gamepad, heldButton);
+                                return;
+                            }
+                        }
+
+                        this.clearGamepadHoldingInterval();
+                    }, 200);
+                }
+                continue;
+            }
+
+            // Continue if the button hasn't been released
+            if (releasedButton === null) {
+                this.clearGamepadHoldingInterval();
+                continue;
+            }
+
+            // Button released
+            this.gamepadLastStates[gamepad.index] = null;
+
+            if (lastKeyPressed) {
+                return;
+            }
+
+            if (releasedButton === GamepadKey.A) {
+                document.activeElement && document.activeElement.dispatchEvent(new MouseEvent('click'));
+                return;
+            } else if (releasedButton === GamepadKey.B) {
+                this.hide();
+                return;
+            }
+
+            if (this.handleGamepad(gamepad, releasedButton)) {
+                return;
+            }
+        }
+    }
+
+    private handleGamepad(gamepad: Gamepad, key: GamepadKey): boolean {
+        let handled = this.dialog?.handleGamepad(key);
+        if (handled) {
+            return true;
+        }
+
+        // Handle d-pad & sticks
+        let direction = NavigationDialogManager.GAMEPAD_DIRECTION_MAP[key as keyof typeof NavigationDialogManager.GAMEPAD_DIRECTION_MAP];
+        if (!direction) {
+            return false;
+        }
+
+        if (document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'range') {
+            const $range = document.activeElement;
+            if (direction === NavigationDirection.LEFT || direction === NavigationDirection.RIGHT) {
+                $range.value = (parseInt($range.value) + parseInt($range.step) * (direction === NavigationDirection.LEFT ? -1 : 1)).toString();
+                $range.dispatchEvent(new InputEvent('input'));
+                handled = true;
+            }
+        }
+
+        if (!handled) {
+            this.focusDirection(direction);
+        }
+
+        this.gamepadLastStates[gamepad.index] && (this.gamepadLastStates[gamepad.index]![2] = true);
+        return true;
+    }
+
+    private clearGamepadHoldingInterval() {
+        this.gamepadHoldingIntervalId && window.clearInterval(this.gamepadHoldingIntervalId);
+        this.gamepadHoldingIntervalId = null;
+    }
+
+    show(dialog: NavigationDialog) {
+        this.clearGamepadHoldingInterval();
+
+        BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_SHOWN);
+
+        // Stop xCloud's navigation polling
+        (window as any).BX_EXPOSED.disableGamepadPolling = true;
+
+        // Lock scroll bar
+        document.body.classList.add('bx-no-scroll');
+
+        // Show overlay
+        this.$overlay.classList.remove('bx-gone');
+        if (STATES.isPlaying) {
+            this.$overlay.classList.add('bx-invisible');
+        }
+
+        // Unmount current dialog
+        this.unmountCurrentDialog();
+
+        // Setup new dialog
+        this.dialog = dialog;
+        dialog.onBeforeMount();
+        this.$container.appendChild(dialog.getContent());
+        dialog.onMounted();
+
+        // Show content
+        this.$container.classList.remove('bx-gone');
+
+        // Add event listeners
+        this.$container.addEventListener('keydown', this);
+
+        // Start gamepad polling
+        this.startGamepadPolling();
+    }
+
+    hide() {
+        this.clearGamepadHoldingInterval();
+
+        // Unlock scroll bar
+        document.body.classList.remove('bx-no-scroll');
+
+        BxEvent.dispatch(window, BxEvent.XCLOUD_DIALOG_DISMISSED);
+
+        // Hide content
+        this.$overlay.classList.add('bx-gone');
+        this.$overlay.classList.remove('bx-invisible');
+        this.$container.classList.add('bx-gone');
+
+        // Remove event listeners
+        this.$container.removeEventListener('keydown', this);
+
+        // Stop gamepad polling
+        this.stopGamepadPolling();
+
+        // Unmount dialog
+        this.unmountCurrentDialog();
+
+        // Enable xCloud's navigation polling
+        (window as any).BX_EXPOSED.disableGamepadPolling = false;
+    }
+
+    focus($elm: NavigationElement | null): boolean {
+        if (!$elm) {
+            return false;
+        }
+
+        // console.log('focus', $elm);
+
+        if ($elm.nearby && $elm.nearby.focus) {
+            if ($elm.nearby.focus instanceof HTMLElement) {
+                return this.focus($elm.nearby.focus);
+            } else {
+                return $elm.nearby.focus();
+            }
+        }
+
+        $elm.focus();
+        return $elm === document.activeElement;
+    }
+
+    private getOrientation($elm: NavigationElement): NavigationNearbyElements['orientation'] {
+        const nearby = $elm.nearby || {};
+        if (nearby.selfOrientation) {
+            return nearby.selfOrientation;
+        }
+
+        let orientation;
+
+        let $current = $elm.parentElement! as NavigationElement;
+        while ($current !== this.$container) {
+            const tmp = $current.nearby?.orientation;
+            if ($current.nearby && tmp) {
+                orientation = tmp;
+                break;
+            }
+
+            $current = $current.parentElement!;
+        }
+
+        orientation = orientation || 'vertical';
+        setNearby($elm, {
+            selfOrientation: orientation,
+        });
+
+        return orientation;
+    }
+
+    findNextTarget($focusing: HTMLElement | null, direction: NavigationDirection, checkParent = false, checked: Array<HTMLElement> = []): HTMLElement | null {
+        if (!$focusing || $focusing === this.$container) {
+            return null;
+        }
+
+        if (checked.includes($focusing)) {
+            return null;
+        }
+
+        checked.push($focusing);
+
+        let $target: HTMLElement = $focusing;
+        const $parent = $target.parentElement;
+
+        const nearby = ($target as NavigationElement).nearby || {};
+        const orientation = this.getOrientation($target)!;
+
+        // @ts-ignore
+        let siblingProperty = (NavigationDialogManager.SIBLING_PROPERTY_MAP[orientation])[direction];
+        if (siblingProperty) {
+            let $sibling = $target as any;
+            while ($sibling[siblingProperty]) {
+                $sibling = $sibling[siblingProperty] as HTMLElement;
+
+                const $focusable = this.findFocusableElement($sibling, direction);
+                if ($focusable) {
+                    return $focusable;
+                }
+            }
+        }
+
+        if (nearby.loop) {
+            // Loop
+            if (nearby.loop(direction)) {
+                return null;
+            }
+        }
+
+        if (checkParent) {
+            return this.findNextTarget($parent, direction, checkParent, checked);
+        }
+
+        return null;
+    }
+
+    findFocusableElement($elm: HTMLElement | null, direction?: NavigationDirection): HTMLElement | null {
+        if (!$elm) {
+            return null;
+        }
+
+        // Ignore disabled element
+        const isDisabled = !!($elm as any).disabled;
+        if (isDisabled) {
+            return null;
+        }
+
+        // Ignore hidden element
+        if (!isElementVisible($elm)) {
+            return null;
+        }
+
+        // Accept element with tabIndex
+        if ($elm.tabIndex > -1) {
+            return $elm;
+        }
+
+        const focus = ($elm as NavigationElement).nearby?.focus;
+        if (focus) {
+            if (focus instanceof HTMLElement) {
+                return this.findFocusableElement(focus, direction);
+            } else if (typeof focus === 'function') {
+                if (focus()) {
+                    return document.activeElement as HTMLElement;
+                }
+            }
+        }
+
+        // Look for child focusable elemnet
+        const children = Array.from($elm.children);
+
+        // Search from right to left if the orientation is horizontal
+        const orientation = ($elm as NavigationElement).nearby?.orientation || 'vertical';
+        if (orientation === 'horizontal' || (orientation === 'vertical' && direction === NavigationDirection.UP)) {
+            children.reverse();
+        }
+
+        for (const $child of children) {
+            if (!$child || !($child instanceof HTMLElement)) {
+                return null;
+            }
+
+            const $target = this.findFocusableElement($child, direction);
+            if ($target) {
+                return $target;
+            }
+        }
+
+        return null;
+    }
+
+    private startGamepadPolling() {
+        this.stopGamepadPolling();
+
+        this.gamepadPollingIntervalId = window.setInterval(this.pollGamepad.bind(this), NavigationDialogManager.GAMEPAD_POLLING_INTERVAL);
+    }
+
+    private stopGamepadPolling() {
+        this.gamepadLastStates = [];
+
+        this.gamepadPollingIntervalId && window.clearInterval(this.gamepadPollingIntervalId);
+        this.gamepadPollingIntervalId = null;
+    }
+
+    private focusDirection(direction: NavigationDirection) {
+        const dialog = this.dialog;
+        if (!dialog) {
+            return;
+        }
+
+        // Get current focused element
+        const $focusing = dialog.getFocusedElement();
+        if (!$focusing || !this.findFocusableElement($focusing, direction)) {
+            dialog.focusIfNeeded();
+            return null;
+        }
+
+        const $target = this.findNextTarget($focusing, direction, true);
+        this.focus($target);
+    }
+
+    private unmountCurrentDialog() {
+        const dialog = this.dialog;
+
+        dialog && dialog.onBeforeUnmount();
+        this.$container.firstChild?.remove();
+        dialog && dialog.onUnmounted();
+
+        this.dialog = null;
+    }
+}

src/modules/ui/fullscreen-text.ts

@@ -0,0 +1,33 @@
+import { CE } from "@/utils/html";
+
+export class FullscreenText {
+    private static instance: FullscreenText;
+    public static getInstance(): FullscreenText {
+        if (!FullscreenText.instance) {
+            FullscreenText.instance = new FullscreenText();
+        }
+        return FullscreenText.instance;
+    }
+
+    $text: HTMLElement;
+
+    constructor() {
+        this.$text = CE('div', {
+            class: 'bx-fullscreen-text bx-gone',
+        });
+
+        document.documentElement.appendChild(this.$text);
+    }
+
+    show(msg: string) {
+        document.body.classList.add('bx-no-scroll');
+
+        this.$text.classList.remove('bx-gone');
+        this.$text.textContent = msg;
+    }
+
+    hide() {
+        document.body.classList.remove('bx-no-scroll');
+        this.$text.classList.add('bx-gone');
+    }
+}

src/modules/ui/global-settings.ts

@@ -1,506 +0,0 @@
-import { STATES, AppInterface, SCRIPT_VERSION, deepClone } from "@utils/global";
-import { CE, createButton, ButtonStyle } from "@utils/html";
-import { BxIcon } from "@utils/bx-icon";
-import { getPreferredServerRegion } from "@utils/region";
-import { UserAgent } from "@utils/user-agent";
-import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/preferences";
-import { t, Translations } from "@utils/translation";
-import { PatcherCache } from "../patcher";
-import { UserAgentProfile } from "@enums/user-agent";
-import { BxSelectElement } from "@/web-components/bx-select";
-import { StreamSettings } from "../stream/stream-settings";
-import { BX_FLAGS } from "@/utils/bx-flags";
-import { Toast } from "@/utils/toast";
-
-const SETTINGS_UI = {
-    'Better xCloud': {
-        items: [
-            PrefKey.BETTER_XCLOUD_LOCALE,
-            PrefKey.SERVER_BYPASS_RESTRICTION,
-            PrefKey.UI_CONTROLLER_FRIENDLY,
-            PrefKey.REMOTE_PLAY_ENABLED,
-        ],
-    },
-
-    [t('server')]: {
-        items: [
-            PrefKey.SERVER_REGION,
-            PrefKey.STREAM_PREFERRED_LOCALE,
-            PrefKey.PREFER_IPV6_SERVER,
-        ],
-    },
-
-    [t('stream')]: {
-        items: [
-            PrefKey.STREAM_TARGET_RESOLUTION,
-            PrefKey.STREAM_CODEC_PROFILE,
-
-            PrefKey.BITRATE_VIDEO_MAX,
-
-            PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
-            PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
-
-            PrefKey.SCREENSHOT_APPLY_FILTERS,
-
-            PrefKey.AUDIO_MIC_ON_PLAYING,
-            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
-            PrefKey.STREAM_COMBINE_SOURCES,
-        ],
-    },
-
-    [t('game-bar')]: {
-        items: [
-            PrefKey.GAME_BAR_POSITION,
-        ],
-    },
-
-    [t('local-co-op')]: {
-        items: [
-            PrefKey.LOCAL_CO_OP_ENABLED,
-        ],
-    },
-
-    [t('mouse-and-keyboard')]: {
-        items: [
-            PrefKey.NATIVE_MKB_ENABLED,
-            PrefKey.MKB_ENABLED,
-            PrefKey.MKB_HIDE_IDLE_CURSOR,
-        ],
-    },
-
-    [t('touch-controller')]: {
-        note: !STATES.userAgent.capabilities.touch ? '⚠️ ' + t('device-unsupported-touch') : null,
-        unsupported: !STATES.userAgent.capabilities.touch,
-        items: [
-            PrefKey.STREAM_TOUCH_CONTROLLER,
-            PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF,
-            PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY,
-            PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
-            PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
-        ],
-    },
-
-    [t('loading-screen')]: {
-        items: [
-            PrefKey.UI_LOADING_SCREEN_GAME_ART,
-            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
-            PrefKey.UI_LOADING_SCREEN_ROCKET,
-        ],
-    },
-
-    [t('ui')]: {
-        items: [
-            PrefKey.UI_LAYOUT,
-            PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
-            PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME,
-            PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS,
-            PrefKey.STREAM_SIMPLIFY_MENU,
-            PrefKey.SKIP_SPLASH_VIDEO,
-            !AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
-            PrefKey.HIDE_DOTS_ICON,
-            PrefKey.REDUCE_ANIMATIONS,
-            PrefKey.BLOCK_SOCIAL_FEATURES,
-            PrefKey.UI_HIDE_SECTIONS,
-        ],
-    },
-
-    [t('other')]: {
-        items: [
-            PrefKey.BLOCK_TRACKING,
-        ],
-    },
-
-    [t('advanced')]: {
-        items: [
-            PrefKey.USER_AGENT_PROFILE,
-        ],
-    },
-};
-
-
-export function setupSettingsUi() {
-    // Avoid rendering the Settings multiple times
-    if (document.querySelector('.bx-settings-container')) {
-        return;
-    }
-
-    const PREF_PREFERRED_REGION = getPreferredServerRegion();
-    const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
-
-    let $btnReload: HTMLButtonElement;
-
-    // Setup Settings UI
-    const $container = CE('div', {
-        'class': 'bx-settings-container bx-gone',
-    });
-
-    const $wrapper = CE('div', {'class': 'bx-settings-wrapper'},
-            CE('div', {'class': 'bx-settings-title-wrapper'},
-                createButton({
-                    classes: ['bx-settings-title'],
-                    style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST,
-                    label: 'Better xCloud ' + SCRIPT_VERSION,
-                    url: 'https://github.com/redphx/better-xcloud/releases',
-                }),
-                createButton({
-                    icon: BxIcon.QUESTION,
-                    style: ButtonStyle.FOCUSABLE,
-                    label: t('help'),
-                    url: 'https://better-xcloud.github.io/features/',
-                }),
-            )
-        );
-
-    const topButtons = [];
-
-    // "New version available" button
-    if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION != SCRIPT_VERSION) {
-        // Show new version indicator
-        topButtons.push(createButton({
-            label: `🌟 Version ${PREF_LATEST_VERSION} available`,
-            style: ButtonStyle.PRIMARY | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
-            url: 'https://github.com/redphx/better-xcloud/releases/latest',
-        }));
-    }
-
-    // "Stream settings" button
-    (STATES.supportedRegion && STATES.isSignedIn) && topButtons.push(createButton({
-        label: t('stream-settings'),
-        icon: BxIcon.STREAM_SETTINGS,
-        style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-        onClick: e => {
-            StreamSettings.getInstance().show();
-        },
-    }));
-
-    // Buttons for Android app
-    if (AppInterface) {
-        // Show Android app settings button
-        topButtons.push(createButton({
-            label: t('android-app-settings'),
-            icon: BxIcon.STREAM_SETTINGS,
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                AppInterface.openAppSettings && AppInterface.openAppSettings();
-            },
-        }));
-    } else {
-        // Show link to Android app
-        const userAgent = UserAgent.getDefault().toLowerCase();
-        if (userAgent.includes('android')) {
-            topButtons.push(createButton({
-                label: '🔥 ' + t('install-android'),
-                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-                url: 'https://better-xcloud.github.io/android',
-            }));
-        }
-    }
-
-    if (topButtons.length) {
-        const $div = CE('div', {class: 'bx-top-buttons'});
-        for (const $button of topButtons) {
-            $div.appendChild($button);
-        }
-
-        $wrapper.appendChild($div);
-    }
-
-    let localeSwitchingTimeout: number | null;
-
-    const onChange = async (e: Event) => {
-        // Clear PatcherCache;
-        PatcherCache.clear();
-
-        $btnReload.classList.add('bx-danger');
-
-        // Highlight the Settings button in the Header to remind user to reload the page
-        const $btnHeaderSettings = document.querySelector('.bx-header-settings-button');
-        $btnHeaderSettings && $btnHeaderSettings.classList.add('bx-danger');
-
-        if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
-            if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-                localeSwitchingTimeout && window.clearTimeout(localeSwitchingTimeout);
-                localeSwitchingTimeout = window.setTimeout(() => {
-                    Translations.refreshCurrentLocale();
-                    Translations.updateTranslations();
-                }, 1000);
-            } else {
-                // Update locale
-                Translations.refreshCurrentLocale();
-                await Translations.updateTranslations();
-
-                $btnReload.textContent = t('settings-reloading');
-                $btnReload.click();
-            }
-        }
-    };
-
-    // Render settings
-    for (let groupLabel in SETTINGS_UI) {
-        // Don't render other settings when not signed in
-        if (groupLabel !== 'Better xCloud' && (!STATES.supportedRegion || !STATES.isSignedIn)) {
-            continue;
-        }
-
-        const $group = CE('span', {'class': 'bx-settings-group-label'}, groupLabel);
-
-        // Render note
-        if (SETTINGS_UI[groupLabel].note) {
-            const $note = CE('b', {}, SETTINGS_UI[groupLabel].note);
-            $group.appendChild($note);
-        }
-
-        $wrapper.appendChild($group);
-
-        // Don't render settings if this is an unsupported feature
-        if (SETTINGS_UI[groupLabel].unsupported) {
-            continue;
-        }
-
-        const settingItems = SETTINGS_UI[groupLabel].items;
-        for (let settingId of settingItems) {
-            // Don't render custom settings
-            if (!settingId) {
-                continue;
-            }
-
-            const setting = Preferences.SETTINGS[settingId];
-            if (!setting) {
-                continue;
-            }
-
-            let settingLabel = setting.label;
-            let settingNote = setting.note || '';
-
-            // Add Experimental text
-            if (setting.experimental) {
-                settingLabel = '🧪 ' + settingLabel;
-                if (!settingNote) {
-                    settingNote = t('experimental');
-                } else {
-                    settingNote = `${t('experimental')}: ${settingNote}`;
-                }
-            }
-
-            let $control: any;
-            let $inpCustomUserAgent: HTMLInputElement;
-            let labelAttrs: any = {
-                tabindex: '-1',
-            };
-
-            if (settingId === PrefKey.USER_AGENT_PROFILE) {
-                let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
-                $inpCustomUserAgent = CE('input', {
-                    id: `bx_setting_inp_${settingId}`,
-                    type: 'text',
-                    placeholder: defaultUserAgent,
-                    'class': 'bx-settings-custom-user-agent',
-                });
-                $inpCustomUserAgent.addEventListener('input', e => {
-                    const profile = $control.value;
-                    const custom = (e.target as HTMLInputElement).value.trim();
-
-                    UserAgent.updateStorage(profile, custom);
-                    onChange(e);
-                });
-
-                $control = toPrefElement(PrefKey.USER_AGENT_PROFILE, (e: Event) => {
-                    const value = (e.target as HTMLInputElement).value as UserAgentProfile;
-                    let isCustom = value === UserAgentProfile.CUSTOM;
-                    let userAgent = UserAgent.get(value as UserAgentProfile);
-
-                    UserAgent.updateStorage(value);
-
-                    $inpCustomUserAgent.value = userAgent;
-                    $inpCustomUserAgent.readOnly = !isCustom;
-                    $inpCustomUserAgent.disabled = !isCustom;
-
-                    !(e.target as HTMLInputElement).disabled && onChange(e);
-                });
-            } else if (settingId === PrefKey.SERVER_REGION) {
-                let selectedValue;
-
-                $control = CE<HTMLSelectElement>('select', {
-                        id: `bx_setting_${settingId}`,
-                        title: settingLabel,
-                        tabindex: 0,
-                    });
-                $control.name = $control.id;
-
-                $control.addEventListener('input', (e: Event) => {
-                    setPref(settingId, (e.target as HTMLSelectElement).value);
-                    onChange(e);
-                });
-
-                selectedValue = PREF_PREFERRED_REGION;
-
-                setting.options = {};
-                for (let regionName in STATES.serverRegions) {
-                    const region = STATES.serverRegions[regionName];
-                    let value = regionName;
-
-                    let label = `${region.shortName} - ${regionName}`;
-                    if (region.isDefault) {
-                        label += ` (${t('default')})`;
-                        value = 'default';
-
-                        if (selectedValue === regionName) {
-                            selectedValue = 'default';
-                        }
-                    }
-
-                    setting.options[value] = label;
-                }
-
-                for (let value in setting.options) {
-                    const label = setting.options[value];
-
-                    const $option = CE('option', {value: value}, label);
-                    $control.appendChild($option);
-                }
-
-                $control.disabled = Object.keys(STATES.serverRegions).length === 0;
-
-                // Select preferred region
-                $control.value = selectedValue;
-            } else {
-                if (settingId === PrefKey.BETTER_XCLOUD_LOCALE) {
-                    $control = toPrefElement(settingId, (e: Event) => {
-                        localStorage.setItem('better_xcloud_locale', (e.target as HTMLSelectElement).value);
-                        onChange(e);
-                    });
-                } else {
-                    $control = toPrefElement(settingId, onChange);
-                }
-            }
-
-            if (!!$control.id) {
-                labelAttrs['for'] = $control.id;
-            } else {
-                labelAttrs['for'] = `bx_setting_${settingId}`;
-            }
-
-            // Disable unsupported settings
-            if (setting.unsupported) {
-                ($control as HTMLInputElement).disabled = true;
-            }
-
-            // Make disabled control elements un-focusable
-            if ($control.disabled && !!$control.getAttribute('tabindex')) {
-                $control.setAttribute('tabindex', -1);
-            }
-
-            const $label = CE<HTMLLabelElement>('label', labelAttrs, settingLabel);
-            if (settingNote) {
-                $label.appendChild(CE('b', {}, settingNote));
-            }
-
-            let $elm: HTMLElement;
-
-            if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
-                // Controller-friendly <select>
-                $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
-                    $label,
-                    CE('div', {class: 'bx-setting-control'}, BxSelectElement.wrap($control)),
-                );
-            } else {
-                $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
-                    $label,
-                    $control instanceof HTMLInputElement ? CE('label', {
-                        class: 'bx-setting-control',
-                        for: $label.getAttribute('for'),
-                    }, $control) : CE('div', {class: 'bx-setting-control'}, $control),
-                );
-            }
-
-            $wrapper.appendChild($elm);
-
-            // Add User-Agent input
-            if (settingId === PrefKey.USER_AGENT_PROFILE) {
-                $wrapper.appendChild($inpCustomUserAgent!);
-                // Trigger 'change' event
-                $control.disabled = true;
-                $control.dispatchEvent(new Event('input'));
-                $control.disabled = false;
-            }
-        }
-    }
-
-    // Setup Reload button
-    $btnReload = createButton({
-        label: t('settings-reload'),
-        classes: ['bx-settings-reload-button'],
-        style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH | ButtonStyle.TALL,
-        onClick: e => {
-            window.location.reload();
-            $btnReload.disabled = true;
-            $btnReload.textContent = t('settings-reloading');
-        },
-    });
-    $btnReload.setAttribute('tabindex', '0');
-
-    $wrapper.appendChild($btnReload);
-
-    // Donation link
-    const $donationLink = CE('a', {
-            'class': 'bx-donation-link',
-            href: 'https://ko-fi.com/redphx',
-            target: '_blank',
-            tabindex: 0,
-        }, `❤️ ${t('support-better-xcloud')}`);
-    $wrapper.appendChild($donationLink);
-
-    // Show Game Pass app version
-    try {
-        const appVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement).content;
-        const appDate = new Date((document.querySelector('meta[name=gamepass-app-date]') as HTMLMetaElement).content).toISOString().substring(0, 10);
-        $wrapper.appendChild(CE('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
-    } catch (e) {}
-
-    // Show Debug info
-    const debugInfo = deepClone(BX_FLAGS.DeviceInfo);
-    const debugSettings = [
-        PrefKey.STREAM_TARGET_RESOLUTION,
-        PrefKey.STREAM_CODEC_PROFILE,
-
-        PrefKey.VIDEO_PLAYER_TYPE,
-        PrefKey.VIDEO_PROCESSING,
-        PrefKey.VIDEO_SHARPNESS,
-    ];
-
-    debugInfo['settings'] = {};
-    for (const key of debugSettings) {
-        debugInfo['settings'][key] = getPref(key);
-    }
-
-    const $debugInfo = CE('div', {class: 'bx-debug-info'},
-        createButton({
-            label: 'Debug info',
-            style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                console.log(e);
-                (e.target as HTMLElement).closest('button')?.nextElementSibling?.classList.toggle('bx-gone');
-            },
-        }),
-        CE('pre', {
-            class: 'bx-gone',
-            on: {
-                click: async (e: Event) => {
-                    try {
-                        await navigator.clipboard.writeText((e.target as HTMLElement).innerText);
-                        Toast.show('Copied to clipboard', '', {instant: true});
-                    } catch (err) {
-                        console.error('Failed to copy: ', err);
-                    }
-                },
-            },
-        }, '```\n' + JSON.stringify(debugInfo, null, '  ') + '\n```'),
-    );
-    $wrapper.appendChild($debugInfo);
-
-    $container.appendChild($wrapper);
-
-    // Add Settings UI to the web page
-    const $pageContent = document.getElementById('PageContent');
-    $pageContent?.parentNode?.insertBefore($container, $pageContent);
-}

src/modules/ui/guide-menu.ts

@@ -2,21 +2,21 @@ import { BxEvent } from "@/utils/bx-event";
 import { AppInterface, STATES } from "@/utils/global";
 import { createButton, ButtonStyle, CE } from "@/utils/html";
 import { t } from "@/utils/translation";
-import { StreamSettings } from "../stream/stream-settings";
+import { SettingsNavigationDialog } from "./dialog/settings-dialog";
 
 export enum GuideMenuTab {
-    HOME,
+    HOME = 'home',
 }
 
 export class GuideMenu {
     static #BUTTONS = {
-        streamSetting: createButton({
-            label: t('stream-settings'),
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+        scriptSettings: createButton({
+            label: t('better-xcloud'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.PRIMARY,
             onClick: e => {
                 // Wait until the Guide dialog is closed
                 window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
-                    setTimeout(() => StreamSettings.getInstance().show(), 50);
+                    setTimeout(() => SettingsNavigationDialog.getInstance().show(), 50);
                 }, {once: true});
 
                 // Close all xCloud's dialogs
@@ -25,7 +25,7 @@ export class GuideMenu {
         }),
 
         appSettings: createButton({
-            label: t('android-app-settings'),
+            label: t('app-settings'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
                 // Close all xCloud's dialogs
@@ -86,8 +86,8 @@ export class GuideMenu {
 
         const buttons: HTMLElement[] = [];
 
-        // "Stream settings" button
-        buttons.push(GuideMenu.#BUTTONS.streamSetting);
+        // "Better xCloud" button
+        buttons.push(GuideMenu.#BUTTONS.scriptSettings);
 
         // "App settings" button
         AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
@@ -112,7 +112,7 @@ export class GuideMenu {
 
         const buttons: HTMLElement[] = [];
 
-        buttons.push(GuideMenu.#BUTTONS.streamSetting);
+        buttons.push(GuideMenu.#BUTTONS.scriptSettings);
         AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
 
         // Reload page

src/modules/ui/header.ts

@@ -1,18 +1,19 @@
 import { SCRIPT_VERSION } from "@utils/global";
-import { createButton, ButtonStyle, CE } from "@utils/html";
+import { createButton, ButtonStyle, CE, isElementVisible } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
-import { PrefKey, getPref } from "@utils/preferences";
 import { RemotePlay } from "@modules/remote-play";
 import { t } from "@utils/translation";
-import { setupSettingsUi } from "./global-settings";
+import { SettingsNavigationDialog } from "./dialog/settings-dialog";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 export class HeaderSection {
     static #$remotePlayBtn = createButton({
         classes: ['bx-header-remote-play-button', 'bx-gone'],
         icon: BxIcon.REMOTE_PLAY,
         title: t('remote-play'),
-        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR,
         onClick: e => {
             RemotePlay.togglePopup();
         },
@@ -21,14 +22,9 @@ export class HeaderSection {
     static #$settingsBtn = createButton({
         classes: ['bx-header-settings-button'],
         label: '???',
-        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
+        style: ButtonStyle.FROSTED | ButtonStyle.DROP_SHADOW | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
         onClick: e => {
-            setupSettingsUi();
-
-            const $settings = document.querySelector('.bx-settings-container')!;
-            $settings.classList.toggle('bx-gone');
-            window.scrollTo(0, 0);
-            document.activeElement && (document.activeElement as HTMLElement).blur();
+            SettingsNavigationDialog.getInstance().show();
         },
     });
 
@@ -48,12 +44,16 @@ export class HeaderSection {
         const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
 
         // Setup Settings button
-        const $settingsBtn = HeaderSection.#$settingsBtn;
-        $settingsBtn.querySelector('span')!.textContent = getPreferredServerRegion(true);
+        const $btnSettings = HeaderSection.#$settingsBtn;
+        if (isElementVisible(HeaderSection.#$buttonsWrapper)) {
+            return;
+        }
+
+        $btnSettings.querySelector('span')!.textContent = getPreferredServerRegion(true) || t('better-xcloud');
 
         // Show new update status
         if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
-            $settingsBtn.setAttribute('data-update-available', 'true');
+            $btnSettings.setAttribute('data-update-available', 'true');
         }
 
         // Add the Settings button to the web page
@@ -61,10 +61,12 @@ export class HeaderSection {
     }
 
     static checkHeader() {
-        if (!HeaderSection.#$buttonsWrapper.isConnected) {
-            const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
-            HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
+        let $target = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
+        if (!$target) {
+            $target = document.querySelector("div[class^=UnsupportedMarketPage-module__buttons]");
         }
+
+        $target && HeaderSection.#injectSettingsButton($target as HTMLElement);
     }
 
     static showRemotePlayButton() {
@@ -72,17 +74,20 @@ export class HeaderSection {
     }
 
     static watchHeader() {
-        const $header = document.querySelector('#PageContent header');
-        if (!$header) {
+        const $root = document.querySelector('#PageContent header') || document.querySelector('#root');
+        if (!$root) {
             return;
         }
 
+        HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
+        HeaderSection.#timeout = null;
+
         HeaderSection.#observer && HeaderSection.#observer.disconnect();
         HeaderSection.#observer = new MutationObserver(mutationList => {
             HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
             HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
         });
-        HeaderSection.#observer.observe($header, {subtree: true, childList: true});
+        HeaderSection.#observer.observe($root, {subtree: true, childList: true});
 
         HeaderSection.checkHeader();
     }

src/modules/ui/product-details.ts

@@ -19,7 +19,7 @@ export class ProductDetailsPage {
     private static shortcutTimeoutId: number | null = null;
 
     static injectShortcutButton() {
-        if (!AppInterface || BX_FLAGS.DeviceInfo?.deviceType !== 'android') {
+        if (!AppInterface || BX_FLAGS.DeviceInfo.deviceType !== 'android') {
             return;
         }
 
@@ -28,7 +28,6 @@ export class ProductDetailsPage {
             // Find action buttons container
             const $container = document.querySelector('div[class*=ActionButtons-module__container]');
             if ($container) {
-                this.$btnShortcut.style.width = $container.getBoundingClientRect().width + 'px';
                 $container.parentElement?.appendChild(ProductDetailsPage.$btnShortcut);
             }
         }, 500);

src/modules/ui/ui.ts

@@ -1,6 +1,4 @@
 import { CE } from "@utils/html";
-import { onChangeVideoPlayerType } from "../stream/stream-settings-utils";
-import { StreamSettings } from "../stream/stream-settings";
 
 
 export function localRedirect(path: string) {
@@ -26,10 +24,4 @@ export function localRedirect(path: string) {
     $anchor.click();
 }
 
-export function setupStreamUi() {
-    StreamSettings.getInstance();
-    onChangeVideoPlayerType();
-}
-
-
 (window as any).localRedirect = localRedirect;

src/modules/vibration-manager.ts

@@ -1,6 +1,7 @@
 import { AppInterface } from "@utils/global";
 import { BxEvent } from "@utils/bx-event";
-import { PrefKey, getPref } from "@utils/preferences";
+import { PrefKey } from "@/enums/pref-keys";
+import { ControllerDeviceVibration, getPref } from "@/utils/settings-storages/global-settings-storage";
 
 const VIBRATION_DATA_MAP = {
     'gamepadIndex': 8,
@@ -68,9 +69,9 @@ export class VibrationManager {
         const value = getPref(PrefKey.CONTROLLER_DEVICE_VIBRATION);
         let enabled;
 
-        if (value === 'on') {
+        if (value === ControllerDeviceVibration.ON) {
             enabled = true;
-        } else if (value === 'auto') {
+        } else if (value === ControllerDeviceVibration.AUTO) {
             enabled = true;
             const gamepads = window.navigator.getGamepads();
             for (const gamepad of gamepads) {

src/types/index.d.ts

@@ -49,7 +49,6 @@ type BxStates = {
 
     currentStream: Partial<{
         titleId: string;
-        xboxTitleId: string;
         productId: string;
         titleInfo: XcloudTitleInfo;
 
@@ -71,8 +70,6 @@ type BxStates = {
     pointerServerPort: number;
 }
 
-type DualEnum = {[index: string]: number} & {[index: number]: string};
-
 type XcloudTitleInfo = {
     titleId: string,
 

src/types/network.ts

@@ -0,0 +1,3 @@
+export type RemotePlayConsoleAddresses = {
+    [key: string]: number[],
+}

src/types/setting-definition.d.ts

@@ -0,0 +1,60 @@
+import type { PrefKey } from "@/enums/pref-keys";
+import type { SettingElementType } from "@/utils/setting-element";
+
+export type SuggestedSettingCategory = 'recommended' | 'lowest' | 'highest' | 'default';
+export type RecommendedSettings = {
+    schema_version: 1,
+    device_name: string,
+    device_type: 'android' | 'android-tv' | 'android-handheld' | 'webos',
+    settings: {
+        app: any,
+        script: {
+            _base?: 'lowest' | 'highest',
+        } & PartialRecord<PrefKey, any>,
+    },
+};
+
+export type SettingDefinition = {
+    default: any;
+} & Partial<{
+    label: string;
+    note: string | HTMLElement;
+    experimental: boolean;
+    unsupported: string | boolean;
+    suggest: PartialRecord<SuggestedSettingCategory, any>,
+    ready: (setting: SettingDefinition) => void;
+    type: SettingElementType,
+    // migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
+}> & (
+    {} | {
+        options: {[index: string]: string};
+        optionsGroup?: string;
+    } | {
+        multipleOptions: {[index: string]: string};
+        params: MultipleOptionsParams;
+    } | {
+        type: SettingElementType.NUMBER_STEPPER;
+        min: number;
+        max: number;
+        params: NumberStepperParams;
+
+        steps?: number;
+    }
+);
+
+export type SettingDefinitions = {[index in PrefKey]: SettingDefinition};
+
+export type MultipleOptionsParams = Partial<{
+    size?: number;
+}>
+
+export type NumberStepperParams = Partial<{
+    suffix: string;
+    disabled: boolean;
+    hideSlider: boolean;
+
+    ticks: number;
+    exactTicks: number;
+
+    customTextValue: (value: any) => string | null;
+}>

src/utils/bx-event.ts

@@ -1,63 +1,65 @@
 import { AppInterface } from "@utils/global";
 
-export enum BxEvent {
-    JUMP_BACK_IN_READY = 'bx-jump-back-in-ready',
-    POPSTATE = 'bx-popstate',
-
-    TITLE_INFO_READY = 'bx-title-info-ready',
-
-    STREAM_LOADING = 'bx-stream-loading',
-    STREAM_STARTING = 'bx-stream-starting',
-    STREAM_STARTED = 'bx-stream-started',
-    STREAM_PLAYING = 'bx-stream-playing',
-    STREAM_STOPPED = 'bx-stream-stopped',
-    STREAM_ERROR_PAGE = 'bx-stream-error-page',
-
-    STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected',
-    STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected',
-
-    // STREAM_EVENT_TARGET_READY = 'bx-stream-event-target-ready',
-    STREAM_SESSION_READY = 'bx-stream-session-ready',
-
-    CUSTOM_TOUCH_LAYOUTS_LOADED = 'bx-custom-touch-layouts-loaded',
-    TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready',
-
-    REMOTE_PLAY_READY = 'bx-remote-play-ready',
-    REMOTE_PLAY_FAILED = 'bx-remote-play-failed',
-
-    XCLOUD_SERVERS_READY = 'bx-servers-ready',
-    XCLOUD_SERVERS_UNAVAILABLE = 'bx-servers-unavailable',
-
-    DATA_CHANNEL_CREATED = 'bx-data-channel-created',
-
-    GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated',
-    MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed',
-
-    CAPTURE_SCREENSHOT = 'bx-capture-screenshot',
-    GAINNODE_VOLUME_CHANGED = 'bx-gainnode-volume-changed',
-
-    POINTER_LOCK_REQUESTED = 'bx-pointer-lock-requested',
-    POINTER_LOCK_EXITED = 'bx-pointer-lock-exited',
-
-    NAVIGATION_FOCUS_CHANGED = 'bx-nav-focus-changed',
-
-    // xCloud Dialog events
-    XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown',
-    XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed',
-
-    XCLOUD_GUIDE_MENU_SHOWN = 'bx-xcloud-guide-menu-shown',
-
-    XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed',
-
-    XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page',
-}
-
-export enum XcloudEvent {
-    MICROPHONE_STATE_CHANGED = 'microphoneStateChanged',
-}
 
 export namespace BxEvent {
-    export function dispatch(target: HTMLElement | Window, eventName: string, data?: any) {
+    export const JUMP_BACK_IN_READY = 'bx-jump-back-in-ready';
+    export const POPSTATE = 'bx-popstate';
+
+    export const TITLE_INFO_READY = 'bx-title-info-ready';
+
+    export const SETTINGS_CHANGED = 'bx-settings-changed';
+
+    export const STREAM_LOADING = 'bx-stream-loading';
+    export const STREAM_STARTING = 'bx-stream-starting';
+    export const STREAM_STARTED = 'bx-stream-started';
+    export const STREAM_PLAYING = 'bx-stream-playing';
+    export const STREAM_STOPPED = 'bx-stream-stopped';
+    export const STREAM_ERROR_PAGE = 'bx-stream-error-page';
+
+    export const STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected';
+    export const STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected';
+
+    // export const STREAM_EVENT_TARGET_READY = 'bx-stream-event-target-ready';
+    export const STREAM_SESSION_READY = 'bx-stream-session-ready';
+
+    export const CUSTOM_TOUCH_LAYOUTS_LOADED = 'bx-custom-touch-layouts-loaded';
+    export const TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready';
+
+    export const REMOTE_PLAY_READY = 'bx-remote-play-ready';
+    export const REMOTE_PLAY_FAILED = 'bx-remote-play-failed';
+
+    export const XCLOUD_SERVERS_READY = 'bx-servers-ready';
+    export const XCLOUD_SERVERS_UNAVAILABLE = 'bx-servers-unavailable';
+
+    export const DATA_CHANNEL_CREATED = 'bx-data-channel-created';
+
+    export const GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated';
+    export const MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed';
+
+    export const CAPTURE_SCREENSHOT = 'bx-capture-screenshot';
+
+    export const POINTER_LOCK_REQUESTED = 'bx-pointer-lock-requested';
+    export const POINTER_LOCK_EXITED = 'bx-pointer-lock-exited';
+
+    export const NAVIGATION_FOCUS_CHANGED = 'bx-nav-focus-changed';
+
+    // xCloud Dialog events
+    export const XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown';
+    export const XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed';
+
+    export const XCLOUD_GUIDE_MENU_SHOWN = 'bx-xcloud-guide-menu-shown';
+
+    export const XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed';
+
+    export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page';
+
+    export const XCLOUD_ROUTER_HISTORY_READY = 'bx-xcloud-router-history-ready';
+
+    export function dispatch(target: Element | Window | null, eventName: string, data?: any) {
+        if (!target) {
+            return;
+        }
+
         if (!eventName) {
             alert('BxEvent.dispatch(): eventName is null');
             return;

src/utils/bx-exposed.ts

@@ -1,19 +1,21 @@
 import { ControllerShortcut } from "@/modules/controller-shortcut";
 import { BxEvent } from "@utils/bx-event";
 import { deepClone, STATES } from "@utils/global";
-import { getPref, PrefKey } from "@utils/preferences";
 import { BxLogger } from "./bx-logger";
 import { BX_FLAGS } from "./bx-flags";
-import { StreamSettings } from "@/modules/stream/stream-settings";
+import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, StreamTouchController } from "./settings-storages/global-settings-storage";
 
-export enum InputType {
+export enum SupportedInputType {
     CONTROLLER = 'Controller',
     MKB = 'MKB',
     CUSTOM_TOUCH_OVERLAY = 'CustomTouchOverlay',
     GENERIC_TOUCH = 'GenericTouch',
     NATIVE_TOUCH = 'NativeTouch',
     BATIVE_SENSOR = 'NativeSensor',
-}
+};
+export type SupportedInputTypeValue = (typeof SupportedInputType)[keyof typeof SupportedInputType];
 
 export const BxExposed = {
     getTitleInfo: () => STATES.currentStream.titleInfo,
@@ -25,21 +27,21 @@ export const BxExposed = {
         let supportedInputTypes = titleInfo.details.supportedInputTypes;
 
         if (BX_FLAGS.ForceNativeMkbTitles?.includes(titleInfo.details.productId)) {
-            supportedInputTypes.push(InputType.MKB);
+            supportedInputTypes.push(SupportedInputType.MKB);
         }
 
         // Remove native MKB support on mobile browsers or by user's choice
         if (getPref(PrefKey.NATIVE_MKB_ENABLED) === 'off') {
-            supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.MKB);
+            supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.MKB);
         }
 
-        titleInfo.details.hasMkbSupport = supportedInputTypes.includes(InputType.MKB);
+        titleInfo.details.hasMkbSupport = supportedInputTypes.includes(SupportedInputType.MKB);
 
         if (STATES.userAgent.capabilities.touch) {
             let touchControllerAvailability = getPref(PrefKey.STREAM_TOUCH_CONTROLLER);
 
             // Disable touch control when gamepad found
-            if (touchControllerAvailability !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
+            if (touchControllerAvailability !== StreamTouchController.OFF && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
                 const gamepads = window.navigator.getGamepads();
                 let gamepadFound = false;
 
@@ -50,26 +52,26 @@ export const BxExposed = {
                     }
                 }
 
-                gamepadFound && (touchControllerAvailability = 'off');
+                gamepadFound && (touchControllerAvailability = StreamTouchController.OFF);
             }
 
-            if (touchControllerAvailability === 'off') {
+            if (touchControllerAvailability === StreamTouchController.OFF) {
                 // Disable touch on all games (not native touch)
-                supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.CUSTOM_TOUCH_OVERLAY && i !== InputType.GENERIC_TOUCH);
+                supportedInputTypes = supportedInputTypes.filter(i => i !== SupportedInputType.CUSTOM_TOUCH_OVERLAY && i !== SupportedInputType.GENERIC_TOUCH);
                 // Empty TABs
                 titleInfo.details.supportedTabs = [];
             }
 
             // Pre-check supported input types
-            titleInfo.details.hasNativeTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH);
+            titleInfo.details.hasNativeTouchSupport = supportedInputTypes.includes(SupportedInputType.NATIVE_TOUCH);
             titleInfo.details.hasTouchSupport = titleInfo.details.hasNativeTouchSupport ||
-                    supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY) ||
-                    supportedInputTypes.includes(InputType.GENERIC_TOUCH);
+                    supportedInputTypes.includes(SupportedInputType.CUSTOM_TOUCH_OVERLAY) ||
+                    supportedInputTypes.includes(SupportedInputType.GENERIC_TOUCH);
 
-            if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === 'all') {
+            if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === StreamTouchController.ALL) {
                 // Add generic touch support for non touch-supported games
                 titleInfo.details.hasFakeTouchSupport = true;
-                supportedInputTypes.push(InputType.GENERIC_TOUCH);
+                supportedInputTypes.push(SupportedInputType.GENERIC_TOUCH);
             }
         }
 
@@ -120,12 +122,24 @@ export const BxExposed = {
     disableGamepadPolling: false,
 
     backButtonPressed: () => {
-        const streamSettings = StreamSettings.getInstance();
-        if (streamSettings.isShowing()) {
-            streamSettings.hide();
+        const navigationDialogManager = NavigationDialogManager.getInstance();
+        if (navigationDialogManager.isShowing()) {
+            navigationDialogManager.hide();
             return true;
         }
 
+        const dict = {
+            bubbles: true,
+            cancelable: true,
+            key: 'XF86Back',
+            code: 'XF86Back',
+            keyCode: 4,
+            which: 4,
+        };
+
+        document.body.dispatchEvent(new KeyboardEvent('keydown', dict));
+        document.body.dispatchEvent(new KeyboardEvent('keyup', dict));
+
         return false;
     },
 };

src/utils/bx-flags.ts

@@ -1,33 +1,29 @@
-type BxFlags = Partial<{
+import { BxLogger } from "./bx-logger";
+
+type BxFlags = {
     CheckForUpdate: boolean;
-    PreloadRemotePlay: boolean;
-    PreloadUi: boolean;
     EnableXcloudLogging: boolean;
     SafariWorkaround: boolean;
 
-    UseDevTouchLayout: boolean;
-
     ForceNativeMkbTitles: string[];
     FeatureGates: {[key: string]: boolean} | null,
 
-    IsSupportedTvBrowser: boolean,
-
-    DeviceInfo: Partial<{
-        deviceType: 'android' | 'android-tv' | 'webos' | 'unknown',
+    DeviceInfo: {
+        deviceType: 'android' | 'android-tv' | 'android-handheld' | 'webos' | 'unknown',
         userAgent?: string,
-    }>,
-}>
+
+        androidInfo?: {
+            board: string,
+        },
+    }
+}
 
 // Setup flags
 const DEFAULT_FLAGS: BxFlags = {
     CheckForUpdate: true,
-    PreloadRemotePlay: true,
-    PreloadUi: false,
     EnableXcloudLogging: false,
     SafariWorkaround: true,
 
-    UseDevTouchLayout: false,
-
     ForceNativeMkbTitles: [],
     FeatureGates: null,
 
@@ -41,8 +37,10 @@ try {
     delete window.BX_FLAGS;
 } catch (e) {}
 
-if (!BX_FLAGS.DeviceInfo!.userAgent) {
-    BX_FLAGS.DeviceInfo!.userAgent = window.navigator.userAgent;
+if (!BX_FLAGS.DeviceInfo.userAgent) {
+    BX_FLAGS.DeviceInfo.userAgent = window.navigator.userAgent;
 }
 
+BxLogger.info('BxFlags', BX_FLAGS);
+
 export const NATIVE_FETCH = window.fetch;

src/utils/bx-icon.ts

@@ -1,3 +1,5 @@
+import iconBetterXcloud from "@assets/svg/better-xcloud.svg" with { type: "text" };
+import iconClose from "@assets/svg/close.svg" with { type: "text" };
 import iconCommand from "@assets/svg/command.svg" with { type: "text" };
 import iconController from "@assets/svg/controller.svg" with { type: "text" };
 import iconCopy from "@assets/svg/copy.svg" with { type: "text" };
@@ -34,8 +36,10 @@ import iconUpload from "@assets/svg/upload.svg" with { type: "text" };
 
 
 export const BxIcon = {
+    BETTER_XCLOUD: iconBetterXcloud,
     STREAM_SETTINGS: iconStreamSettings,
     STREAM_STATS: iconStreamStats,
+    CLOSE: iconClose,
     COMMAND: iconCommand,
     CONTROLLER: iconController,
     CREATE_SHORTCUT: iconCreateShortcut,

src/utils/bx-logger.ts

@@ -1,4 +1,4 @@
-enum TextColor {
+const enum TextColor {
     INFO = '#008746',
     WARNING = '#c1a404',
     ERROR = '#c10404',
@@ -19,7 +19,7 @@ export class BxLogger {
         BxLogger.#log(TextColor.ERROR, tag, ...args);
     }
 
-    static #log(color: TextColor, tag: string, ...args: any) {
+    static #log(color: string, tag: string, ...args: any) {
         console.log(`%c${BxLogger.#PREFIX}`, `color:${color};font-weight:bold;`, tag, '//', ...args);
     }
 }

src/utils/css.ts

@@ -1,11 +1,12 @@
 import { CE } from "@utils/html";
-import { PrefKey, getPref } from "@utils/preferences";
-import { renderStylus } from "@macros/build" with {type: "macro"};
+import { compressCss, renderStylus } from "@macros/build" with {type: "macro"};
 import { UiSection } from "@/enums/ui-sections";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 
 export function addCss() {
-    const STYLUS_CSS = renderStylus();
+    const STYLUS_CSS = renderStylus() as unknown as string;
     let css = STYLUS_CSS;
 
     const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS);
@@ -19,6 +20,17 @@ export function addCss() {
     // Hide "All games" section
     if (PREF_HIDE_SECTIONS.includes(UiSection.ALL_GAMES)) {
         selectorToHide.push('#BodyContent div[class*=AllGamesRow-module__gridContainer]');
+        selectorToHide.push('#BodyContent div[class*=AllGamesRow-module__rowHeader]');
+    }
+
+    // Hide "Most popular" section
+    if (PREF_HIDE_SECTIONS.includes(UiSection.MOST_POPULAR)) {
+        selectorToHide.push('#BodyContent div[class*=HomePage-module__bottomSpacing]:has(a[href="/play/gallery/popular"])');
+    }
+
+    // Hide "Play with touch" section
+    if (PREF_HIDE_SECTIONS.includes(UiSection.TOUCH)) {
+        selectorToHide.push('#BodyContent div[class*=HomePage-module__bottomSpacing]:has(a[href="/play/gallery/touch"])');
     }
 
    // Hide "Start a party" button in the Guide menu
@@ -32,18 +44,18 @@ export function addCss() {
 
     // Reduce animations
     if (getPref(PrefKey.REDUCE_ANIMATIONS)) {
-        css += `
+        css += compressCss(`
 div[class*=GameCard-module__gameTitleInnerWrapper],
 div[class*=GameCard-module__card],
 div[class*=ScrollArrows-module] {
     transition: none !important;
 }
-`;
+`);
     }
 
     // Hide the top-left dots icon while playing
     if (getPref(PrefKey.HIDE_DOTS_ICON)) {
-        css += `
+        css += compressCss(`
 div[class*=Grip-module__container] {
     visibility: hidden;
 }
@@ -65,18 +77,18 @@ button[class*=GripHandle-module__container][aria-expanded=false] {
 div[class*=StreamHUD-module__buttonsContainer] {
     padding: 0px !important;
 }
-`;
+`);
     }
 
-    css += `
+    css += compressCss(`
 div[class*=StreamMenu-module__menu] {
     min-width: 100vw !important;
 }
-`;
+`);
 
     // Simplify Stream's menu
     if (getPref(PrefKey.STREAM_SIMPLIFY_MENU)) {
-        css += `
+        css += compressCss(`
 div[class*=Menu-module__scrollable] {
     --bxStreamMenuItemSize: 80px;
     --streamMenuItemSize: calc(var(--bxStreamMenuItemSize) + 40px) !important;
@@ -107,9 +119,9 @@ svg[class*=MenuItem-module__icon] {
     padding: 0 !important;
     margin: 0 !important;
 }
-`;
+`);
     } else {
-        css += `
+        css += compressCss(`
 body[data-media-type=tv] .bx-badges {
     top: calc(var(--streamMenuItemSize) + 30px);
 }
@@ -131,12 +143,12 @@ body:not([data-media-type=tv]) div[class*=MenuItem-module__label] {
     margin-left: 8px !important;
     margin-right: 8px !important;
 }
-`;
+`);
     }
 
     // Hide scrollbar
     if (getPref(PrefKey.UI_SCROLLBAR_HIDE)) {
-        css += `
+        css += compressCss(`
 html {
     scrollbar-width: none;
 }
@@ -144,7 +156,7 @@ html {
 body::-webkit-scrollbar {
     display: none;
 }
-`;
+`);
     }
 
     const $style = CE('style', {}, css);

src/utils/feature-gates.ts

@@ -1,5 +1,6 @@
+import { PrefKey } from "@/enums/pref-keys";
 import { BX_FLAGS } from "./bx-flags";
-import { getPref, PrefKey } from "./preferences";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 export let FeatureGates: {[key: string]: boolean} = {
     'PwaPrompt': false,

src/utils/gamepad.ts

@@ -1,8 +1,9 @@
 import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
-import { PrefKey, getPref } from "@utils/preferences";
 import { t } from "@utils/translation";
 import { Toast } from "@utils/toast";
 import { BxLogger } from "@utils/bx-logger";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 // Show a toast when connecting/disconecting controller
 export function showGamepadToast(gamepad: Gamepad) {

src/utils/global.ts

@@ -1,3 +1,4 @@
+import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
 import { UserAgent } from "./user-agent";
 
 export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION!;
@@ -42,6 +43,8 @@ export const STATES: BxStates = {
     pointerServerPort: 9269,
 };
 
+export const STORAGE: {[key: string]: BaseSettingsStore} = {};
+
 export function deepClone(obj: any): any {
     if ('structuredClone' in window) {
         return structuredClone(obj);

src/utils/history.ts

@@ -2,7 +2,7 @@ import { BxEvent } from "@utils/bx-event";
 import { LoadingScreen } from "@modules/loading-screen";
 import { RemotePlay } from "@modules/remote-play";
 import { HeaderSection } from "@/modules/ui/header";
-import { StreamSettings } from "@/modules/stream/stream-settings";
+import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
 
 export function patchHistoryMethod(type: 'pushState' | 'replaceState') {
     const orig = window.history[type];
@@ -32,10 +32,8 @@ export function onHistoryChanged(e: PopStateEvent) {
         $settings.classList.add('bx-gone');
     }
 
-    // Hide Stream settings
-    if (document.querySelector('.' + StreamSettings.MAIN_CLASS)) {
-        StreamSettings.getInstance().hide();
-    }
+    // Hide Navigation dialog
+    NavigationDialogManager.getInstance().hide();
 
     // Hide Remote Play popup
     RemotePlay.detachPopup();

src/utils/html.ts

@@ -1,7 +1,37 @@
 import type { BxIcon } from "@utils/bx-icon";
+import { setNearby } from "./navigation-utils";
+import type { NavigationNearbyElements } from "@/modules/ui/dialog/navigation-dialog";
+
+export enum ButtonStyle {
+    PRIMARY = 1,
+    DANGER = 2,
+    GHOST = 4,
+    FROSTED = 8,
+    DROP_SHADOW = 16,
+    FOCUSABLE = 32,
+    FULL_WIDTH = 64,
+    FULL_HEIGHT = 128,
+    TALL = 256,
+    CIRCULAR = 512,
+    NORMAL_CASE = 1024,
+}
+
+const ButtonStyleClass = {
+    [ButtonStyle.PRIMARY]: 'bx-primary',
+    [ButtonStyle.DANGER]: 'bx-danger',
+    [ButtonStyle.GHOST]: 'bx-ghost',
+    [ButtonStyle.FROSTED]: 'bx-frosted',
+    [ButtonStyle.DROP_SHADOW]: 'bx-drop-shadow',
+    [ButtonStyle.FOCUSABLE]: 'bx-focusable',
+    [ButtonStyle.FULL_WIDTH]: 'bx-full-width',
+    [ButtonStyle.FULL_HEIGHT]: 'bx-full-height',
+    [ButtonStyle.TALL]: 'bx-tall',
+    [ButtonStyle.CIRCULAR]: 'bx-circular',
+    [ButtonStyle.NORMAL_CASE]: 'bx-normal-case',
+}
 
 type BxButton = {
-    style?: number | string | ButtonStyle;
+    style?: ButtonStyle;
     url?: string;
     classes?: string[];
     icon?: typeof BxIcon;
@@ -13,10 +43,14 @@ type BxButton = {
     attributes?: {[key: string]: any},
 }
 
-type ButtonStyle = {[index: string]: number} & {[index: number]: string};
-
 // Quickly create a tree of elements without having to use innerHTML
-function createElement<T=HTMLElement>(elmName: string, props: {[index: string]: any}={}, ..._: any): T {
+type CreateElementOptions = {
+    [index: string]: any;
+    _nearby?: NavigationNearbyElements;
+};
+
+
+function createElement<T=HTMLElement>(elmName: string, props: CreateElementOptions={}, ..._: any): T {
     let $elm;
     const hasNs = 'xmlns' in props;
 
@@ -27,6 +61,11 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
         $elm = document.createElement(elmName);
     }
 
+    if (props['_nearby']) {
+        setNearby($elm, props['_nearby']);
+        delete props['_nearby'];
+    }
+
     for (const key in props) {
         if ($elm.hasOwnProperty(key)) {
             continue;
@@ -50,7 +89,7 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
 
         if (arg instanceof Node) {
             $elm.appendChild(arg);
-        } else if (arg !== null && typeof arg !== 'undefined') {
+        } else if (arg !== null && arg !== false && typeof arg !== 'undefined') {
             $elm.appendChild(document.createTextNode(arg));
         }
     }
@@ -67,16 +106,7 @@ export const createSvgIcon = (icon: typeof BxIcon) => {
     return svgParser(icon.toString());
 }
 
-export const ButtonStyle: DualEnum = {};
-ButtonStyle[ButtonStyle.PRIMARY = 1] = 'bx-primary';
-ButtonStyle[ButtonStyle.DANGER = 2] = 'bx-danger';
-ButtonStyle[ButtonStyle.GHOST = 4] = 'bx-ghost';
-ButtonStyle[ButtonStyle.FOCUSABLE = 8] = 'bx-focusable';
-ButtonStyle[ButtonStyle.FULL_WIDTH = 16] = 'bx-full-width';
-ButtonStyle[ButtonStyle.FULL_HEIGHT = 32] = 'bx-full-height';
-ButtonStyle[ButtonStyle.TALL = 64] = 'bx-tall';
-
-const ButtonStyleIndices = Object.keys(ButtonStyle).splice(0, Object.keys(ButtonStyle).length / 2).map(i => parseInt(i));
+const ButtonStyleIndices = Object.keys(ButtonStyleClass).map(i => parseInt(i));
 
 export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     let $btn;
@@ -89,8 +119,8 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     }
 
     const style = (options.style || 0) as number;
-    style && ButtonStyleIndices.forEach(index => {
-            (style & index) && $btn.classList.add(ButtonStyle[index] as string);
+    style && ButtonStyleIndices.forEach((index: keyof typeof ButtonStyleClass) => {
+            (style & index) && $btn.classList.add(ButtonStyleClass[index] as string);
         });
 
     options.classes && $btn.classList.add(...options.classes);
@@ -100,7 +130,7 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     options.title && $btn.setAttribute('title', options.title);
     options.disabled && (($btn as HTMLButtonElement).disabled = true);
     options.onClick && $btn.addEventListener('click', options.onClick);
-    typeof options.tabIndex === 'number' && ($btn.tabIndex = options.tabIndex!);
+    $btn.tabIndex = typeof options.tabIndex === 'number' ? options.tabIndex : 0;
 
     for (const key in options.attributes) {
         if (!$btn.hasOwnProperty(key)) {
@@ -129,5 +159,16 @@ export function escapeHtml(html: string): string {
     return $span.innerHTML;
 }
 
+export function isElementVisible($elm: HTMLElement): boolean {
+    const rect = $elm.getBoundingClientRect();
+    return !!rect.width && !!rect.height;
+}
+
 export const CTN = document.createTextNode.bind(document);
 window.BX_CE = createElement;
+
+export function removeChildElements($parent: HTMLElement) {
+    while ($parent.firstElementChild) {
+        $parent.firstElementChild.remove();
+    }
+}

src/utils/local-db.ts

@@ -1,7 +1,8 @@
 import { MkbPreset } from "@modules/mkb/mkb-preset";
-import { PrefKey, setPref } from "@utils/preferences";
 import { t } from "@utils/translation";
 import type { MkbStoredPreset, MkbStoredPresets } from "@/types/mkb";
+import { PrefKey } from "@/enums/pref-keys";
+import { setPref } from "./settings-storages/global-settings-storage";
 
 export class LocalDb {
     static #instance: LocalDb;

src/utils/monkey-patches.ts

@@ -1,9 +1,10 @@
 import { BxEvent } from "@utils/bx-event";
-import { getPref, PrefKey } from "@utils/preferences";
 import { STATES } from "@utils/global";
 import { BxLogger } from "@utils/bx-logger";
 import { patchSdpBitrate, setCodecPreferences } from "./sdp";
 import { StreamPlayer, type StreamPlayerOptions } from "@/modules/stream-player";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 export function patchVideoApi() {
     const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO);
@@ -99,8 +100,6 @@ export function patchRtcPeerConnection() {
                 BxLogger.error('setLocalDescription', e);
             }
 
-            BxLogger.info('setLocalDescription', arguments[0].sdp);
-
             // @ts-ignore
             return nativeSetLocalDescription.apply(this, arguments);
         };
@@ -202,6 +201,14 @@ export function patchMeControl() {
     (window as any).MeControl = new Proxy(MeControl, MeControlHandler);
 }
 
+
+/**
+ * Disable Adobe Audience Manager (AAM)
+ */
+export function disableAdobeAudienceManager() {
+    (window as any).adobe = Object.freeze({});
+}
+
 /**
  * Use power-saving flags for touch control
  */

src/utils/navigation-utils.ts

@@ -0,0 +1,14 @@
+import type { NavigationElement, NavigationNearbyElements } from "@/modules/ui/dialog/navigation-dialog";
+
+export class NavigationUtils {
+    static setNearby($elm: NavigationElement, nearby: NavigationNearbyElements) {
+        $elm.nearby = $elm.nearby || {};
+
+        let key: keyof typeof nearby;
+        for (key in nearby) {
+            $elm.nearby[key] = nearby[key] as any;
+        }
+    }
+}
+
+export const setNearby = NavigationUtils.setNearby;

src/utils/network.ts

@@ -1,6 +1,5 @@
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
-import { PrefKey, getPref } from "@utils/preferences";
 import { TouchController } from "@modules/touch-controller";
 import { STATES } from "@utils/global";
 import { GamePassCloudGallery } from "../enums/game-pass-gallery";
@@ -8,11 +7,11 @@ import { FeatureGates } from "./feature-gates";
 import { BxLogger } from "./bx-logger";
 import { XhomeInterceptor } from "./xhome-interceptor";
 import { XcloudInterceptor } from "./xcloud-interceptor";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
+import type { RemotePlayConsoleAddresses } from "@/types/network";
 
-enum RequestType {
-    XCLOUD = 'xcloud',
-    XHOME = 'xhome',
-};
+type RequestType = 'xcloud' | 'xhome';
 
 function clearApplicationInsightsBuffers() {
     window.sessionStorage.removeItem('AI_buffer');
@@ -41,7 +40,7 @@ function clearAllLogs() {
     clearDbLogs('XCloudAppLogs', 'logs');
 }
 
-function updateIceCandidates(candidates: any, options: any) {
+function updateIceCandidates(candidates: any, options: {preferIpv6Server: boolean, consoleAddrs?: RemotePlayConsoleAddresses}) {
     const pattern = new RegExp(/a=candidate:(?<foundation>\d+) (?<component>\d+) UDP (?<priority>\d+) (?<ip>[^\s]+) (?<port>\d+) (?<the_rest>.*)/);
 
     const lst = [];
@@ -85,9 +84,9 @@ function updateIceCandidates(candidates: any, options: any) {
 
     if (options.consoleAddrs) {
         for (const ip in options.consoleAddrs) {
-            const port = options.consoleAddrs[ip];
-
-            newCandidates.push(newCandidate(`a=candidate:${newCandidates.length + 1} 1 UDP 1 ${ip} ${port} typ host`));
+            for (const port of options.consoleAddrs[ip]) {
+                newCandidates.push(newCandidate(`a=candidate:${newCandidates.length + 1} 1 UDP 1 ${ip} ${port} typ host`));
+            }
         }
     }
 
@@ -98,7 +97,7 @@ function updateIceCandidates(candidates: any, options: any) {
 }
 
 
-export async function patchIceCandidates(request: Request, consoleAddrs?: {[index: string]: number}) {
+export async function patchIceCandidates(request: Request, consoleAddrs?: RemotePlayConsoleAddresses) {
     const response = await NATIVE_FETCH(request);
     const text = await response.clone().text();
 
@@ -258,12 +257,12 @@ export function interceptHttpRequests() {
 
         let requestType: RequestType;
         if (url.includes('/sessions/home') || url.includes('xhome.') || (STATES.remotePlay.isPlaying && url.endsWith('/inputconfigs'))) {
-            requestType = RequestType.XHOME;
+            requestType = 'xhome';
         } else {
-            requestType = RequestType.XCLOUD;
+            requestType = 'xcloud';
         }
 
-        if (requestType === RequestType.XHOME) {
+        if (requestType === 'xhome') {
             return XhomeInterceptor.handle(request as Request);
         }
 

src/utils/preload-state.ts

@@ -2,8 +2,9 @@ import { deepClone, STATES } from "@utils/global";
 import { BxLogger } from "./bx-logger";
 import { TouchController } from "@modules/touch-controller";
 import { GamePassCloudGallery } from "../enums/game-pass-gallery";
-import { getPref, PrefKey } from "./preferences";
 import { BX_FLAGS } from "./bx-flags";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 const LOG_TAG = 'PreloadState';
 

src/utils/region.ts

@@ -1,8 +1,9 @@
-import { getPref, PrefKey } from "@utils/preferences";
 import { STATES } from "@utils/global";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 
-export function getPreferredServerRegion(shortName = false) {
+export function getPreferredServerRegion(shortName = false): string | null {
     let preferredRegion = getPref(PrefKey.SERVER_REGION);
     if (preferredRegion in STATES.serverRegions) {
         if (shortName && STATES.serverRegions[preferredRegion].shortName) {
@@ -25,5 +26,5 @@ export function getPreferredServerRegion(shortName = false) {
         }
     }
 
-    return '???';
+    return null;
 }

src/utils/screenshot.ts

@@ -1,7 +1,8 @@
 import { StreamPlayerType } from "@enums/stream-player";
 import { AppInterface, STATES } from "./global";
 import { CE } from "./html";
-import { getPref, PrefKey } from "./preferences";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "./settings-storages/global-settings-storage";
 
 
 export class Screenshot {

src/utils/setting-element.ts

@@ -1,20 +1,10 @@
 import type { PreferenceSetting } from "@/types/preferences";
 import { CE } from "@utils/html";
-
-type MultipleOptionsParams = {
-    size?: number;
-}
-
-type NumberStepperParams = {
-    suffix?: string;
-    disabled?: boolean;
-    hideSlider?: boolean;
-
-    ticks?: number;
-    exactTicks?: number;
-
-    customTextValue?: (value: any) => string | null;
-}
+import { setNearby } from "./navigation-utils";
+import type { PrefKey } from "@/enums/pref-keys";
+import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
+import { type MultipleOptionsParams, type NumberStepperParams } from "@/types/setting-definition";
+import { BxEvent } from "./bx-event";
 
 export enum SettingElementType {
     OPTIONS = 'options',
@@ -24,16 +14,26 @@ export enum SettingElementType {
     CHECKBOX = 'checkbox',
 }
 
+interface BxBaseSettingElement {
+    setValue: (value: any) => void,
+}
+
+export interface BxHtmlSettingElement extends HTMLElement, BxBaseSettingElement {};
+
+export interface BxSelectSettingElement extends HTMLSelectElement, BxBaseSettingElement {}
+
 export class SettingElement {
-    static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE<HTMLSelectElement>('select', {
+    static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any): BxSelectSettingElement {
+        const $control = CE<BxSelectSettingElement>('select', {
                 // title: setting.label,
                 tabindex: 0,
-            }) as HTMLSelectElement;
+            });
 
         let $parent: HTMLElement;
         if (setting.optionsGroup) {
-            $parent = CE('optgroup', {'label': setting.optionsGroup});
+            $parent = CE('optgroup', {
+                label: setting.optionsGroup,
+            });
             $control.appendChild($parent);
         } else {
             $parent = $control;
@@ -50,23 +50,25 @@ export class SettingElement {
         onChange && $control.addEventListener('input', e => {
             const target = e.target as HTMLSelectElement;
             const value = (setting.type && setting.type === 'number') ? parseInt(target.value) : target.value;
-            onChange(e, value);
+
+            !(e as any).ignoreOnChange && onChange(e, value);
         });
 
         // Custom method
-        ($control as any).setValue = (value: any) => {
+        $control.setValue = (value: any) => {
             $control.value = value;
         };
 
         return $control;
     }
 
-    static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
-        const $control = CE<HTMLSelectElement>('select', {
+    static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}): BxSelectSettingElement {
+        const $control = CE<BxSelectSettingElement>('select', {
                 // title: setting.label,
                 multiple: true,
                 tabindex: 0,
             });
+
         if (params && params.size) {
             $control.setAttribute('size', params.size.toString());
         }
@@ -85,7 +87,7 @@ export class SettingElement {
 
                 const $parent = target.parentElement!;
                 $parent.focus();
-                $parent.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($parent, 'input');
             });
 
             $control.appendChild($option);
@@ -102,22 +104,29 @@ export class SettingElement {
         onChange && $control.addEventListener('input', (e: Event) => {
             const target = e.target as HTMLSelectElement
             const values = Array.from(target.selectedOptions).map(i => i.value);
-            onChange(e, values);
+
+            !(e as any).ignoreOnChange && onChange(e, values);
         });
 
         return $control;
     }
 
     static #renderNumber(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE('input', {'tabindex': 0, 'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
+        const $control = CE<HTMLInputElement>('input', {
+            tabindex: 0,
+            type: 'number',
+            min: setting.min,
+            max: setting.max,
+        });
+
         $control.value = currentValue;
-        onChange && $control.addEventListener('change', (e: Event) => {
+        onChange && $control.addEventListener('input', (e: Event) => {
             const target = e.target as HTMLInputElement;
 
             const value = Math.max(setting.min!, Math.min(setting.max!, parseInt(target.value)));
             target.value = value.toString();
 
-            onChange(e, value);
+            !(e as any).ignoreOnChange && onChange(e, value);
         });
 
         return $control;
@@ -127,8 +136,8 @@ export class SettingElement {
         const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
         $control.checked = currentValue;
 
-        onChange && $control.addEventListener('change', e => {
-            onChange(e, (e.target as HTMLInputElement).checked);
+        onChange && $control.addEventListener('input', e => {
+            !(e as any).ignoreOnChange && onChange(e, (e.target as HTMLInputElement).checked);
         });
 
         return $control;
@@ -143,7 +152,7 @@ export class SettingElement {
         let $text: HTMLSpanElement;
         let $btnDec: HTMLButtonElement;
         let $btnInc: HTMLButtonElement;
-        let $range: HTMLInputElement;
+        let $range: HTMLInputElement | null = null;
 
         let controlValue = value;
 
@@ -171,72 +180,21 @@ export class SettingElement {
             $btnInc.classList.toggle('bx-inactive', controlValue === MAX);
         }
 
-        const $wrapper = CE('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
-                $btnDec = CE('button', {
-                        'data-type': 'dec',
-                        type: 'button',
-                        class: options.hideSlider ? 'bx-focusable' : '',
-                        tabindex: options.hideSlider ? 0 : -1,
-                    }, '-') as HTMLButtonElement,
-                $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
-                $btnInc = CE('button', {
-                        'data-type': 'inc',
-                        type: 'button',
-                        class: options.hideSlider ? 'bx-focusable' : '',
-                        tabindex: options.hideSlider ? 0 : -1,
-                    }, '+') as HTMLButtonElement,
-            );
-
-        if (!options.disabled && !options.hideSlider) {
-            $range = CE('input', {
-                    id: `bx_setting_${key}`,
-                    type: 'range',
-                    min: MIN,
-                    max: MAX,
-                    value: value,
-                    step: STEPS,
-                    tabindex: 0,
-                }) as HTMLInputElement;
-
-            $range.addEventListener('input', e => {
-                value = parseInt((e.target as HTMLInputElement).value);
-                const valueChanged = controlValue !== value;
-
-                if (!valueChanged) {
-                    return;
-                }
-
-                controlValue = value;
-                updateButtonsVisibility();
-                $text.textContent = renderTextValue(value);
-
-                !(e as any).ignoreOnChange && onChange && onChange(e, value);
-            });
-            $wrapper.appendChild($range);
-
-            if (options.ticks || options.exactTicks) {
-                const markersId = `markers-${key}`;
-                const $markers = CE('datalist', {'id': markersId});
-                $range.setAttribute('list', markersId);
-
-                if (options.exactTicks) {
-                    let start = Math.max(Math.floor(MIN / options.exactTicks), 1) * options.exactTicks;
-
-                    if (start === MIN) {
-                        start += options.exactTicks;
-                    }
-
-                    for (let i = start; i < MAX; i += options.exactTicks) {
-                        $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
-                    }
-                } else {
-                    for (let i = MIN + options.ticks!; i < MAX; i += options.ticks!) {
-                        $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
-                    }
-                }
-                $wrapper.appendChild($markers);
-            }
-        }
+        const $wrapper = CE<BxHtmlSettingElement>('div', {'class': 'bx-number-stepper', id: `bx_setting_${key}`},
+            $btnDec = CE('button', {
+                'data-type': 'dec',
+                type: 'button',
+                class: options.hideSlider ? 'bx-focusable' : '',
+                tabindex: options.hideSlider ? 0 : -1,
+            }, '-') as HTMLButtonElement,
+            $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
+            $btnInc = CE('button', {
+                'data-type': 'inc',
+                type: 'button',
+                class: options.hideSlider ? 'bx-focusable' : '',
+                tabindex: options.hideSlider ? 0 : -1,
+            }, '+') as HTMLButtonElement,
+        );
 
         if (options.disabled) {
             $btnInc.disabled = true;
@@ -244,9 +202,66 @@ export class SettingElement {
 
             $btnDec.disabled = true;
             $btnDec.classList.add('bx-inactive');
+
+            ($wrapper as any).disabled = true;
             return $wrapper;
         }
 
+        $range = CE<HTMLInputElement>('input', {
+            id: `bx_setting_${key}`,
+            type: 'range',
+            min: MIN,
+            max: MAX,
+            value: value,
+            step: STEPS,
+            tabindex: 0,
+        });
+
+        options.hideSlider && $range.classList.add('bx-gone');
+
+        $range.addEventListener('input', e => {
+            value = parseInt((e.target as HTMLInputElement).value);
+            const valueChanged = controlValue !== value;
+
+            if (!valueChanged) {
+                return;
+            }
+
+            controlValue = value;
+            updateButtonsVisibility();
+            $text.textContent = renderTextValue(value);
+
+            !(e as any).ignoreOnChange && onChange && onChange(e, value);
+        });
+
+        $wrapper.addEventListener('input', e => {
+            BxEvent.dispatch($range, 'input');
+        });
+        $wrapper.appendChild($range);
+
+        if (options.ticks || options.exactTicks) {
+            const markersId = `markers-${key}`;
+            const $markers = CE('datalist', {'id': markersId});
+            $range.setAttribute('list', markersId);
+
+            if (options.exactTicks) {
+                let start = Math.max(Math.floor(MIN / options.exactTicks), 1) * options.exactTicks;
+
+                if (start === MIN) {
+                    start += options.exactTicks;
+                }
+
+                for (let i = start; i < MAX; i += options.exactTicks) {
+                    $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
+                }
+            } else {
+                for (let i = MIN + options.ticks!; i < MAX; i += options.ticks!) {
+                    $markers.appendChild(CE<HTMLOptionElement>('option', {'value': i}));
+                }
+            }
+            $wrapper.appendChild($markers);
+        }
+
         updateButtonsVisibility();
 
         let interval: number;
@@ -277,21 +292,19 @@ export class SettingElement {
             $range && ($range.value = value.toString());
 
             isHolding = false;
-            onChange && onChange(e, value);
+            !(e as any).ignoreOnChange && onChange && onChange(e, value);
         }
 
         const onMouseDown = (e: PointerEvent) => {
             e.preventDefault();
-
             isHolding = true;
 
             const args = arguments;
             interval && clearInterval(interval);
             interval = window.setInterval(() => {
-                const event = new Event('click');
-                (event as any).arguments = args;
-
-                e.target?.dispatchEvent(event);
+                e.target && BxEvent.dispatch(e.target as HTMLElement, 'click', {
+                    arguments: args,
+                });
             }, 200);
         };
 
@@ -305,11 +318,9 @@ export class SettingElement {
         const onContextMenu = (e: Event) => e.preventDefault();
 
         // Custom method
-        ($wrapper as any).setValue = (value: any) => {
-            controlValue = parseInt(value);
-
+        $wrapper.setValue = (value: any) => {
             $text.textContent = renderTextValue(value);
-            $range && ($range.value = value);
+            $range.value = value;
         };
 
         $btnDec.addEventListener('click', onClick);
@@ -322,6 +333,10 @@ export class SettingElement {
         $btnInc.addEventListener('pointerup', onMouseUp);
         $btnInc.addEventListener('contextmenu', onContextMenu);
 
+        setNearby($wrapper, {
+            focus: $range || $btnInc,
+        })
+
         return $wrapper;
     }
 
@@ -349,4 +364,38 @@ export class SettingElement {
 
         return $control;
     }
+
+    static fromPref(key: PrefKey, storage: BaseSettingsStore, onChange: any, overrideParams={}) {
+        const definition = storage.getDefinition(key);
+        let currentValue = storage.getSetting(key);
+
+        let type;
+        if ('type' in definition) {
+            type = definition.type;
+        } else if ('options' in definition) {
+            type = SettingElementType.OPTIONS;
+        } else if ('multipleOptions' in definition) {
+            type = SettingElementType.MULTIPLE_OPTIONS;
+        } else if (typeof definition.default === 'number') {
+            type = SettingElementType.NUMBER;
+        } else {
+            type = SettingElementType.CHECKBOX;
+        }
+
+        let params: any = {};
+        if ('params' in definition) {
+            params = Object.assign(overrideParams, definition.params || {});
+        }
+
+        if (params.disabled) {
+            currentValue = definition.default;
+        }
+
+        const $control = SettingElement.render(type!, key as string, definition, currentValue, (e: any, value: any) => {
+            storage.setSetting(key, value);
+            onChange && onChange(e, value);
+        }, params);
+
+        return $control;
+    }
 }

src/utils/settings-storages/base-settings-storage.ts

@@ -0,0 +1,152 @@
+import type { PrefKey } from "@/enums/pref-keys";
+import type { NumberStepperParams, SettingDefinitions } from "@/types/setting-definition";
+import { BxEvent } from "../bx-event";
+import { SettingElementType } from "../setting-element";
+
+export class BaseSettingsStore {
+    private storage: Storage;
+    private storageKey: string;
+    private _settings: object | null;
+    private definitions: SettingDefinitions;
+
+    constructor(storageKey: string, definitions: SettingDefinitions) {
+        this.storage = window.localStorage;
+        this.storageKey = storageKey;
+
+        let settingId: keyof typeof definitions
+        for (settingId in definitions) {
+            const setting = definitions[settingId];
+
+            /*
+            if (setting.migrate && settingId in savedPrefs) {
+                setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
+            }
+            */
+
+            setting.ready && setting.ready.call(this, setting);
+        }
+        this.definitions = definitions;
+
+        this._settings = null;
+    }
+
+    get settings() {
+        if (this._settings) {
+            return this._settings;
+        }
+
+        const settings = JSON.parse(this.storage.getItem(this.storageKey) || '{}');
+        this._settings = settings;
+
+        return settings;
+    }
+
+    getDefinition(key: PrefKey) {
+        if (!this.definitions[key]) {
+            const error = 'Request invalid definition: ' + key;
+            alert(error);
+            throw Error(error);
+        }
+
+        return this.definitions[key];
+    }
+
+    getSetting(key: PrefKey, checkUnsupported = true) {
+        if (typeof key === 'undefined') {
+            debugger;
+            return;
+        }
+
+        // Return default value if the feature is not supported
+        if (checkUnsupported && this.definitions[key].unsupported) {
+            return this.definitions[key].default;
+        }
+
+        if (!(key in this.settings)) {
+            this.settings[key] = this.validateValue(key, null);
+        }
+
+        return this.settings[key];
+    }
+
+    setSetting(key: PrefKey, value: any, emitEvent = false) {
+        value = this.validateValue(key, value);
+
+        this.settings[key] = value;
+        this.saveSettings();
+
+        emitEvent && BxEvent.dispatch(window, BxEvent.SETTINGS_CHANGED, {
+            storageKey: this.storageKey,
+            settingKey: key,
+            settingValue: value,
+        });
+
+        return value;
+    }
+
+    saveSettings() {
+        this.storage.setItem(this.storageKey, JSON.stringify(this.settings));
+    }
+
+    private validateValue(key: PrefKey, value: any) {
+        const def = this.definitions[key];
+        if (!def) {
+            return value;
+        }
+
+        if (typeof value === 'undefined' || value === null) {
+            value = def.default;
+        }
+
+        if ('min' in def) {
+            value = Math.max(def.min!, value);
+        }
+
+        if ('max' in def) {
+            value = Math.min(def.max!, value);
+        }
+
+        if ('options' in def && !(value in def.options!)) {
+            value = def.default;
+        } else if ('multipleOptions' in def) {
+            if (value.length) {
+                const validOptions = Object.keys(def.multipleOptions!);
+                value.forEach((item: any, idx: number) => {
+                    (validOptions.indexOf(item) === -1) && value.splice(idx, 1);
+                });
+            }
+
+            if (!value.length) {
+                value = def.default;
+            }
+        }
+
+        return value;
+    }
+
+    getLabel(key: PrefKey): string {
+        return this.definitions[key].label || key;
+    }
+
+    getValueText(key: PrefKey, value: any): string {
+        const definition = this.definitions[key];
+        if (definition.type === SettingElementType.NUMBER_STEPPER) {
+            const params = (definition as any).params as NumberStepperParams;
+            if (params.customTextValue) {
+                const text = params.customTextValue(value);
+                if (text) {
+                    return text;
+                }
+            }
+
+            return value.toString();
+        } else if ('options' in definition) {
+            const options = (definition as any).options;
+            if (value in options) {
+                return options[value];
+            }
+        }
+
+        return value.toString();
+    }
+}

src/utils/settings-storages/global-settings-storage.ts

@@ -1,116 +1,102 @@
-import { CE } from "@utils/html";
-import { SUPPORTED_LANGUAGES, t} from "@utils/translation";
-import { SettingElement, SettingElementType } from "@utils/settings";
-import { UserAgent } from "@utils/user-agent";
-import { StreamStat } from "@modules/stream/stream-stats";
-import type { PreferenceSetting, PreferenceSettings } from "@/types/preferences";
-import { AppInterface, STATES } from "@utils/global";
-import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
-import { UserAgentProfile } from "@/enums/user-agent";
-import { UiSection } from "@/enums/ui-sections";
 import { BypassServers } from "@/enums/bypass-servers";
-import { BX_FLAGS } from "./bx-flags";
+import { PrefKey, StorageKey } from "@/enums/pref-keys";
+import { StreamPlayerType, StreamVideoProcessing } from "@/enums/stream-player";
+import { UiSection } from "@/enums/ui-sections";
+import { UserAgentProfile } from "@/enums/user-agent";
+import { StreamStat } from "@/modules/stream/stream-stats";
+import { type SettingDefinition, type SettingDefinitions } from "@/types/setting-definition";
+import { BX_FLAGS } from "../bx-flags";
+import { STATES, AppInterface, STORAGE } from "../global";
+import { CE } from "../html";
+import { t, SUPPORTED_LANGUAGES } from "../translation";
+import { UserAgent } from "../user-agent";
+import { BaseSettingsStore as BaseSettingsStorage } from "./base-settings-storage";
+import { SettingElementType } from "../setting-element";
 
-export enum PrefKey {
-    LAST_UPDATE_CHECK = 'version_last_check',
-    LATEST_VERSION = 'version_latest',
-    CURRENT_VERSION = 'version_current',
 
-    BETTER_XCLOUD_LOCALE = 'bx_locale',
-
-    SERVER_REGION = 'server_region',
-    SERVER_BYPASS_RESTRICTION = 'server_bypass_restriction',
-
-    PREFER_IPV6_SERVER = 'prefer_ipv6_server',
-    STREAM_TARGET_RESOLUTION = 'stream_target_resolution',
-    STREAM_PREFERRED_LOCALE = 'stream_preferred_locale',
-    STREAM_CODEC_PROFILE = 'stream_codec_profile',
-
-    USER_AGENT_PROFILE = 'user_agent_profile',
-    STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
-
-    STREAM_COMBINE_SOURCES = 'stream_combine_sources',
-
-    STREAM_TOUCH_CONTROLLER = 'stream_touch_controller',
-    STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off',
-    STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity',
-    STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard',
-    STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom',
-
-    STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
-
-    BITRATE_VIDEO_MAX = 'bitrate_video_max',
-
-    GAME_BAR_POSITION = 'game_bar_position',
-
-    LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
-    // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
-
-    CONTROLLER_ENABLE_SHORTCUTS = 'controller_enable_shortcuts',
-    CONTROLLER_ENABLE_VIBRATION = 'controller_enable_vibration',
-    CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
-    CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
-    CONTROLLER_SHOW_CONNECTION_STATUS = 'controller_show_connection_status',
-
-    NATIVE_MKB_ENABLED = 'native_mkb_enabled',
-    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'native_mkb_scroll_x_sensitivity',
-    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'native_mkb_scroll_y_sensitivity',
-
-    MKB_ENABLED = 'mkb_enabled',
-    MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
-    MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
-    MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
-
-    SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
-
-    BLOCK_TRACKING = 'block_tracking',
-    BLOCK_SOCIAL_FEATURES = 'block_social_features',
-    SKIP_SPLASH_VIDEO = 'skip_splash_video',
-    HIDE_DOTS_ICON = 'hide_dots_icon',
-    REDUCE_ANIMATIONS = 'reduce_animations',
-
-    UI_LOADING_SCREEN_GAME_ART = 'ui_loading_screen_game_art',
-    UI_LOADING_SCREEN_WAIT_TIME = 'ui_loading_screen_wait_time',
-    UI_LOADING_SCREEN_ROCKET = 'ui_loading_screen_rocket',
-
-    UI_CONTROLLER_FRIENDLY = 'ui_controller_friendly',
-    UI_LAYOUT = 'ui_layout',
-    UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
-    UI_HIDE_SECTIONS = 'ui_hide_sections',
-
-    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
-    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui_game_card_show_wait_time',
-
-    VIDEO_PLAYER_TYPE = 'video_player_type',
-    VIDEO_PROCESSING = 'video_processing',
-    VIDEO_POWER_PREFERENCE = 'video_power_preference',
-    VIDEO_SHARPNESS = 'video_sharpness',
-    VIDEO_RATIO = 'video_ratio',
-    VIDEO_BRIGHTNESS = 'video_brightness',
-    VIDEO_CONTRAST = 'video_contrast',
-    VIDEO_SATURATION = 'video_saturation',
-
-    AUDIO_MIC_ON_PLAYING = 'audio_mic_on_playing',
-    AUDIO_ENABLE_VOLUME_CONTROL = 'audio_enable_volume_control',
-    AUDIO_VOLUME = 'audio_volume',
-
-    STATS_ITEMS = 'stats_items',
-    STATS_SHOW_WHEN_PLAYING = 'stats_show_when_playing',
-    STATS_QUICK_GLANCE = 'stats_quick_glance',
-    STATS_POSITION = 'stats_position',
-    STATS_TEXT_SIZE = 'stats_text_size',
-    STATS_TRANSPARENT = 'stats_transparent',
-    STATS_OPACITY = 'stats_opacity',
-    STATS_CONDITIONAL_FORMATTING = 'stats_conditional_formatting',
-
-    REMOTE_PLAY_ENABLED = 'xhome_enabled',
-    REMOTE_PLAY_RESOLUTION = 'xhome_resolution',
-
-    GAME_FORTNITE_FORCE_CONSOLE = 'game_fortnite_force_console',
+export const enum StreamResolution {
+    DIM_720P = '720p',
+    DIM_1080P = '1080p',
 }
 
-export class Preferences {
-    static SETTINGS: PreferenceSettings = {
+export const enum CodecProfile {
+    DEFAULT = 'default',
+    LOW = 'low',
+    NORMAL = 'normal',
+    HIGH = 'high',
+};
+
+export const enum StreamTouchController {
+    DEFAULT = 'default',
+    ALL = 'all',
+    OFF = 'off',
+}
+
+export const enum ControllerDeviceVibration {
+    ON = 'on',
+    AUTO = 'auto',
+    OFF = 'off',
+}
+
+
+function getSupportedCodecProfiles() {
+    const options: PartialRecord<CodecProfile, string> = {
+        default: t('default'),
+    };
+
+    if (!('getCapabilities' in RTCRtpReceiver)) {
+        return options;
+    }
+
+    let hasLowCodec = false;
+    let hasNormalCodec = false;
+    let hasHighCodec = false;
+
+    const codecs = RTCRtpReceiver.getCapabilities('video')!.codecs;
+    for (let codec of codecs) {
+        if (codec.mimeType.toLowerCase() !== 'video/h264' || !codec.sdpFmtpLine) {
+            continue;
+        }
+
+        const fmtp = codec.sdpFmtpLine.toLowerCase();
+        if (fmtp.includes('profile-level-id=4d')) {
+            hasHighCodec = true;
+        } else if (fmtp.includes('profile-level-id=42e')) {
+            hasNormalCodec = true;
+        } else if (fmtp.includes('profile-level-id=420')) {
+            hasLowCodec = true;
+        }
+    }
+
+    if (hasLowCodec) {
+        if (!hasNormalCodec && !hasHighCodec) {
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-low')} (${t('default')})`;
+        } else {
+            options[CodecProfile.LOW] = t('visual-quality-low');
+        }
+    }
+
+    if (hasNormalCodec) {
+        if (!hasLowCodec && !hasHighCodec) {
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-normal')} (${t('default')})`;
+        } else {
+            options[CodecProfile.NORMAL] = t('visual-quality-normal');
+        }
+    }
+
+    if (hasHighCodec) {
+        if (!hasLowCodec && !hasNormalCodec) {
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-high')} (${t('default')})`;
+        } else {
+            options[CodecProfile.HIGH] = t('visual-quality-high');
+        }
+    }
+
+    return options;
+}
+
+export class GlobalSettingsStorage extends BaseSettingsStorage {
+    private static readonly DEFINITIONS: SettingDefinitions = {
         [PrefKey.LAST_UPDATE_CHECK]: {
             default: 0,
         },
@@ -178,79 +164,31 @@ export class Preferences {
             default: 'auto',
             options: {
                 auto: t('default'),
-                '1080p': '1080p',
-                '720p': '720p',
+                [StreamResolution.DIM_720P]: '720p',
+                [StreamResolution.DIM_1080P]: '1080p',
+            },
+            suggest: {
+                lowest: StreamResolution.DIM_720P,
+                highest: StreamResolution.DIM_1080P,
             },
         },
         [PrefKey.STREAM_CODEC_PROFILE]: {
             label: t('visual-quality'),
             default: 'default',
-            options: (() => {
-                const options: {[index: string]: string} = {
-                    default: t('default'),
-                };
-
-                if (!('getCapabilities' in RTCRtpReceiver)) {
-                    return options;
-                }
-
-                let hasLowCodec = false;
-                let hasNormalCodec = false;
-                let hasHighCodec = false;
-
-                const codecs = RTCRtpReceiver.getCapabilities('video')!.codecs;
-                for (let codec of codecs) {
-                    if (codec.mimeType.toLowerCase() !== 'video/h264' || !codec.sdpFmtpLine) {
-                        continue;
-                    }
-
-                    const fmtp = codec.sdpFmtpLine.toLowerCase();
-                    if (!hasHighCodec && fmtp.includes('profile-level-id=4d')) {
-                        hasHighCodec = true;
-                    } else if (!hasNormalCodec && fmtp.includes('profile-level-id=42e')) {
-                        hasNormalCodec = true;
-                    } else if (!hasLowCodec && fmtp.includes('profile-level-id=420')) {
-                        hasLowCodec = true;
-                    }
-                }
-
-                if (hasHighCodec) {
-                    if (!hasLowCodec && !hasNormalCodec) {
-                        options.default = `${t('visual-quality-high')} (${t('default')})`;
-                    } else {
-                        options.high = t('visual-quality-high');
-                    }
-                }
-
-                if (hasNormalCodec) {
-                    if (!hasLowCodec && !hasHighCodec) {
-                        options.default = `${t('visual-quality-normal')} (${t('default')})`;
-                    } else {
-                        options.normal = t('visual-quality-normal');
-                    }
-                }
-
-                if (hasLowCodec) {
-                    if (!hasNormalCodec && !hasHighCodec) {
-                        options.default = `${t('visual-quality-low')} (${t('default')})`;
-                    } else {
-                        options.low = t('visual-quality-low');
-                    }
-                }
-
-                return options;
-            })(),
-            ready: (setting: PreferenceSetting) => {
-                const options: any = setting.options;
+            options: getSupportedCodecProfiles(),
+            ready: (setting: SettingDefinition) => {
+                const options = (setting as any).options;
                 const keys = Object.keys(options);
 
                 if (keys.length <= 1) { // Unsupported
                     setting.unsupported = true;
                     setting.note = '⚠️ ' + t('browser-unsupported-feature');
-                } else {
-                    // Set default value to the best codec profile
-                    // setting.default = keys[keys.length - 1];
                 }
+
+                setting.suggest = {
+                    lowest: keys.length === 1 ? keys[0] : keys[1],
+                    highest: keys[keys.length - 1],
+                };
             },
         },
         [PrefKey.PREFER_IPV6_SERVER]: {
@@ -281,16 +219,16 @@ export class Preferences {
 
         [PrefKey.STREAM_TOUCH_CONTROLLER]: {
             label: t('tc-availability'),
-            default: 'all',
+            default: StreamTouchController.ALL,
             options: {
-                default: t('default'),
-                all: t('tc-all-games'),
-                off: t('off'),
+                [StreamTouchController.DEFAULT]: t('default'),
+                [StreamTouchController.ALL]: t('tc-all-games'),
+                [StreamTouchController.OFF]: t('off'),
             },
             unsupported: !STATES.userAgent.capabilities.touch,
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
                 if (setting.unsupported) {
-                    setting.default = 'default';
+                    setting.default = StreamTouchController.DEFAULT;
                 }
             },
         },
@@ -366,16 +304,9 @@ export class Preferences {
                     }
                 },
             },
-            migrate: function(savedPrefs: any, value: any) {
-                try {
-                    value = parseInt(value);
-                    if (value !== 0 && value < 100) {
-                        value *= 1024 * 1000;
-                    }
-                    this.set(PrefKey.BITRATE_VIDEO_MAX, value, true);
-                    savedPrefs[PrefKey.BITRATE_VIDEO_MAX] = value;
-                } catch (e) {}
-            },
+            suggest: {
+                highest: 0,
+            }
         },
 
         [PrefKey.GAME_BAR_POSITION]: {
@@ -420,11 +351,11 @@ export class Preferences {
 
         [PrefKey.CONTROLLER_DEVICE_VIBRATION]: {
             label: t('device-vibration'),
-            default: 'off',
+            default: ControllerDeviceVibration.OFF,
             options: {
-                on: t('on'),
-                auto: t('device-vibration-not-using-gamepad'),
-                off: t('off'),
+                [ControllerDeviceVibration.ON]: t('on'),
+                [ControllerDeviceVibration.AUTO]: t('device-vibration-not-using-gamepad'),
+                [ControllerDeviceVibration.OFF]: t('off'),
             },
         },
 
@@ -448,7 +379,7 @@ export class Preferences {
                 const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
                 return !AppInterface && userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
             })(),
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
                 let note;
                 let url;
                 if (setting.unsupported) {
@@ -474,16 +405,15 @@ export class Preferences {
                 on: t('on'),
                 off: t('off'),
             },
-            ready: (setting: PreferenceSetting) => {
+            ready: (setting: SettingDefinition) => {
                 if (AppInterface) {
-
                 } else if (UserAgent.isMobile()) {
                     setting.unsupported = true;
                     setting.default = 'off';
-                    delete setting.options!['default'];
-                    delete setting.options!['on'];
+                    delete (setting as any).options['default'];
+                    delete (setting as any).options['on'];
                 } else {
-                    delete setting.options!['on'];
+                    delete (setting as any).options['on'];
                 }
             },
         },
@@ -559,7 +489,7 @@ export class Preferences {
 
         [PrefKey.UI_CONTROLLER_FRIENDLY]: {
             label: t('controller-friendly-ui'),
-            default: !STATES.browser.capabilities.touch || BX_FLAGS.DeviceInfo?.deviceType === "android-tv",
+            default: BX_FLAGS.DeviceInfo.deviceType !== 'unknown',
         },
 
         [PrefKey.UI_LAYOUT]: {
@@ -588,11 +518,13 @@ export class Preferences {
             multipleOptions: {
                 [UiSection.NEWS]: t('section-news'),
                 [UiSection.FRIENDS]: t('section-play-with-friends'),
-                // [UiSection.MOST_POPULAR]: t('section-most-popular'),
+                [UiSection.NATIVE_MKB]: t('section-native-mkb'),
+                [UiSection.TOUCH]: t('section-touch'),
+                [UiSection.MOST_POPULAR]: t('section-most-popular'),
                 [UiSection.ALL_GAMES]: t('section-all-games'),
             },
             params: {
-                size: 3,
+                size: 6,
             },
         },
 
@@ -612,14 +544,14 @@ export class Preferences {
         [PrefKey.USER_AGENT_PROFILE]: {
             label: t('user-agent-profile'),
             note: '⚠️ ' + t('unexpected-behavior'),
-            default: BX_FLAGS.DeviceInfo?.deviceType === 'android-tv' ? UserAgentProfile.VR_OCULUS : 'default',
+            default: (BX_FLAGS.DeviceInfo.deviceType === 'android-tv' || BX_FLAGS.DeviceInfo.deviceType === 'webos') ? UserAgentProfile.VR_OCULUS : 'default',
             options: {
                 [UserAgentProfile.DEFAULT]: t('default'),
                 [UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows',
                 [UserAgentProfile.MACOS_SAFARI]: 'Safari + macOS',
+                [UserAgentProfile.VR_OCULUS]: 'Android TV',
                 [UserAgentProfile.SMART_TV_GENERIC]: 'Smart TV',
                 [UserAgentProfile.SMART_TV_TIZEN]: 'Samsung Smart TV',
-                [UserAgentProfile.VR_OCULUS]: 'Meta Quest VR',
                 [UserAgentProfile.CUSTOM]: t('custom'),
             },
         },
@@ -630,6 +562,10 @@ export class Preferences {
                 [StreamPlayerType.VIDEO]: t('default'),
                 [StreamPlayerType.WEBGL2]: t('webgl2'),
             },
+            suggest: {
+                lowest: StreamPlayerType.VIDEO,
+                highest: StreamPlayerType.WEBGL2,
+            },
         },
         [PrefKey.VIDEO_PROCESSING]: {
             label: t('clarity-boost'),
@@ -638,14 +574,21 @@ export class Preferences {
                 [StreamVideoProcessing.USM]: t('unsharp-masking'),
                 [StreamVideoProcessing.CAS]: t('amd-fidelity-cas'),
             },
+            suggest: {
+                lowest: StreamVideoProcessing.USM,
+                highest: StreamVideoProcessing.CAS,
+            },
         },
         [PrefKey.VIDEO_POWER_PREFERENCE]: {
-            label: t('gpu-configuration'),
+            label: t('renderer-configuration'),
             default: 'default',
             options: {
                 'default': t('default'),
-                'high-performance': t('high-performance'),
                 'low-power': t('low-power'),
+                'high-performance': t('high-performance'),
+            },
+            suggest: {
+                highest: 'low-power',
             },
         },
         [PrefKey.VIDEO_SHARPNESS]: {
@@ -661,6 +604,10 @@ export class Preferences {
                     return value === 0 ? t('off') : value.toString();
                 },
             },
+            suggest: {
+                lowest: 0,
+                highest: 4,
+            },
         },
         [PrefKey.VIDEO_RATIO]: {
             label: t('aspect-ratio'),
@@ -725,7 +672,7 @@ export class Preferences {
             default: 100,
             min: 0,
             max: 600,
-            steps: 20,
+            steps: 10,
             params: {
                 suffix: '%',
                 ticks: 100,
@@ -801,10 +748,10 @@ export class Preferences {
         },
 
         [PrefKey.REMOTE_PLAY_RESOLUTION]: {
-            default: '1080p',
+            default: StreamResolution.DIM_1080P,
             options: {
-                '1080p': '1080p',
-                '720p': '720p',
+                [StreamResolution.DIM_1080P]: '1080p',
+                [StreamResolution.DIM_720P]: '720p',
             },
         },
 
@@ -813,169 +760,16 @@ export class Preferences {
             default: false,
             note: t('fortnite-allow-stw-mode'),
         },
-
-        // Deprecated
-        /*
-        [Preferences.DEPRECATED_CONTROLLER_SUPPORT_LOCAL_CO_OP]: {
-            default: false,
-            'migrate': function(savedPrefs, value) {
-                this.set(Preferences.LOCAL_CO_OP_ENABLED, value);
-                savedPrefs[Preferences.LOCAL_CO_OP_ENABLED] = value;
-            },
-        },
-        */
-    }
-
-    #storage = localStorage;
-    #key = 'better_xcloud';
-    #prefs: {[index: string]: any} = {};
+    };
 
     constructor() {
-        let savedPrefsStr = this.#storage.getItem(this.#key);
-        if (savedPrefsStr == null) {
-            savedPrefsStr = '{}';
-        }
-
-        const savedPrefs = JSON.parse(savedPrefsStr);
-
-        for (let settingId in Preferences.SETTINGS) {
-            const setting = Preferences.SETTINGS[settingId];
-
-            if (setting.migrate && settingId in savedPrefs) {
-                setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
-            }
-
-            setting.ready && setting.ready.call(this, setting);
-        }
-
-        for (let settingId in Preferences.SETTINGS) {
-            const setting = Preferences.SETTINGS[settingId];
-            if (!setting) {
-                alert(`Undefined setting key: ${settingId}`);
-                console.log('Undefined setting key');
-                continue;
-            }
-
-            // Ignore deprecated/migrated settings
-            if (setting.migrate) {
-                continue;
-            }
-
-            if (settingId in savedPrefs) {
-                this.#prefs[settingId] = this.#validateValue(settingId, savedPrefs[settingId]);
-            } else {
-                this.#prefs[settingId] = setting.default;
-            }
-        }
-    }
-
-    #validateValue(key: keyof typeof Preferences.SETTINGS, value: any) {
-        const config = Preferences.SETTINGS[key];
-        if (!config) {
-            return value;
-        }
-
-        if (typeof value === 'undefined' || value === null) {
-            value = config.default;
-        }
-
-        if ('min' in config) {
-            value = Math.max(config.min!, value);
-        }
-
-        if ('max' in config) {
-            value = Math.min(config.max!, value);
-        }
-
-        if ('options' in config && !(value in config.options!)) {
-            value = config.default;
-        } else if ('multipleOptions' in config) {
-            if (value.length) {
-                const validOptions = Object.keys(config.multipleOptions!);
-                value.forEach((item: any, idx: number) => {
-                    (validOptions.indexOf(item) === -1) && value.splice(idx, 1);
-                });
-            }
-
-            if (!value.length) {
-                value = config.default;
-            }
-        }
-
-        return value;
-    }
-
-    get(key: PrefKey) {
-        if (typeof key === 'undefined') {
-            debugger;
-            return;
-        }
-
-        // Return default value if the feature is not supported
-        if (Preferences.SETTINGS[key].unsupported) {
-            return Preferences.SETTINGS[key].default;
-        }
-
-        if (!(key in this.#prefs)) {
-            this.#prefs[key] = this.#validateValue(key, null);
-        }
-
-        return this.#prefs[key];
-    }
-
-    set(key: PrefKey, value: any, skipSave?: boolean): any {
-        value = this.#validateValue(key, value);
-
-        this.#prefs[key] = value;
-        !skipSave && this.#updateStorage();
-
-        return value;
-    }
-
-    #updateStorage() {
-        this.#storage.setItem(this.#key, JSON.stringify(this.#prefs));
-    }
-
-    toElement(key: keyof typeof Preferences.SETTINGS, onChange: any, overrideParams={}) {
-        const setting = Preferences.SETTINGS[key];
-        let currentValue = this.get(key);
-
-        let type;
-        if ('type' in setting) {
-            type = setting.type;
-        } else if ('options' in setting) {
-            type = SettingElementType.OPTIONS;
-        } else if ('multipleOptions' in setting) {
-            type = SettingElementType.MULTIPLE_OPTIONS;
-        } else if (typeof setting.default === 'number') {
-            type = SettingElementType.NUMBER;
-        } else {
-            type = SettingElementType.CHECKBOX;
-        }
-
-        const params = Object.assign(overrideParams, setting.params || {});
-        if (params.disabled) {
-            currentValue = Preferences.SETTINGS[key].default;
-        }
-
-        const $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
-                this.set(key, value);
-                onChange && onChange(e, value);
-            }, params);
-
-        return $control;
-    }
-
-    toNumberStepper(key: keyof typeof Preferences.SETTINGS, onChange: any, options={}) {
-        return SettingElement.render(SettingElementType.NUMBER_STEPPER, key, Preferences.SETTINGS[key], this.get(key), (e: any, value: any) => {
-                this.set(key, value);
-                onChange && onChange(e, value);
-            }, options);
+        super(StorageKey.GLOBAL, GlobalSettingsStorage.DEFINITIONS);
     }
 }
 
 
-const prefs = new Preferences();
-export const getPref = prefs.get.bind(prefs);
-export const setPref = prefs.set.bind(prefs);
-export const toPrefElement = prefs.toElement.bind(prefs);
+const globalSettings = new GlobalSettingsStorage();
+export const getPrefDefinition = globalSettings.getDefinition.bind(globalSettings);
+export const getPref = globalSettings.getSetting.bind(globalSettings);
+export const setPref = globalSettings.setSetting.bind(globalSettings);
+STORAGE.Global = globalSettings;

src/utils/translation.ts

@@ -5,6 +5,7 @@ export const SUPPORTED_LANGUAGES = {
     'en-US': 'English (United States)',
 
     'ca-CA': 'Català',
+    'da-DK': 'dansk',
     'de-DE': 'Deutsch',
     'en-ID': 'Bahasa Indonesia',
     'es-ES': 'español (España)',
@@ -31,7 +32,7 @@ const Texts = {
     "always-off": "Always off",
     "always-on": "Always on",
     "amd-fidelity-cas": "AMD FidelityFX CAS",
-    "android-app-settings": "Android app settings",
+    "app-settings": "App settings",
     "apply": "Apply",
     "aspect-ratio": "Aspect ratio",
     "aspect-ratio-note": "Don't use with native touch games",
@@ -46,10 +47,12 @@ const Texts = {
     "badge-playtime": "Playtime",
     "badge-server": "Server",
     "badge-video": "Video",
+    "better-xcloud": "Better xCloud",
     "bitrate-audio-maximum": "Maximum audio bitrate",
     "bitrate-video-maximum": "Maximum video bitrate",
     "bottom-left": "Bottom-left",
     "bottom-right": "Bottom-right",
+    "brazil": "Brazil",
     "brightness": "Brightness",
     "browser-unsupported-feature": "Your browser doesn't support this feature",
     "bypass-region-restriction": "Bypass region restriction",
@@ -76,7 +79,7 @@ const Texts = {
     "controller-shortcuts-xbox-note": "Button to open the Guide menu",
     "controller-vibration": "Controller vibration",
     "copy": "Copy",
-    "create-shortcut": "Create shortcut",
+    "create-shortcut": "Shortcut",
     "custom": "Custom",
     "deadzone-counterweight": "Deadzone counterweight",
     "decrease": "Decrease",
@@ -110,7 +113,6 @@ const Texts = {
     "fortnite-force-console-version": "Fortnite: force console version",
     "game-bar": "Game Bar",
     "getting-consoles-list": "Getting the list of consoles...",
-    "gpu-configuration": "GPU configuration",
     "help": "Help",
     "hide": "Hide",
     "hide-idle-cursor": "Hide mouse cursor on idle",
@@ -119,13 +121,18 @@ const Texts = {
     "hide-system-menu-icon": "Hide System menu's icon",
     "hide-touch-controller": "Hide touch controller",
     "high-performance": "High performance",
+    "highest-quality": "Highest quality",
+    "highest-quality-note": "Your device may not be powerful enough to use these settings",
     "horizontal-scroll-sensitivity": "Horizontal scroll sensitivity",
     "horizontal-sensitivity": "Horizontal sensitivity",
+    "how-to-improve-app-performance": "How to improve app's performance",
     "ignore": "Ignore",
     "import": "Import",
     "increase": "Increase",
-    "install-android": "Install Better xCloud app for Android",
+    "install-android": "Better xCloud app for Android",
+    "japan": "Japan",
     "keyboard-shortcuts": "Keyboard shortcuts",
+    "korea": "Korea",
     "language": "Language",
     "large": "Large",
     "layout": "Layout",
@@ -133,6 +140,7 @@ const Texts = {
     "loading-screen": "Loading screen",
     "local-co-op": "Local co-op",
     "low-power": "Low power",
+    "lowest-quality": "Lowest quality",
     "map-mouse-to": "Map mouse to",
     "may-not-work-properly": "May not work properly!",
     "menu": "Menu",
@@ -154,6 +162,7 @@ const Texts = {
     "opacity": "Opacity",
     "other": "Other",
     "playing": "Playing",
+    "poland": "Poland",
     "position": "Position",
     "powered-off": "Powered off",
     "powered-on": "Powered on",
@@ -163,9 +172,10 @@ const Texts = {
     "press-esc-to-cancel": "Press Esc to cancel",
     "press-key-to-toggle-mkb": [
         (e: any) => `Press ${e.key} to toggle this feature`,
-        ,
+        (e: any) => `Premeu ${e.key} per alternar aquesta funció`,
+        (e: any) => `Tryk på ${e.key} for at slå denne funktion til`,
         (e: any) => `${e.key}: Funktion an-/ausschalten`,
-        ,
+        (e: any) => `Tekan ${e.key} untuk mengaktifkan fitur ini`,
         (e: any) => `Pulsa ${e.key} para alternar esta función`,
         (e: any) => `Appuyez sur ${e.key} pour activer cette fonctionnalité`,
         (e: any) => `Premi ${e.key} per attivare questa funzionalità`,
@@ -174,7 +184,7 @@ const Texts = {
         (e: any) => `Naciśnij ${e.key} aby przełączyć tę funkcję`,
         (e: any) => `Pressione ${e.key} para alternar este recurso`,
         (e: any) => `Нажмите ${e.key} для переключения этой функции`,
-        ,
+        (e: any) => `กด ${e.key} เพื่อสลับคุณสมบัตินี้`,
         (e: any) => `Etkinleştirmek için ${e.key} tuşuna basın`,
         (e: any) => `Натисніть ${e.key} щоб перемкнути цю функцію`,
         (e: any) => `Nhấn ${e.key} để bật/tắt tính năng này`,
@@ -183,12 +193,35 @@ const Texts = {
     ],
     "press-to-bind": "Press a key or do a mouse click to bind...",
     "prompt-preset-name": "Preset's name:",
+    "recommended": "Recommended",
+    "recommended-settings-for-device": [
+        (e: any) => `Recommended settings for ${e.device}`,
+        ,
+        ,
+        ,
+        ,
+        (e: any) => `Ajustes recomendados para ${e.device}`,
+        ,
+        (e: any) => `Configurazioni consigliate per ${e.device}`,
+        ,
+        (e: any) => `다음 기기에서 권장되는 설정: ${e.device}`,
+        ,
+        ,
+        ,
+        ,
+        ,
+        (e: any) => `Рекомендовані налаштування для ${e.device}`,
+        (e: any) => `Cấu hình được đề xuất cho ${e.device}`,
+        ,
+        ,
+    ],
     "reduce-animations": "Reduce UI animations",
     "region": "Region",
     "reload-page": "Reload page",
     "remote-play": "Remote Play",
     "rename": "Rename",
     "renderer": "Renderer",
+    "renderer-configuration": "Renderer configuration",
     "right-click-to-unbind": "Right-click on a key to unbind it",
     "right-stick": "Right stick",
     "rocket-always-hide": "Always hide",
@@ -199,16 +232,19 @@ const Texts = {
     "saturation": "Saturation",
     "save": "Save",
     "screen": "Screen",
-    "screenshot-apply-filters": "Applies video filters to screenshots",
+    "screenshot-apply-filters": "Apply video filters to screenshots",
     "section-all-games": "All games",
     "section-most-popular": "Most popular",
+    "section-native-mkb": "Play with mouse & keyboard",
     "section-news": "News",
     "section-play-with-friends": "Play with friends",
+    "section-touch": "Play with touch",
     "separate-touch-controller": "Separate Touch controller & Controller #1",
     "separate-touch-controller-note": "Touch controller is Player 1, Controller #1 is Player 2",
     "server": "Server",
     "settings": "Settings",
     "settings-reload": "Reload page to reflect changes",
+    "settings-reload-note": "Settings in this tab only go into effect on the next page load",
     "settings-reloading": "Reloading...",
     "sharpness": "Sharpness",
     "shortcut-keys": "Shortcut keys",
@@ -240,6 +276,8 @@ const Texts = {
     "stream-settings": "Stream settings",
     "stream-stats": "Stream stats",
     "stretch": "Stretch",
+    "suggest-settings": "Suggest settings",
+    "suggest-settings-link": "Suggest recommended settings for this device",
     "support-better-xcloud": "Support Better xCloud",
     "swap-buttons": "Swap buttons",
     "take-screenshot": "Take screenshot",
@@ -261,6 +299,7 @@ const Texts = {
     "touch-control-layout-by": [
         (e: any) => `Touch control layout by ${e.name}`,
         (e: any) => `Format del control tàctil per ${e.name}`,
+        (e: any) => `Touch-kontrol layout af ${e.name}`,
         (e: any) => `Touch-Steuerungslayout von ${e.name}`,
         (e: any) => `Tata letak Sentuhan layar oleh ${e.name}`,
         (e: any) => `Disposición del control táctil por ${e.nombre}`,
@@ -271,7 +310,7 @@ const Texts = {
         (e: any) => `Układ sterowania dotykowego stworzony przez ${e.name}`,
         (e: any) => `Disposição de controle por toque feito por ${e.name}`,
         (e: any) => `Сенсорная раскладка по ${e.name}`,
-        ,
+        (e: any) => `รูปแบบการควบคุมแบบสัมผัสโดย ${e.name}`,
         (e: any) => `${e.name} kişisinin dokunmatik kontrolcü tuş şeması`,
         (e: any) => `Розташування сенсорного керування від ${e.name}`,
         (e: any) => `Bố cục điều khiển cảm ứng tạo bởi ${e.name}`,
@@ -282,6 +321,7 @@ const Texts = {
     "transparent-background": "Transparent background",
     "ui": "UI",
     "unexpected-behavior": "May cause unexpected behavior",
+    "united-states": "United States",
     "unknown": "Unknown",
     "unlimited": "Unlimited",
     "unmuted": "Unmuted",
@@ -302,6 +342,7 @@ const Texts = {
     "volume": "Volume",
     "wait-time-countdown": "Countdown",
     "wait-time-estimated": "Estimated finish time",
+    "wallpaper": "Wallpaper",
     "webgl2": "WebGL2",
 };
 
@@ -320,14 +361,20 @@ export class Translations {
     static async init() {
         Translations.#enUsIndex = Translations.#supportedLocales.indexOf(Translations.#EN_US);
 
-        Translations.refreshCurrentLocale();
+        Translations.refreshLocale();
         await Translations.#loadTranslations();
     }
 
-    static refreshCurrentLocale() {
+    static refreshLocale(newLocale?: string) {
+        let locale;
+        if (newLocale) {
+            localStorage.setItem(Translations.#KEY_LOCALE, newLocale);
+            locale = newLocale;
+        } else {
+            locale = localStorage.getItem(Translations.#KEY_LOCALE);
+        }
         const supportedLocales = Translations.#supportedLocales;
 
-        let locale = localStorage.getItem(Translations.#KEY_LOCALE);
         if (!locale) {
             // Get browser's locale
             locale = window.navigator.language || Translations.#EN_US;
@@ -417,6 +464,10 @@ export class Translations {
                 Translations.#foreignTranslations = translations;
             });
     }
+
+    static switchLocale(locale: string) {
+        localStorage.setItem(Translations.#KEY_LOCALE, locale);
+    }
 }
 
 export const t = Translations.get;

src/utils/user-agent.ts

@@ -1,5 +1,4 @@
 import { UserAgentProfile } from "@enums/user-agent";
-import { deepClone } from "./global";
 import { BX_FLAGS } from "./bx-flags";
 
 type UserAgentConfig = {
@@ -37,7 +36,7 @@ export class UserAgent {
     static init() {
         UserAgent.#config = JSON.parse(window.localStorage.getItem(UserAgent.STORAGE_KEY)  || '{}') as UserAgentConfig;
         if (!UserAgent.#config.profile) {
-            UserAgent.#config.profile = UserAgentProfile.DEFAULT;
+            UserAgent.#config.profile = (BX_FLAGS.DeviceInfo.deviceType === 'android-tv' || BX_FLAGS.DeviceInfo.deviceType === 'webos') ? UserAgentProfile.VR_OCULUS : UserAgentProfile.DEFAULT;
         }
 
         if (!UserAgent.#config.custom) {
@@ -48,14 +47,14 @@ export class UserAgent {
     }
 
     static updateStorage(profile: UserAgentProfile, custom?: string) {
-        const clonedConfig = deepClone(UserAgent.#config);
-        clonedConfig.profile = profile;
+        const config = UserAgent.#config;
+        config.profile = profile;
 
-        if (typeof custom !== 'undefined') {
-            clonedConfig.custom = custom;
+        if (profile === UserAgentProfile.CUSTOM && typeof custom !== 'undefined') {
+            config.custom = custom;
         }
 
-        window.localStorage.setItem(UserAgent.STORAGE_KEY, JSON.stringify(clonedConfig));
+        window.localStorage.setItem(UserAgent.STORAGE_KEY, JSON.stringify(config));
     }
 
     static getDefault(): string {
@@ -121,14 +120,11 @@ export class UserAgent {
 
         let newUserAgent = UserAgent.get(profile);
 
-        // Pretend to be Tizen TV
-        if (BX_FLAGS.IsSupportedTvBrowser) {
-            newUserAgent += ` SmartTV ${SMART_TV_UNIQUE_ID}`;
-        }
-
         // Clear data of navigator.userAgentData, force xCloud to detect browser based on navigator.userAgent
-        (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;
-        Object.defineProperty(window.navigator, 'userAgentData', {});
+        if ('userAgentData' in window.navigator) {
+            (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;
+            Object.defineProperty(window.navigator, 'userAgentData', {});
+        }
 
         // Override navigator.userAgent
         (window.navigator as any).orgUserAgent = window.navigator.userAgent;

src/utils/utils.ts

@@ -1,7 +1,9 @@
-import { PrefKey, getPref, setPref } from "@utils/preferences";
 import { AppInterface, SCRIPT_VERSION } from "@utils/global";
 import { UserAgent } from "@utils/user-agent";
 import { Translations } from "./translation";
+import { Toast } from "./toast";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, setPref } from "./settings-storages/global-settings-storage";
 
 /**
  * Check for update
@@ -95,3 +97,16 @@ export function floorToNearest(value: number, interval: number): number {
 export function roundToNearest(value: number, interval: number): number {
     return Math.round(value / interval) * interval;
 }
+
+export async function copyToClipboard(text: string, showToast=true): Promise<boolean> {
+    try {
+        await navigator.clipboard.writeText(text);
+        showToast && Toast.show('Copied to clipboard', '', {instant: true});
+        return true;
+    } catch (err) {
+        console.error('Failed to copy: ', err);
+        showToast && Toast.show('Failed to copy', '', {instant: true});
+    }
+
+    return false;
+}

src/utils/xcloud-interceptor.ts

@@ -6,9 +6,10 @@ import { BxEvent } from "./bx-event";
 import { NATIVE_FETCH, BX_FLAGS } from "./bx-flags";
 import { STATES } from "./global";
 import { patchIceCandidates } from "./network";
-import { getPref, PrefKey } from "./preferences";
 import { getPreferredServerRegion } from "./region";
 import { BypassServerIps } from "@/enums/bypass-servers";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 
 export
 class XcloudInterceptor {
@@ -74,7 +75,7 @@ class XcloudInterceptor {
         BxEvent.dispatch(window, BxEvent.XCLOUD_SERVERS_READY);
 
         const preferredRegion = getPreferredServerRegion();
-        if (preferredRegion in STATES.serverRegions) {
+        if (preferredRegion && preferredRegion in STATES.serverRegions) {
             const tmp = Object.assign({}, STATES.serverRegions[preferredRegion]);
             tmp.isDefault = true;
 
@@ -110,7 +111,7 @@ class XcloudInterceptor {
 
         // Force stream's resolution
         if (PREF_STREAM_TARGET_RESOLUTION !== 'auto') {
-            const osName = (PREF_STREAM_TARGET_RESOLUTION === '720p') ? 'android' : 'windows';
+            const osName = (PREF_STREAM_TARGET_RESOLUTION === StreamResolution.DIM_720P) ? 'android' : 'windows';
             body.settings.osName = osName;
         }
 
@@ -146,7 +147,7 @@ class XcloudInterceptor {
         }
 
         // Touch controller for all games
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === StreamTouchController.ALL) {
             const titleInfo = STATES.currentStream.titleInfo;
             if (titleInfo?.details.hasTouchSupport) {
                 TouchController.disable();

src/utils/xhome-interceptor.ts

@@ -1,14 +1,16 @@
 import { RemotePlay } from "@/modules/remote-play";
 import { TouchController } from "@/modules/touch-controller";
 import { BxEvent } from "./bx-event";
-import { InputType } from "./bx-exposed";
+import { SupportedInputType } from "./bx-exposed";
 import { NATIVE_FETCH } from "./bx-flags";
 import { STATES } from "./global";
-import { getPref, PrefKey } from "./preferences";
 import { patchIceCandidates } from "./network";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
+import type { RemotePlayConsoleAddresses } from "@/types/network";
 
 export class XhomeInterceptor {
-    static #consoleAddrs: {[index: string]: number} = {};
+    static #consoleAddrs: RemotePlayConsoleAddresses = {};
 
     static async #handleLogin(request: Request) {
         try {
@@ -38,17 +40,25 @@ export class XhomeInterceptor {
         const obj = await response.clone().json()
         console.log(obj);
 
+        const processPorts = (port: number): number[] => {
+            const ports = new Set<number>();
+            ports.add(port);
+            ports.add(9002);
+
+            return Array.from(ports);
+        };
+
         const serverDetails = obj.serverDetails;
         if (serverDetails.ipAddress) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = serverDetails.port;
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipAddress] = processPorts(serverDetails.port);
         }
 
         if (serverDetails.ipV4Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = serverDetails.ipV4Port;
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipV4Address] = processPorts(serverDetails.ipV4Port);
         }
 
         if (serverDetails.ipV6Address) {
-            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = serverDetails.ipV6Port;
+            XhomeInterceptor.#consoleAddrs[serverDetails.ipV6Address] = processPorts(serverDetails.ipV6Port);
         }
 
         response.json = () => Promise.resolve(obj);
@@ -60,21 +70,21 @@ export class XhomeInterceptor {
     static async #handleInputConfigs(request: Request | URL, opts: {[index: string]: any}) {
         const response = await NATIVE_FETCH(request);
 
-        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'all') {
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== StreamTouchController.ALL) {
             return response;
         }
 
         const obj = await response.clone().json() as any;
 
         const xboxTitleId = JSON.parse(opts.body).titleIds[0];
-        STATES.currentStream.xboxTitleId = xboxTitleId;
+        TouchController.setXboxTitleId(xboxTitleId);
 
         const inputConfigs = obj[0];
 
         let hasTouchSupport = inputConfigs.supportedTabs.length > 0;
         if (!hasTouchSupport) {
             const supportedInputTypes = inputConfigs.supportedInputTypes;
-            hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY);
+            hasTouchSupport = supportedInputTypes.includes(SupportedInputType.NATIVE_TOUCH) || supportedInputTypes.includes(SupportedInputType.CUSTOM_TOUCH_OVERLAY);
         }
 
         if (hasTouchSupport) {
@@ -85,7 +95,7 @@ export class XhomeInterceptor {
             });
         } else {
             TouchController.enable();
-            TouchController.getCustomLayouts(xboxTitleId);
+            TouchController.requestCustomLayouts(xboxTitleId);
         }
 
         response.json = () => Promise.resolve(obj);
@@ -140,7 +150,7 @@ export class XhomeInterceptor {
 
         // Patch resolution
         const deviceInfo = RemotePlay.BASE_DEVICE_INFO;
-        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === '720p') {
+        if (getPref(PrefKey.REMOTE_PLAY_RESOLUTION) === StreamResolution.DIM_720P) {
             deviceInfo.dev.os.name = 'android';
         }
 

src/web-components/bx-select.ts

@@ -1,3 +1,6 @@
+import type { NavigationElement } from "@/modules/ui/dialog/navigation-dialog";
+import { BxEvent } from "@/utils/bx-event";
+import type { BxSelectSettingElement } from "@/utils/setting-element";
 import { ButtonStyle, CE, createButton } from "@utils/html";
 
 export class BxSelectElement {
@@ -8,22 +11,17 @@ export class BxSelectElement {
         const $btnPrev = createButton({
             label: '<',
             style: ButtonStyle.FOCUSABLE,
-            attributes: {
-                tabindex: 0,
-            },
         });
 
         const $btnNext = createButton({
             label: '>',
             style: ButtonStyle.FOCUSABLE,
-            attributes: {
-                tabindex: 0,
-            },
         });
 
         const isMultiple = $select.multiple;
         let $checkBox: HTMLInputElement;
         let $label: HTMLElement;
+        let visibleIndex = $select.selectedIndex;
 
         let $content;
 
@@ -41,10 +39,10 @@ export class BxSelectElement {
             });
 
             $checkBox.addEventListener('input', e => {
-                const $option = getOptionAtIndex($select.selectedIndex);
+                const $option = getOptionAtIndex(visibleIndex);
                 $option && ($option.selected = (e.target as HTMLInputElement).checked);
 
-                $select.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($select, 'input');
             });
         } else {
             $content = CE('div', {},
@@ -57,11 +55,13 @@ export class BxSelectElement {
             return options[index];
         }
 
-        const render = () => {
+        const render = (e?: Event) => {
             // console.log('options', this.options, 'selectedIndices', this.selectedIndices, 'selectedOptions', this.selectedOptions);
+            if (e && (e as any).manualTrigger) {
+                visibleIndex = $select.selectedIndex;
+            }
 
-            const visibleIndex = normalizeIndex($select.selectedIndex);
-
+            visibleIndex = normalizeIndex(visibleIndex);
             const $option = getOptionAtIndex(visibleIndex);
             let content = '';
             if ($option) {
@@ -94,10 +94,11 @@ export class BxSelectElement {
             const disableNext = visibleIndex === $select.querySelectorAll('option').length - 1;
 
             $btnPrev.classList.toggle('bx-inactive', disablePrev);
-            // disablePrev && document.activeElement === $btnPrev && $btnNext.focus();
-
             $btnNext.classList.toggle('bx-inactive', disableNext);
-            // disableNext && document.activeElement === $btnNext &&$btnPrev.focus();
+
+            // Focus the other button when reaching the beginning/end
+            disablePrev && !disableNext && document.activeElement === $btnPrev && $btnNext.focus();
+            disableNext && !disablePrev && document.activeElement === $btnNext && $btnPrev.focus();
         }
 
         const normalizeIndex = (index: number): number => {
@@ -105,20 +106,29 @@ export class BxSelectElement {
         }
 
         const onPrevNext = (e: Event) => {
-            const goNext = e.target === $btnNext;
+            if (!e.target) {
+                return;
+            }
 
-            const currentIndex = $select.selectedIndex;
+            const goNext = (e.target as any).closest('button') === $btnNext;
+
+            const currentIndex = visibleIndex;
             let newIndex = goNext ? currentIndex + 1 : currentIndex - 1;
             newIndex = normalizeIndex(newIndex);
 
+            visibleIndex = newIndex;
             if (!isMultiple && newIndex !== currentIndex) {
                 $select.selectedIndex = newIndex;
             }
 
-            $select.dispatchEvent(new Event('input'));
+            if (isMultiple) {
+                render();
+            } else {
+                BxEvent.dispatch($select, 'input');
+            }
         };
 
-        $select.addEventListener('input', e => render());
+        $select.addEventListener('input', render);
         $btnPrev.addEventListener('click', onPrevNext);
         $btnNext.addEventListener('click', onPrevNext);
 
@@ -138,11 +148,48 @@ export class BxSelectElement {
 
         render();
 
-        return CE('div', {class: 'bx-select'},
+        const $div = CE<NavigationElement>('div', {
+            class: 'bx-select',
+            _nearby: {
+                orientation: 'horizontal',
+                focus: $btnNext,
+            }
+        },
             $select,
             $btnPrev,
             $content,
             $btnNext,
         );
+
+        Object.defineProperty($div, 'value', {
+            get() {
+                return $select.value;
+            }
+        });
+
+        $div.addEventListener = function() {
+            // @ts-ignore
+            $select.addEventListener.apply($select, arguments);
+        };
+
+        $div.removeEventListener = function() {
+            // @ts-ignore
+            $select.removeEventListener.apply($select, arguments);
+        };
+
+        $div.dispatchEvent = function() {
+            // @ts-ignore
+            return $select.dispatchEvent.apply($select, arguments);
+        };
+
+        ($div as any).setValue = (value: any) => {
+            if ('setValue' in $select) {
+                ($select as BxSelectSettingElement).setValue(value);
+            } else {
+                $select.value = value;
+            }
+        };
+
+        return $div;
     }
 }