Bump version to 5.7.2

.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

@@ -27,6 +27,7 @@ const postProcess = (str: string): string => {
 
     // 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, '');
@@ -34,6 +35,13 @@ const postProcess = (str: string): string => {
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
 
+    // Minify SVG
+    str = str.replaceAll(/= "(<svg.*)";/g, function(match) {
+        match = match.replaceAll(/\\n*\s*/g, '');
+        return match;
+    });
+
+
     assert(str.includes('/* ADDITIONAL CODE */'));
     assert(str.includes('window.BX_EXPOSED = BxExposed'));
     assert(str.includes('window.BxEvent = BxEvent'));
@@ -84,8 +92,10 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
     // Save to script
     await Bun.write(path, scriptHeader + result);
 
-    // Create meta file
-    await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    // Create meta file (don't build if it's beta version)
+    if (!version.includes('beta')) {
+        await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    }
 
     // Check with ESLint
     const eslint = new ESLint();

dist/better-xcloud.meta.js

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

package.json

@@ -9,14 +9,14 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.6",
-    "@types/node": "^20.14.12",
+    "@types/bun": "^1.1.8",
+    "@types/node": "^22.5.2",
     "@types/stylus": "^0.48.42",
-    "eslint": "^9.8.0",
+    "eslint": "^9.9.1",
     "eslint-plugin-compat": "^6.0.0",
     "stylus": "^0.63.0"
   },
   "peerDependencies": {
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.4"
   }
 }

src/assets/css/button.styl

@@ -152,8 +152,8 @@
         bottom: offset;
     }
 
-    body[data-input-mode=Touch] &,
-    body[data-input-mode=Mouse] & {
+    html[data-active-input=touch] &,
+    html[data-active-input=mouse] & {
         &:focus::after {
             border-color: transparent !important;
         }

src/assets/css/guide-menu.styl

@@ -0,0 +1,65 @@
+.bx-guide-home-achievements-progress {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    .bx-button {
+        margin-bottom: 0 !important;
+    }
+
+    html[data-xds-platform=tv] & {
+        flex-direction: column;
+    }
+
+    html:not([data-xds-platform=tv]) & {
+        flex-direction: row;
+
+        > button:first-of-type {
+            flex: 1;
+        }
+
+        > button:last-of-type {
+            width: 40px;
+
+            span {
+                display: none;
+            }
+        }
+    }
+}
+
+.bx-guide-home-buttons {
+    > div {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+
+        html[data-xds-platform=tv] & {
+            flex-direction: column;
+
+            button {
+                margin-bottom: 0 !important;
+            }
+        }
+
+        html:not([data-xds-platform=tv]) & {
+            button {
+                span {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &[data-is-playing="true"] {
+        button[data-state='normal'] {
+            display: none;
+        }
+    }
+
+    &[data-is-playing="false"] {
+        button[data-state='playing'] {
+            display: none;
+        }
+    }
+}

src/assets/css/root.styl

@@ -26,22 +26,22 @@ button_color(name, normal, hover, active, disabled)
     button_color('primary', #008746, #04b358, #044e2a, #448262);
     button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
 
-    --bx-fullscreen-text-z-index: 9999;
-    --bx-toast-z-index: 6000;
-    --bx-dialog-z-index: 5000;
+    --bx-fullscreen-text-z-index: 99999;
+    --bx-toast-z-index: 60000;
+    --bx-dialog-z-index: 50000;
 
-    --bx-dialog-overlay-z-index: 4020;
-    --bx-stats-bar-z-index: 4010;
-    --bx-mkb-pointer-lock-msg-z-index: 4000;
+    --bx-dialog-overlay-z-index: 40200;
+    --bx-stats-bar-z-index: 40100;
+    --bx-mkb-pointer-lock-msg-z-index: 40000;
 
-    --bx-navigation-dialog-z-index: 3010;
-    --bx-navigation-dialog-overlay-z-index: 3000;
+    --bx-navigation-dialog-z-index: 30100;
+    --bx-navigation-dialog-overlay-z-index: 30000;
 
-    --bx-remote-play-popup-z-index: 2000;
+    --bx-remote-play-popup-z-index: 20000;
 
-    --bx-game-bar-z-index: 1000;
-    --bx-wait-time-box-z-index: 100;
-    --bx-screenshot-animation-z-index: 10;
+    --bx-game-bar-z-index: 10000;
+    --bx-screenshot-animation-z-index: 9000;
+    --bx-wait-time-box-z-index: 1000;
 }
 
 @font-face {
@@ -59,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;
     }
@@ -133,6 +133,13 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     text-transform: none !important;
 }
 
+.bx-normal-link {
+    text-transform: none !important;
+    text-align: left !important;
+    font-weight: 400 !important;
+    font-family: var(--bx-normal-font) !important;
+}
+
 select[multiple] {
     overflow: auto;
 }
@@ -168,16 +175,11 @@ div[class*=SupportedInputsBadge] {
     left: 0;
     z-index: 1;
     background: #0000008c;
-    display: none;
-    border-radius: 0 0 4px 0;
+    display: flex;
+    border-radius: 4px 0 4px 0;
     align-items: center;
     padding: 4px 8px;
 
-    a[class^=BaseItem-module__container]:focus &,
-    button[class^=BaseItem-module__container]:focus & {
-        display: flex;
-    }
-
     svg {
         width: 14px;
         height: 16px;
@@ -190,6 +192,7 @@ div[class*=SupportedInputsBadge] {
         line-height: 16px;
         font-size: 12px;
         font-weight: bold;
+        margin-left: 2px;
     }
 }
 
@@ -211,3 +214,17 @@ div[class*=SupportedInputsBadge] {
     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

@@ -31,6 +31,42 @@
         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: #1c9d1c;
+        text-decoration: none;
+
+        &:hover, &:focus {
+            color: #5dc21e;
+        }
+    }
 }
 
 .bx-settings-tabs-container {
@@ -245,10 +281,10 @@
 .bx-settings-row {
     display: flex;
     gap: 10px;
-    border-bottom: 1px solid #2c2c2e;
-    padding: 16px 8px;
+    padding: 16px 10px;
     margin: 0;
-    border-left: 2px solid transparent;
+    background: #2a2a2a;
+    border-bottom: 1px solid #343434;
 
     &:hover, &:focus-within {
         background-color: #242424;
@@ -258,16 +294,11 @@
         flex-wrap: wrap;
     }
 
-    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;
     }
+    */
 
     > span.bx-settings-label {
         font-size: 14px;
@@ -280,26 +311,6 @@
             margin: 0 0 0 auto;
         }
     }
-
-    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-settings-dialog-note {
@@ -333,15 +344,6 @@
     line-height: 20px;
     font-size: 14px;
     margin-top: 10px;
-    color: #5dc21e;
-
-    &:hover {
-        color: #6dd72b;
-    }
-
-    &:focus {
-        text-decoration: underline;
-    }
 }
 
 .bx-debug-info {
@@ -379,3 +381,190 @@
     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: 14px;
+    display: inline-block;
+    margin-top: 4px;
+    padding: 4px;
+}
+
+.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/styles.styl

@@ -9,6 +9,7 @@
 @import 'loading-screen.styl';
 @import 'remote-play.styl';
 @import 'web-components.styl';
+@import 'guide-menu.styl';
 
 @import 'stream.styl';
 @import 'number-stepper.styl';

src/assets/svg/power.svg

@@ -0,0 +1,3 @@
+<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='M16 2.445v12.91m7.746-11.619C27.631 6.27 30.2 10.37 30.2 15.355c0 7.79-6.41 14.2-14.2 14.2s-14.2-6.41-14.2-14.2c0-4.985 2.569-9.085 6.454-11.619'/>
+</svg>

src/assets/svg/speaker-slash.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M5.462 3.4c-.205-.23-.499-.363-.808-.363-.592 0-1.079.488-1.079 1.08a1.08 1.08 0 0 0 .289.736l4.247 4.672H2.504a2.17 2.17 0 0 0-2.16 2.16v8.637a2.17 2.17 0 0 0 2.16 2.16h6.107l9.426 7.33a1.08 1.08 0 0 0 .662.227c.592 0 1.08-.487 1.08-1.079v-6.601l5.679 6.247a1.08 1.08 0 0 0 .808.363c.592 0 1.08-.487 1.08-1.079a1.08 1.08 0 0 0-.29-.736L5.462 3.4zm-2.958 8.285h5.398v8.637H2.504v-8.637zM17.62 26.752l-7.558-5.878V11.67l7.558 8.313v6.769zm5.668-8.607c1.072-1.218 1.072-3.063 0-4.281a1.08 1.08 0 0 1-.293-.74c0-.592.487-1.079 1.079-1.079a1.08 1.08 0 0 1 .834.393 5.42 5.42 0 0 1 0 7.137 1.08 1.08 0 0 1-.81.365c-.593 0-1.08-.488-1.08-1.08 0-.263.096-.517.27-.715zM12.469 7.888c-.147-.19-.228-.423-.228-.663a1.08 1.08 0 0 1 .417-.853l5.379-4.184a1.08 1.08 0 0 1 .662-.227c.593 0 1.08.488 1.08 1.08v10.105c0 .593-.487 1.08-1.08 1.08s-1.079-.487-1.079-1.08V5.255l-3.636 2.834c-.469.362-1.153.273-1.515-.196v-.005zm19.187 8.115a10.79 10.79 0 0 1-2.749 7.199 1.08 1.08 0 0 1-.793.347c-.593 0-1.08-.487-1.08-1.079 0-.26.094-.511.264-.708 2.918-3.262 2.918-8.253 0-11.516-.184-.2-.287-.461-.287-.733 0-.592.487-1.08 1.08-1.08a1.08 1.08 0 0 1 .816.373 10.78 10.78 0 0 1 2.749 7.197z' fill-rule='nonzero'/>
+</svg>

src/assets/svg/true-achievements.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' stroke='nons' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M2.497 14.127c.781-6.01 5.542-10.849 11.551-11.708V0C6.634.858.858 6.712 0 14.127h2.497zM17.952 2.419V0C25.366.858 31.142 6.712 32 14.127h-2.497c-.781-6.01-5.542-10.849-11.551-11.708zM2.497 17.873c.781 6.01 5.542 10.849 11.551 11.708V32C6.634 31.142.858 25.288 0 17.873h2.497zm27.006 0H32C31.142 25.288 25.366 31.142 17.952 32v-2.419c6.009-.859 10.77-5.698 11.551-11.708zm-19.2-4.527h2.028a.702.702 0 1 0 0-1.404h-2.107a1.37 1.37 0 0 1-1.326-1.327V9.21a.7.7 0 0 0-.703-.703c-.387 0-.703.316-.703.7v1.408c.079 1.483 1.25 2.731 2.811 2.731zm2.809 7.337h-2.888a1.37 1.37 0 0 1-1.326-1.327v-4.917c0-.387-.316-.703-.7-.703a.7.7 0 0 0-.706.703v4.917a2.77 2.77 0 0 0 2.732 2.732h2.81c.387 0 .702-.316.702-.7.078-.393-.234-.705-.624-.705zM25.6 19.2a.7.7 0 0 0-.702-.702c-.387 0-.703.316-.703.699v.081c0 .702-.546 1.326-1.248 1.326H19.98c-.702-.078-1.248-.624-1.248-1.326v-.312c0-.78.624-1.327 1.326-1.327h2.811a2.77 2.77 0 0 0 2.731-2.732v-.312a2.68 2.68 0 0 0-2.576-2.732h-4.76a.702.702 0 1 0 0 1.405h4.526a1.37 1.37 0 0 1 1.327 1.327v.234c0 .781-.624 1.327-1.327 1.327h-2.81a2.77 2.77 0 0 0-2.731 2.732v.312a2.77 2.77 0 0 0 2.731 2.732h2.967a2.74 2.74 0 0 0 2.575-2.732s.078.078.078 0z'/>
+</svg>

src/enums/bypass-servers.ts

@@ -3,12 +3,14 @@ import { t } from "@/utils/translation"
 export const BypassServers = {
     '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/index.ts

@@ -14,7 +14,7 @@ import { Toast } from "@utils/toast";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
-import { checkForUpdate, disablePwa } from "@utils/utils";
+import { checkForUpdate, disablePwa, productTitleToSlug } from "@utils/utils";
 import { Patcher } from "@modules/patcher";
 import { RemotePlay } from "@modules/remote-play";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
@@ -22,12 +22,11 @@ import { VibrationManager } from "@modules/vibration-manager";
 import { overridePreloadState } from "@utils/preload-state";
 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 { GuideMenu } from "./modules/ui/guide-menu";
 import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
 import { UiSection } from "./enums/ui-sections";
 import { HeaderSection } from "./modules/ui/header";
@@ -35,9 +34,12 @@ 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 } from "./utils/settings-storages/global-settings-storage";
+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";
+import { UserAgent } from "./utils/user-agent";
+import { XboxApi } from "./utils/xbox-api";
 
 
 // Handle login page
@@ -70,26 +72,65 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
 .bx-reload-overlay {
     position: fixed;
     top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
     background: #000000cc;
     z-index: 9999;
-    width: 100%;
-    line-height: 100vh;
     color: #fff;
     text-align: center;
     font-weight: 400;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
 }
+
+.bx-reload-overlay *:focus {
+    outline: none !important;
+}
+
+.bx-reload-overlay > div {
+    margin: 0 auto;
+}
+
+.bx-reload-overlay a {
+    text-decoration: none;
+    display: inline-block;
+    background: #107c10;
+    color: white;
+    border-radius: 4px;
+    padding: 6px;
+}
 `);
+
+    const isSafari = UserAgent.isSafari();
+    let $secondaryAction: HTMLElement;
+    if (isSafari) {
+        $secondaryAction = CE('p', {}, t('settings-reloading'));
+    } else {
+        $secondaryAction = CE('a', {
+            href: 'https://better-xcloud.github.io/troubleshooting',
+            target: '_blank',
+        }, '🤓 ' + t('how-to-fix'));
+    }
+
     const $fragment = document.createDocumentFragment();
     $fragment.appendChild(CE('style', {}, css));
-    $fragment.appendChild(CE('div', {'class': 'bx-reload-overlay'}, t('safari-failed-message')));
+    $fragment.appendChild(CE('div',{
+        class: 'bx-reload-overlay',
+    },
+        CE('div', {},
+            CE('p', {}, t('load-failed-message')),
+            $secondaryAction,
+        ),
+    ));
 
     document.documentElement.appendChild($fragment);
 
-    // Reload the page
+    // Reload the page if using Safari
     // @ts-ignore
-    window.location.reload(true);
+    isSafari && window.location.reload(true);
 
     // Stop processing the script
     throw new Error('[Better xCloud] Executing workaround for Safari');
@@ -112,14 +153,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) && RemotePlay.preload();
     } else {
         // Show Settings button in the header when not signed in
-        HeaderSection.watchHeader();
+        window.setTimeout(HeaderSection.watchHeader, 2000);
     }
 
     // Hide "Play with Friends" skeleton section
@@ -152,20 +193,16 @@ window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
 });
 
 window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
-    HeaderSection.watchHeader();
+    STATES.isSignedIn = true;
+    window.setTimeout(HeaderSection.watchHeader, 2000);
 });
 
 window.addEventListener(BxEvent.STREAM_LOADING, e => {
     // Get title ID for screenshot's name
-    if (window.location.pathname.includes('/launch/')) {
-        const matches = /\/launch\/(?<title_id>[^\/]+)\/(?<product_id>\w+)/.exec(window.location.pathname);
-        if (matches?.groups) {
-            STATES.currentStream.titleId = matches.groups.title_id;
-            STATES.currentStream.productId = matches.groups.product_id;
-        }
+    if (window.location.pathname.includes('/launch/') && STATES.currentStream.titleInfo) {
+        STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.product.title);
     } else {
-        STATES.currentStream.titleId = 'remote-play';
-        STATES.currentStream.productId = '';
+        STATES.currentStream.titleSlug = 'remote-play';
     }
 });
 
@@ -185,7 +222,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();
@@ -207,10 +244,42 @@ window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
 window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
     const component = (e as any).component;
     if (component === 'product-details') {
-        ProductDetailsPage.injectShortcutButton();
+        ProductDetailsPage.injectButtons();
     }
 });
 
+// Detect game change
+window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
+    const dataChannel = (e as any).dataChannel;
+    if (!dataChannel || dataChannel.label !== 'message') {
+        return;
+    }
+
+    dataChannel.addEventListener('message', async (msg: MessageEvent) => {
+        if (msg.origin === 'better-xcloud' || typeof msg.data !== 'string') {
+            return;
+        }
+
+        // Get xboxTitleId from message
+        if (msg.data.includes('/titleinfo')) {
+            const json = JSON.parse(JSON.parse(msg.data).content);
+            const xboxTitleId = parseInt(json.titleid, 16);
+            STATES.currentStream.xboxTitleId = xboxTitleId;
+
+            // Get titleSlug for Remote Play
+            if (STATES.remotePlay.isPlaying) {
+                STATES.currentStream.titleSlug = 'remote-play';
+                if (json.focused) {
+                    const productTitle = await XboxApi.getProductTitle(xboxTitleId);
+                    if (productTitle) {
+                        STATES.currentStream.titleSlug = productTitleToSlug(productTitle);
+                    }
+                }
+            }
+        }
+    });
+});
+
 function unload() {
     if (!STATES.isPlaying) {
         return;
@@ -247,7 +316,7 @@ window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
 
 
 function observeRootDialog($root: HTMLElement) {
-    let currentShown = false;
+    let beingShown = false;
 
     const observer = new MutationObserver(mutationList => {
         for (const mutation of mutationList) {
@@ -255,31 +324,20 @@ function observeRootDialog($root: HTMLElement) {
                 continue;
             }
 
+            BX_FLAGS.Debug && BxLogger.warning('RootDialog', 'added', mutation.addedNodes);
             if (mutation.addedNodes.length === 1) {
                 const $addedElm = mutation.addedNodes[0];
                 if ($addedElm instanceof HTMLElement && $addedElm.className) {
-                    if ($addedElm.className.startsWith('NavigationAnimation') || $addedElm.className.startsWith('DialogRoutes') || $addedElm.className.startsWith('Dialog-module__container')) {
-                        // Make sure it's Guide dialog
-                        if (document.querySelector('#gamepass-dialog-root div[class*=GuideDialog]')) {
-                            // Find navigation bar
-                            const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true');
-                            if ($selectedTab) {
-                                let $elm: Element | null = $selectedTab;
-                                let index;
-                                for (index = 0; ($elm = $elm?.previousElementSibling); index++);
-
-                                if (index === 0) {
-                                    BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_MENU_SHOWN, {where: GuideMenuTab.HOME});
-                                }
-                            }
-                        }
+                    // Make sure it's Guide dialog
+                    if ($root.querySelector('div[class*=GuideDialog]')) {
+                        GuideMenu.observe($addedElm);
                     }
                 }
             }
 
-            const shown = ($root.firstElementChild && $root.firstElementChild.childElementCount > 0) || false;
-            if (shown !== currentShown) {
-                currentShown = shown;
+            const shown = !!($root.firstElementChild && $root.firstElementChild.childElementCount > 0);
+            if (shown !== beingShown) {
+                beingShown = shown;
                 BxEvent.dispatch(window, shown ? BxEvent.XCLOUD_DIALOG_SHOWN : BxEvent.XCLOUD_DIALOG_DISMISSED);
             }
         }
@@ -338,7 +396,7 @@ function main() {
     (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
     Screenshot.setup();
 
-    GuideMenu.observe();
+    GuideMenu.addEventListeners();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
     EmulatedMkbHandler.setupEvents();
@@ -358,7 +416,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

@@ -14,6 +14,6 @@ export const renderStylus = async () => {
 };
 
 
-export const compressCss = async (css: string) => {
-    return await (stylus(css, {}).set('compress', true)).render();
+export const compressCss = (css: string) => {
+    return (stylus(css, {}).set('compress', true)).render();
 };

src/modules/controller-shortcut.ts

@@ -1,7 +1,7 @@
 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";
@@ -174,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;

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

@@ -1,7 +1,6 @@
 import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
 import { createButton, ButtonStyle, CE } from "@utils/html";
-import { t } from "@utils/translation";
 import { BaseGameBarAction } from "./action-base";
 import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-microphone";
 
@@ -15,16 +14,15 @@ export class MicrophoneAction extends BaseGameBarAction {
         super();
 
         const onClick = (e: Event) => {
-                BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
 
-                const enabled = MicrophoneShortcut.toggle(false);
-                this.$content.setAttribute('data-enabled', enabled.toString());
-            };
+            const enabled = MicrophoneShortcut.toggle(false);
+            this.$content.setAttribute('data-enabled', enabled.toString());
+        };
 
         const $btnDefault = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.MICROPHONE,
-            title: t('show-touch-controller'),
             onClick: onClick,
             classes: ['bx-activated'],
         });
@@ -32,7 +30,6 @@ export class MicrophoneAction extends BaseGameBarAction {
         const $btnMuted = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.MICROPHONE_MUTED,
-            title: t('hide-touch-controller'),
             onClick: onClick,
         });
 

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

@@ -12,16 +12,16 @@ export class ScreenshotAction extends BaseGameBarAction {
         super();
 
         const onClick = (e: Event) => {
-                BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-                Screenshot.takeScreenshot();
-            };
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            Screenshot.takeScreenshot();
+        };
 
         this.$content = createButton({
-                style: ButtonStyle.GHOST,
-                icon: BxIcon.SCREENSHOT,
-                title: t('take-screenshot'),
-                onClick: onClick,
-            });
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.SCREENSHOT,
+            title: t('take-screenshot'),
+            onClick: onClick,
+        });
     }
 
     render(): HTMLElement {

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

@@ -0,0 +1,54 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BaseGameBarAction } from "./action-base";
+import { SoundShortcut, SpeakerState } from "../shortcuts/shortcut-sound";
+
+
+export class SpeakerAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            SoundShortcut.muteUnmute();
+        };
+
+        const $btnEnable = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.AUDIO,
+            onClick: onClick,
+        });
+
+        const $btnMuted = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.SPEAKER_MUTED,
+            onClick: onClick,
+            classes: ['bx-activated'],
+        });
+
+        this.$content = CE('div', {},
+            $btnEnable,
+            $btnMuted,
+        );
+
+        this.reset();
+
+        window.addEventListener(BxEvent.SPEAKER_STATE_CHANGED, e => {
+            const speakerState = (e as any).speakerState;
+            const enabled = speakerState === SpeakerState.ENABLED;
+
+            this.$content.dataset.enabled = enabled.toString();
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.$content.dataset.enabled = 'true';
+    }
+}

src/modules/game-bar/action-touch-control.ts

@@ -26,7 +26,6 @@ export class TouchControlAction extends BaseGameBarAction {
             icon: BxIcon.TOUCH_CONTROL_ENABLE,
             title: t('show-touch-controller'),
             onClick: onClick,
-            classes: ['bx-activated'],
         });
 
         const $btnDisable = createButton({
@@ -34,6 +33,7 @@ export class TouchControlAction extends BaseGameBarAction {
             icon: BxIcon.TOUCH_CONTROL_DISABLE,
             title: t('hide-touch-controller'),
             onClick: onClick,
+            classes: ['bx-activated'],
         });
 
         this.$content = CE('div', {},

src/modules/game-bar/action-true-achievements.ts

@@ -0,0 +1,30 @@
+import { BxEvent } from "@/utils/bx-event";
+import { BxIcon } from "@/utils/bx-icon";
+import { createButton, ButtonStyle } from "@/utils/html";
+import { t } from "@/utils/translation";
+import { BaseGameBarAction } from "./action-base";
+import { TrueAchievements } from "@/utils/true-achievements";
+
+export class TrueAchievementsAction extends BaseGameBarAction {
+    $content: HTMLElement;
+
+    constructor() {
+        super();
+
+        const onClick = (e: Event) => {
+            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+            TrueAchievements.open(false);
+        };
+
+        this.$content = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.TRUE_ACHIEVEMENTS,
+            title: t('true-achievements'),
+            onClick: onClick,
+        });
+    }
+
+    render(): HTMLElement {
+        return this.$content;
+    }
+}

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

@@ -1,4 +1,4 @@
-import { CE, createSvgIcon } from "@utils/html";
+import { CE, clearFocus, createSvgIcon } from "@utils/html";
 import { ScreenshotAction } from "./action-screenshot";
 import { TouchControlAction } from "./action-touch-control";
 import { BxEvent } from "@utils/bx-event";
@@ -7,12 +7,13 @@ import type { BaseGameBarAction } from "./action-base";
 import { STATES } from "@utils/global";
 import { MicrophoneAction } from "./action-microphone";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { getPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
+import { TrueAchievementsAction } from "./action-true-achievements";
+import { SpeakerAction } from "./action-speaker";
 
 
 export class GameBar {
     private static instance: GameBar;
-
     public static getInstance(): GameBar {
         if (!GameBar.instance) {
             GameBar.instance = new GameBar();
@@ -42,8 +43,10 @@ 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 SpeakerAction(),
             new MicrophoneAction(),
+            new TrueAchievementsAction(),
         ];
 
         // Reverse the action list if Game Bar's position is on the right side
@@ -93,7 +96,7 @@ export class GameBar {
 
             // Toggle Game bar
             const mode = (e as any).mode;
-            mode !== 'None' ? this.disable() : this.enable();
+            mode !== 'none' ? this.disable() : this.enable();
         }).bind(this));
     }
 
@@ -125,13 +128,16 @@ export class GameBar {
             return;
         }
 
-        this.$container.classList.remove('bx-offscreen', 'bx-hide');
+        this.$container.classList.remove('bx-offscreen', 'bx-hide' , 'bx-gone');
         this.$container.classList.add('bx-show');
 
         this.beginHideTimeout();
     }
 
     hideBar() {
+        // Stop focusing Game Bar
+        clearFocus();
+
         if (!this.$container) {
             return;
         }

src/modules/loading-screen.ts

@@ -4,6 +4,7 @@ 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";
+import { compressCss } from "@macros/build" with {type: "macro"};
 
 export class LoadingScreen {
     static #$bgStyle: HTMLElement;
@@ -43,7 +44,7 @@ export class LoadingScreen {
     static #hideRocket() {
         let $bgStyle = LoadingScreen.#$bgStyle;
 
-        const css = `
+        const css = compressCss(`
 #game-stream div[class*=RocketAnimation-module__container] > svg {
     display: none;
 }
@@ -51,8 +52,8 @@ export class LoadingScreen {
 #game-stream video[class*=RocketAnimationVideo-module__video] {
     display: none;
 }
-`;
-        $bgStyle.textContent += css;
+`);
+        $bgStyle.textContent! += css;
     }
 
     static #setBackground(imageUrl: string) {
@@ -62,9 +63,8 @@ export class LoadingScreen {
         // Limit max width to reduce image size
         imageUrl = imageUrl + '?w=1920';
 
-        const css = `
+        const css = compressCss(`
 #game-stream {
-    background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;
     background-color: transparent !important;
     background-position: center center !important;
     background-repeat: no-repeat !important;
@@ -74,16 +74,16 @@ export class LoadingScreen {
 #game-stream rect[width="800"] {
     transition: opacity 0.3s ease-in-out !important;
 }
-`;
-        $bgStyle.textContent += css;
+`) + `#game-stream {background-image: linear-gradient(#00000033, #000000e6), url(${imageUrl}) !important;}`;
+        $bgStyle.textContent! += css;
 
         const bg = new Image();
         bg.onload = e => {
-            $bgStyle.textContent += `
+            $bgStyle.textContent += compressCss(`
 #game-stream rect[width="800"] {
     opacity: 0 !important;
 }
-`;
+`);
         };
         bg.src = imageUrl;
     }
@@ -150,18 +150,18 @@ export class LoadingScreen {
         if (getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && LoadingScreen.#$bgStyle) {
             const $rocketBg = document.querySelector('#game-stream rect[width="800"]');
             $rocketBg && $rocketBg.addEventListener('transitionend', e => {
-                LoadingScreen.#$bgStyle.textContent += `
+                LoadingScreen.#$bgStyle.textContent += compressCss(`
 #game-stream {
     background: #000 !important;
 }
-`;
+`);
             });
 
-            LoadingScreen.#$bgStyle.textContent += `
+            LoadingScreen.#$bgStyle.textContent += compressCss(`
 #game-stream rect[width="800"] {
     opacity: 1 !important;
 }
-`;
+`);
         }
 
         setTimeout(LoadingScreen.reset, 2000);

src/modules/mkb/mkb-handler.ts

@@ -459,7 +459,7 @@ export class EmulatedMkbHandler extends MkbHandler {
         }
 
         const mode = (e as any).mode;
-        if (mode === 'None') {
+        if (mode === 'none') {
             this.#$message.classList.remove('bx-offscreen');
         } else {
             this.#$message.classList.add('bx-offscreen');

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

@@ -69,7 +69,7 @@ export class NativeMkbHandler extends MkbHandler {
         }
 
         const mode = (e as any).mode;
-        if (mode === 'None') {
+        if (mode === 'none') {
             this.#$message.classList.remove('bx-offscreen');
         } else {
             this.#$message.classList.add('bx-offscreen');

src/modules/patcher.ts

@@ -15,13 +15,40 @@ import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "te
 import { FeatureGates } from "@/utils/feature-gates.js";
 import { UiSection } from "@/enums/ui-sections.js";
 import { PrefKey } from "@/enums/pref-keys.js";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+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 = {
@@ -33,11 +60,11 @@ const PATCHES = {
             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
@@ -365,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;
 
@@ -385,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;
 }
 `;
 
@@ -423,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;';
         }
 
@@ -438,7 +465,7 @@ e.guideUI = null;
         }
 
         const newCode = `
-BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
+BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e.toLowerCase()});
 `;
         str = str.replace(text, text + newCode);
         return str;
@@ -716,12 +743,12 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('return', index - 50);
+        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;
     },
 
@@ -732,14 +759,17 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('grid:!0,', index);
-        index > -1 && (index = str.indexOf('(0,', index - 70));
-
+        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;
     },
 
@@ -750,12 +780,12 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('const ', index - 100);
+        index = PatcherUtils.lastIndexOf(str, 'const ', index, 30);
         if (index < 0) {
             return false;
         }
 
-        str = str.substring(0, index) + 'return null;' + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, 'return null;');
         return str;
     },
 
@@ -766,7 +796,7 @@ true` + text;
             return false;
         }
 
-        index = str.indexOf('const[', index - 300);
+        index = PatcherUtils.lastIndexOf(str, 'const[', index, 300);
         if (index < 0) {
             return false;
         }
@@ -774,7 +804,7 @@ true` + text;
         const PREF_HIDE_SECTIONS = getPref(PrefKey.UI_HIDE_SECTIONS) as UiSection[];
         const siglIds: GamePassCloudGallery[] = [];
 
-        const sections: Partial<Record<UiSection, GamePassCloudGallery>> = {
+        const sections: PartialRecord<UiSection, GamePassCloudGallery> = {
             [UiSection.NATIVE_MKB]: GamePassCloudGallery.NATIVE_MKB,
             [UiSection.MOST_POPULAR]: GamePassCloudGallery.MOST_POPULAR,
         };
@@ -794,7 +824,7 @@ if (e && e.id) {
     }
 }
 `;
-        str = str.substring(0, index) + newCode + str.substring(index);
+        str = PatcherUtils.insertAt(str, index, newCode);
         return str;
     },
 
@@ -862,6 +892,26 @@ if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
         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 = [
@@ -872,6 +922,7 @@ let PATCH_ORDERS: PatchArray = [
         'exposeInputSink',
     ] : []),
 
+    'detectBrowserRouterReady',
     'patchRequestInfoCrash',
 
     'disableStreamGate',
@@ -940,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',
     ] : []),
@@ -1067,7 +1118,7 @@ export class Patcher {
                     item[1][id] = eval(patchedFuncStr);
                 } catch (e: unknown) {
                     if (e instanceof Error) {
-                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message);
+                        BxLogger.error(LOG_TAG, 'Error', appliedPatches, e.message, patchedFuncStr);
                     }
                 }
             }

src/modules/player/webgl2-player.ts

@@ -124,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/shortcuts/shortcut-sound.ts

@@ -4,6 +4,12 @@ import { Toast } from "@utils/toast";
 import { ceilToNearest, floorToNearest } from "@/utils/utils";
 import { PrefKey } from "@/enums/pref-keys";
 import { getPref, setPref } from "@/utils/settings-storages/global-settings-storage";
+import { BxEvent } from "@/utils/bx-event";
+
+export enum SpeakerState {
+    ENABLED,
+    MUTED,
+}
 
 export class SoundShortcut {
     static adjustGainNodeVolume(amount: number): number {
@@ -64,6 +70,10 @@ export class SoundShortcut {
 
             SoundShortcut.setGainNodeVolume(targetValue);
             Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+
+            BxEvent.dispatch(window, BxEvent.SPEAKER_STATE_CHANGED, {
+                speakerState: targetValue === 0 ? SpeakerState.MUTED : SpeakerState.ENABLED,
+            })
             return;
         }
 
@@ -79,6 +89,10 @@ export class SoundShortcut {
 
             const status = $media.muted ? t('muted') : t('unmuted');
             Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+
+            BxEvent.dispatch(window, BxEvent.SPEAKER_STATE_CHANGED, {
+                speakerState: $media.muted ? SpeakerState.MUTED : SpeakerState.ENABLED,
+            })
         }
     }
 }

src/modules/stream/stream-ui.ts

@@ -8,212 +8,271 @@ import { StreamStats } from "./stream-stats.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();
 
-                    // 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('better-xcloud'), BxIcon.BETTER_XCLOUD);
-                    $btnStreamSettings.addEventListener('click', e => {
-                        hideGripHandle();
-                        e.preventDefault();
-
-                        // Show Stream Settings dialog
-                        SettingsNavigationDialog.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/ui/dialog/navigation-dialog.ts

@@ -2,7 +2,7 @@ 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 } from "@/utils/html";
+import { CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
 
 export enum NavigationDirection {
@@ -519,11 +519,8 @@ export class NavigationDialogManager {
             return null;
         }
 
-        const rect = $elm.getBoundingClientRect();
-        const isVisible = !!rect.width && !!rect.height;
-
         // Ignore hidden element
-        if (!isVisible) {
+        if (!isElementVisible($elm)) {
             return null;
         }
 
@@ -547,7 +544,7 @@ export class NavigationDialogManager {
         const children = Array.from($elm.children);
 
         // Search from right to left if the orientation is horizontal
-        const orientation = ($elm as NavigationElement).nearby?.orientation;
+        const orientation = ($elm as NavigationElement).nearby?.orientation || 'vertical';
         if (orientation === 'horizontal' || (orientation === 'vertical' && direction === NavigationDirection.UP)) {
             children.reverse();
         }

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

@@ -1,5 +1,5 @@
 import { onChangeVideoPlayerType, updateVideoPlayer } from "@/modules/stream/stream-settings-utils";
-import { ButtonStyle, CE, createButton, createSvgIcon } from "@/utils/html";
+import { ButtonStyle, CE, createButton, createSvgIcon, removeChildElements } from "@/utils/html";
 import { NavigationDialog, NavigationDirection } from "./navigation-dialog";
 import { ControllerShortcut } from "@/modules/controller-shortcut";
 import { MkbRemapper } from "@/modules/mkb/mkb-remapper";
@@ -17,13 +17,13 @@ import { setNearby } from "@/utils/navigation-utils";
 import { PatcherCache } from "@/modules/patcher";
 import { UserAgentProfile } from "@/enums/user-agent";
 import { UserAgent } from "@/utils/user-agent";
-import { BX_FLAGS } from "@/utils/bx-flags";
+import { BX_FLAGS, NATIVE_FETCH } from "@/utils/bx-flags";
 import { copyToClipboard } from "@/utils/utils";
 import { GamepadKey } from "@/enums/mkb";
 import { PrefKey, StorageKey } from "@/enums/pref-keys";
-import { getPref, getPrefDefinition, setPref } from "@/utils/settings-storages/global-settings-storage";
-import { SettingElement } from "@/utils/setting-element";
-import type { SettingDefinition } from "@/types/setting-definition";
+import { ControllerDeviceVibration, getPref, getPrefDefinition, setPref, StreamTouchController } from "@/utils/settings-storages/global-settings-storage";
+import { SettingElement, type BxHtmlSettingElement } from "@/utils/setting-element";
+import type { RecommendedSettings, SettingDefinition, SuggestedSettingCategory as SuggestedSettingProfile } from "@/types/setting-definition";
 import { FullscreenText } from "../fullscreen-text";
 
 
@@ -72,9 +72,19 @@ export class SettingsNavigationDialog extends NavigationDialog {
     private $btnReload!: HTMLElement;
     private $btnGlobalReload!: HTMLButtonElement;
     private $noteGlobalReload!: HTMLElement;
+    private $btnSuggestion!: HTMLButtonElement;
 
     private renderFullSettings: boolean;
 
+    private suggestedSettings: Record<SuggestedSettingProfile, PartialRecord<PrefKey, any>> = {
+        recommended: {},
+        default: {},
+        lowest: {},
+        highest: {},
+    };
+    private suggestedSettingLabels: PartialRecord<PrefKey, string> = {};
+    private settingElements: PartialRecord<PrefKey, HTMLElement> = {};
+
     private readonly TAB_GLOBAL_ITEMS: Array<SettingTabContent | false> = [{
         group: 'general',
         label: t('better-xcloud'),
@@ -135,6 +145,17 @@ export class SettingsNavigationDialog extends NavigationDialog {
                 }, t('settings-reload-note'));
                 topButtons.push(this.$noteGlobalReload);
 
+                // Suggestion
+                this.$btnSuggestion = CE('div', {
+                    class: 'bx-suggest-toggler bx-focusable',
+                    tabindex: 0,
+                }, CE('label', {}, t('suggest-settings')),
+                    CE('span', {}, '❯'),
+                );
+                this.$btnSuggestion.addEventListener('click', this.renderSuggestions.bind(this));
+
+                topButtons.push(this.$btnSuggestion);
+
                 // Add buttons to parent
                 const $div = CE('div', {
                     class: 'bx-top-buttons',
@@ -176,12 +197,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
             PrefKey.STREAM_COMBINE_SOURCES,
         ],
-    }, {
-        group: 'game-bar',
-        label: t('game-bar'),
-        items: [
-            PrefKey.GAME_BAR_POSITION,
-        ],
     }, {
         group: 'co-op',
         label: t('local-co-op'),
@@ -208,14 +223,6 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
         ],
-    }, {
-        group: 'loading-screen',
-        label: t('loading-screen'),
-        items: [
-            PrefKey.UI_LOADING_SCREEN_GAME_ART,
-            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
-            PrefKey.UI_LOADING_SCREEN_ROCKET,
-        ],
     }, {
         group: 'ui',
         label: t('ui'),
@@ -232,6 +239,20 @@ export class SettingsNavigationDialog extends NavigationDialog {
             PrefKey.BLOCK_SOCIAL_FEATURES,
             PrefKey.UI_HIDE_SECTIONS,
         ],
+    }, {
+        group: 'game-bar',
+        label: t('game-bar'),
+        items: [
+            PrefKey.GAME_BAR_POSITION,
+        ],
+    }, {
+        group: 'loading-screen',
+        label: t('loading-screen'),
+        items: [
+            PrefKey.UI_LOADING_SCREEN_GAME_ART,
+            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
+            PrefKey.UI_LOADING_SCREEN_ROCKET,
+        ],
     }, {
         group: 'other',
         label: t('other'),
@@ -306,7 +327,10 @@ export class SettingsNavigationDialog extends NavigationDialog {
                         label: 'Debug info',
                         style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
                         onClick: e => {
-                            (e.target as HTMLElement).closest('button')?.nextElementSibling?.classList.toggle('bx-gone');
+                            const $pre = (e.target as HTMLElement).closest('button')?.nextElementSibling!;
+
+                            $pre.classList.toggle('bx-gone');
+                            $pre.scrollIntoView();
                         },
                     }),
                     CE('pre', {
@@ -617,6 +641,291 @@ export class SettingsNavigationDialog extends NavigationDialog {
         window.location.reload();
     }
 
+    private async getRecommendedSettings(deviceCode: string): Promise<string | null> {
+        // Get recommended settings from GitHub
+        try {
+            const response = await NATIVE_FETCH(`https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/devices/${deviceCode.toLowerCase()}.json`);
+            const json = (await response.json()) as RecommendedSettings;
+            const recommended: PartialRecord<PrefKey, any> = {};
+
+            // Only supports schema version 1
+            if (json.schema_version !== 1) {
+                return null;
+            }
+
+            const scriptSettings = json.settings.script;
+
+            // Set base settings
+            if (scriptSettings._base) {
+                let base = typeof scriptSettings._base === 'string' ? [scriptSettings._base] : scriptSettings._base;
+                for (const profile of base) {
+                    Object.assign(recommended, this.suggestedSettings[profile]);
+                }
+
+                delete scriptSettings._base;
+            }
+
+            // Override settings
+            let key: Exclude<keyof typeof scriptSettings, '_base'>;
+            // @ts-ignore
+            for (key in scriptSettings) {
+                recommended[key] = scriptSettings[key];
+            }
+
+            // Update device type in BxFlags
+            BX_FLAGS.DeviceInfo.deviceType = json.device_type;
+
+            this.suggestedSettings.recommended = recommended;
+
+            return json.device_name;
+        } catch (e) {}
+
+        return null;
+    }
+
+    private addDefaultSuggestedSetting(prefKey: PrefKey, value: any) {
+        let key: keyof typeof this.suggestedSettings;
+        for (key in this.suggestedSettings) {
+            if (key !== 'default' && !(prefKey in this.suggestedSettings)) {
+                this.suggestedSettings[key][prefKey] = value;
+            }
+        }
+    }
+
+    private generateDefaultSuggestedSettings() {
+        let key: keyof typeof this.suggestedSettings;
+        for (key in this.suggestedSettings) {
+            if (key === 'default') {
+                continue;
+            }
+
+            let prefKey: PrefKey;
+            for (prefKey in this.suggestedSettings[key]) {
+                if (!(prefKey in this.suggestedSettings.default)) {
+                    this.suggestedSettings.default[prefKey] = getPrefDefinition(prefKey).default;
+                }
+            }
+        }
+    }
+
+    private async renderSuggestions(e: Event) {
+        const $btnSuggest = (e.target as HTMLElement).closest('div')!;
+        $btnSuggest.toggleAttribute('bx-open');
+
+        let $content = $btnSuggest.nextElementSibling as HTMLElement;
+        if ($content) {
+            BxEvent.dispatch($content.querySelector('select'), 'input');
+            return;
+        }
+
+        // Get labels
+        for (const settingTab of this.SETTINGS_UI) {
+            if (!settingTab || !settingTab.items) {
+                continue;
+            }
+
+            for (const settingTabContent of settingTab.items) {
+                if (!settingTabContent || !settingTabContent.items) {
+                    continue;
+                }
+
+                for (const setting of settingTabContent.items) {
+                    let prefKey: PrefKey | undefined;
+
+                    if (typeof setting === 'string') {
+                        prefKey = setting;
+                    } else if (typeof setting === 'object') {
+                        prefKey = setting.pref as PrefKey;
+                    }
+
+                    if (prefKey) {
+                        this.suggestedSettingLabels[prefKey] = settingTabContent.label;
+                    }
+                }
+            }
+        }
+
+        // Get recommended settings for Android devices
+        let recommendedDevice: string | null = '';
+
+        if (BX_FLAGS.DeviceInfo.deviceType.includes('android')) {
+            if (BX_FLAGS.DeviceInfo.androidInfo) {
+                const deviceCode = BX_FLAGS.DeviceInfo.androidInfo.board;
+                recommendedDevice = await this.getRecommendedSettings(deviceCode);
+            }
+        }
+        // recommendedDevice = await this.getRecommendedSettings('foster_e');
+
+        const hasRecommendedSettings = Object.keys(this.suggestedSettings.recommended).length > 0;
+
+        // Add some specific setings based on device type
+        const deviceType = BX_FLAGS.DeviceInfo.deviceType;
+        if (deviceType === 'android-handheld') {
+            // Disable touch
+            this.addDefaultSuggestedSetting(PrefKey.STREAM_TOUCH_CONTROLLER, StreamTouchController.OFF);
+            // Enable device vibration
+            this.addDefaultSuggestedSetting(PrefKey.CONTROLLER_DEVICE_VIBRATION, ControllerDeviceVibration.ON);
+        } else if (deviceType === 'android') {
+            // Enable device vibration
+            this.addDefaultSuggestedSetting(PrefKey.CONTROLLER_DEVICE_VIBRATION, ControllerDeviceVibration.AUTO);
+        } else if (deviceType === 'android-tv') {
+            // Disable touch
+            this.addDefaultSuggestedSetting(PrefKey.STREAM_TOUCH_CONTROLLER, StreamTouchController.OFF);
+        }
+
+        // Set value for Default profile
+        this.generateDefaultSuggestedSettings();
+
+        // Start rendering
+        const $suggestedSettings = CE('div', {class: 'bx-suggest-wrapper'});
+        const $select = CE<HTMLSelectElement>('select', {},
+            hasRecommendedSettings && CE('option', {value: 'recommended'}, t('recommended')),
+            !hasRecommendedSettings && CE('option', {value: 'highest'}, t('highest-quality')),
+            CE('option', {value: 'default'}, t('default')),
+            CE('option', {value: 'lowest'}, t('lowest-quality')),
+        );
+        $select.addEventListener('input', e => {
+            const profile = $select.value as SuggestedSettingProfile;
+
+            // Empty children
+            removeChildElements($suggestedSettings);
+            const fragment = document.createDocumentFragment();
+
+            let note: HTMLElement | string | undefined;
+            if (profile === 'recommended') {
+                note = t('recommended-settings-for-device', {device: recommendedDevice});
+            } else if (profile === 'highest') {
+                // Add note for "Highest quality" profile
+                note = '⚠️ ' + t('highest-quality-note');
+            }
+
+            note && fragment.appendChild(CE('div', {class: 'bx-suggest-note'}, note));
+
+            const settings = this.suggestedSettings[profile];
+            let prefKey: PrefKey;
+            for (prefKey in settings) {
+                const currentValue = getPref(prefKey, false);
+                const suggestedValue = settings[prefKey];
+                const currentValueText = STORAGE.Global.getValueText(prefKey, currentValue);
+                const isSameValue = currentValue === suggestedValue;
+
+                let $child: HTMLElement;
+                let $value: HTMLElement | string;
+                if (isSameValue) {
+                    // No changes
+                    $value = currentValueText;
+                } else {
+                    const suggestedValueText = STORAGE.Global.getValueText(prefKey, suggestedValue);
+                    $value = currentValueText + ' ➔ ' + suggestedValueText;
+                }
+
+                let $checkbox: HTMLInputElement;
+                const breadcrumb = this.suggestedSettingLabels[prefKey] + ' ❯ ' + STORAGE.Global.getLabel(prefKey);
+
+                $child = CE('div', {
+                    class: `bx-suggest-row ${isSameValue ? 'bx-suggest-ok' : 'bx-suggest-change'}`,
+                },
+                    $checkbox = CE('input', {
+                        type: 'checkbox',
+                        tabindex: 0,
+                        checked: true,
+                        id: `bx_suggest_${prefKey}`,
+                    }),
+                    CE('label', {
+                        for: `bx_suggest_${prefKey}`,
+                    },
+                        CE('div', {
+                            class: 'bx-suggest-label',
+                        }, breadcrumb),
+                        CE('div', {
+                            class: 'bx-suggest-value',
+                        }, $value),
+                    ),
+                );
+
+                if (isSameValue) {
+                    $checkbox.disabled = true;
+                    $checkbox.checked = true;
+                }
+
+                fragment.appendChild($child);
+            }
+
+            $suggestedSettings.appendChild(fragment);
+        });
+
+        BxEvent.dispatch($select, 'input');
+
+        const onClickApply = () => {
+            const profile = $select.value as SuggestedSettingProfile;
+            const settings = this.suggestedSettings[profile];
+
+            let prefKey: PrefKey;
+            for (prefKey in settings) {
+                const suggestedValue = settings[prefKey];
+                const $checkBox = $content.querySelector(`#bx_suggest_${prefKey}`) as HTMLInputElement;
+                if (!$checkBox.checked || $checkBox.disabled) {
+                    continue;
+                }
+
+                const $control = this.settingElements[prefKey] as HTMLElement;
+
+                // Set value directly if the control element is not available
+                if (!$control) {
+                    setPref(prefKey, suggestedValue);
+                    continue;
+                }
+
+                if ('setValue' in $control) {
+                    ($control as BxHtmlSettingElement).setValue(suggestedValue);
+                } else {
+                    ($control as HTMLInputElement).value = suggestedValue;
+                }
+
+                BxEvent.dispatch($control, 'input', {
+                    manualTrigger: true,
+                });
+            }
+
+            // Refresh suggested settings
+            BxEvent.dispatch($select, 'input');
+        };
+
+        // Apply button
+        const $btnApply = createButton({
+            label: t('apply'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: onClickApply,
+        });
+
+        $content = CE('div', {
+            class: 'bx-suggest-box',
+            _nearby: {
+                orientation: 'vertical',
+            }
+        },
+            BxSelectElement.wrap($select),
+            $suggestedSettings,
+            $btnApply,
+
+            BX_FLAGS.DeviceInfo.deviceType.includes('android') && CE('a', {
+                class: 'bx-suggest-link bx-focusable',
+                href: 'https://better-xcloud.github.io/guide/android-webview-tweaks/',
+                target: '_blank',
+                tabindex: 0,
+            }, '🤓 ' + t('how-to-improve-app-performance')),
+
+            BX_FLAGS.DeviceInfo.deviceType.includes('android') && !hasRecommendedSettings && CE('a', {
+                class: 'bx-suggest-link bx-focusable',
+                href: 'https://github.com/redphx/better-xcloud-devices',
+                target: '_blank',
+                tabindex: 0,
+            }, t('suggest-settings-link')),
+        );
+
+        $btnSuggest?.insertAdjacentElement('afterend', $content);
+    }
+
     private renderTab(settingTab: SettingTab) {
         const $svg = createSvgIcon(settingTab.icon as any);
         $svg.dataset.group = settingTab.group;
@@ -771,6 +1080,8 @@ export class SettingsNavigationDialog extends NavigationDialog {
             if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
                 $control = BxSelectElement.wrap($control);
             }
+
+            pref && (this.settingElements[pref] = $control);
         }
 
         let prefDefinition: SettingDefinition | null = null;
@@ -782,6 +1093,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
         let note = prefDefinition?.note || setting.note;
         const experimental = prefDefinition?.experimental || setting.experimental;
 
+        if (settingTabContent.label && setting.pref) {
+            if (prefDefinition?.suggest) {
+                typeof prefDefinition.suggest.lowest !== 'undefined' && (this.suggestedSettings.lowest[setting.pref] = prefDefinition.suggest.lowest);
+                typeof prefDefinition.suggest.highest !== 'undefined' && (this.suggestedSettings.highest[setting.pref] = prefDefinition.suggest.highest);
+            }
+        }
+
         // Add Experimental text
         if (experimental) {
             label = '🧪 ' + label;

src/modules/ui/game-tile.ts

@@ -1,6 +1,6 @@
 import { BxEvent } from "@/utils/bx-event";
 import { BxIcon } from "@/utils/bx-icon";
-import { CE, createSvgIcon, getReactProps } from "@/utils/html";
+import { CE, createSvgIcon, getReactProps, isElementVisible } from "@/utils/html";
 import { XcloudApi } from "@/utils/xcloud-api";
 
 export class GameTile {
@@ -23,6 +23,11 @@ export class GameTile {
     }
 
     static async #showWaitTime($elm: HTMLElement, productId: string) {
+        if (($elm as any).hasWaitTime) {
+            return;
+        }
+        ($elm as any).hasWaitTime = true;
+
         let totalWaitTime;
 
         const api = XcloudApi.getInstance();
@@ -34,7 +39,7 @@ export class GameTile {
             }
         }
 
-        if (typeof totalWaitTime === 'number' && $elm.isConnected) {
+        if (typeof totalWaitTime === 'number' && isElementVisible($elm)) {
             const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
                 createSvgIcon(BxIcon.PLAYTIME),
                 CE('span', {}, GameTile.#secondsToHms(totalWaitTime)),
@@ -43,45 +48,61 @@ export class GameTile {
         }
     }
 
-    static requestWaitTime($elm: HTMLElement, productId: string) {
+    static #requestWaitTime($elm: HTMLElement, productId: string) {
         GameTile.#timeout && clearTimeout(GameTile.#timeout);
         GameTile.#timeout = window.setTimeout(async () => {
-            if (!($elm as any).hasWaitTime) {
-                ($elm as any).hasWaitTime = true;
-                GameTile.#showWaitTime($elm, productId);
+            GameTile.#showWaitTime($elm, productId);
+        }, 500);
+    }
+
+    static #findProductId($elm: HTMLElement): string | null {
+        let productId = null;
+
+        try {
+            if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
+                let props = getReactProps($elm.parentElement!);
+
+                // When context menu is enabled
+                if (Array.isArray(props.children)) {
+                    productId = props.children[0].props.productId;
+                } else {
+                    productId = props.children.props.productId;
+                }
+            } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
+                let props = getReactProps($elm.parentElement!);
+                props = props.children.props;
+                if (props.location !== 'NonStreamableGameItem') {
+                    if ('productId' in props) {
+                        productId = props.productId;
+                    } else {
+                        // Search page
+                        productId = props.children.props.productId;
+                    }
+                }
             }
-        }, 1000);
+        } catch (e) {}
+
+        return productId;
     }
 
     static setup() {
         window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
-            let productId;
             const $elm = (e as any).element;
-            try {
-                if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
-                    let props = getReactProps($elm.parentElement);
-
-                    // When context menu is enabled
-                    if (Array.isArray(props.children)) {
-                        productId = props.children[0].props.productId;
-                    } else {
-                        productId = props.children.props.productId;
-                    }
-                } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
-                    let props = getReactProps($elm.parentElement);
-                    props = props.children.props;
-                    if (props.location !== 'NonStreamableGameItem') {
-                        if ('productId' in props) {
-                            productId = props.productId;
-                        } else {
-                            // Search page
-                            productId = props.children.props.productId;
-                        }
-                    }
+            const className = $elm.className || '';
+            if (className.includes('MruGameCard')) {
+                // Show the wait time of every games in the "Jump back in" section all at once
+                const $ol = $elm.closest('ol');
+                if ($ol && !($ol as any).hasWaitTime) {
+                    ($ol as any).hasWaitTime = true;
+                    $ol.querySelectorAll('button[class*=MruGameCard]').forEach(($elm: HTMLElement) => {
+                        const productId = GameTile.#findProductId($elm);
+                        productId && GameTile.#showWaitTime($elm, productId);
+                    });
                 }
-            } catch (e) {}
-
-            productId && GameTile.requestWaitTime($elm, productId);
+            } else {
+                const productId = GameTile.#findProductId($elm);
+                productId && GameTile.#requestWaitTime($elm, productId);
+            }
         });
     }
 }

src/modules/ui/guide-menu.ts

@@ -3,6 +3,8 @@ import { AppInterface, STATES } from "@/utils/global";
 import { createButton, ButtonStyle, CE } from "@/utils/html";
 import { t } from "@/utils/translation";
 import { SettingsNavigationDialog } from "./dialog/settings-dialog";
+import { TrueAchievements } from "@/utils/true-achievements";
+import { BxIcon } from "@/utils/bx-icon";
 
 export enum GuideMenuTab {
     HOME = 'home',
@@ -24,27 +26,24 @@ export class GuideMenu {
             },
         }),
 
-        appSettings: createButton({
-            label: t('app-settings'),
-            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
-            onClick: e => {
-                // Close all xCloud's dialogs
-                window.BX_EXPOSED.dialogRoutes.closeAll();
-
-                AppInterface.openAppSettings && AppInterface.openAppSettings();
-            },
-        }),
-
-        closeApp: createButton({
+        closeApp: AppInterface && createButton({
+            icon: BxIcon.POWER,
             label: t('close-app'),
+            title: t('close-app'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
             onClick: e => {
                 AppInterface.closeApp();
             },
+
+            attributes: {
+                'data-state': 'normal',
+            },
         }),
 
         reloadPage: createButton({
+            icon: BxIcon.REFRESH,
             label: t('reload-page'),
+            title: t('reload-page'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
                 if (STATES.isPlaying) {
@@ -59,74 +58,92 @@ export class GuideMenu {
         }),
 
         backToHome: createButton({
+            icon: BxIcon.HOME,
             label: t('back-to-home'),
+            title: t('back-to-home'),
             style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
             onClick: e => {
                 confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+
+                // Close all xCloud's dialogs
+                window.BX_EXPOSED.dialogRoutes.closeAll();
+            },
+            attributes: {
+                'data-state': 'playing',
             },
         }),
     }
 
-    static #renderButtons(buttons: HTMLElement[]) {
-        const $div = CE('div', {});
+    static #$renderedButtons: HTMLElement;
 
-        for (const $button of buttons) {
-            $div.appendChild($button);
+    static #renderButtons() {
+        if (GuideMenu.#$renderedButtons) {
+            return GuideMenu.#$renderedButtons;
         }
 
+        const $div = CE('div', {
+            class: 'bx-guide-home-buttons',
+        });
+
+        const buttons = [
+            GuideMenu.#BUTTONS.scriptSettings,
+            [
+                GuideMenu.#BUTTONS.backToHome,
+                GuideMenu.#BUTTONS.reloadPage,
+                GuideMenu.#BUTTONS.closeApp,
+            ],
+        ];
+
+        for (const $button of buttons) {
+            if (!$button) {
+                continue;
+            }
+
+            if ($button instanceof HTMLElement) {
+                $div.appendChild($button);
+            } else if (Array.isArray($button)) {
+                const $wrapper = CE('div', {});
+                for (const $child of $button) {
+                    $child && $wrapper.appendChild($child);
+                }
+                $div.appendChild($wrapper);
+            }
+        }
+
+        GuideMenu.#$renderedButtons = $div;
         return $div;
     }
 
-    static #injectHome($root: HTMLElement) {
-        // Find the last divider
-        const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]');
-        if (!$dividers) {
-            return;
+    static #injectHome($root: HTMLElement, isPlaying = false) {
+        const $achievementsProgress = $root.querySelector('button[class*=AchievementsButton-module__progressBarContainer]');
+        if ($achievementsProgress) {
+            TrueAchievements.injectAchievementsProgress($achievementsProgress as HTMLElement);
         }
 
-        const buttons: HTMLElement[] = [];
+        // Find the element to add buttons to
+        let $target: HTMLElement | null = null;
+        if (isPlaying) {
+            // Quit button
+            $target = $root.querySelector('a[class*=QuitGameButton]');
 
-        // "Better xCloud" button
-        buttons.push(GuideMenu.#BUTTONS.scriptSettings);
-
-        // "App settings" button
-        AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
-
-        // "Reload page" button
-        buttons.push(GuideMenu.#BUTTONS.reloadPage);
-
-        // "Close app" buttons
-        AppInterface && buttons.push(GuideMenu.#BUTTONS.closeApp);
-
-        const $buttons = GuideMenu.#renderButtons(buttons);
-
-        const $lastDivider = $dividers[$dividers.length - 1];
-        $lastDivider.insertAdjacentElement('afterend', $buttons);
-    }
-
-    static #injectHomePlaying($root: HTMLElement) {
-        const $btnQuit = $root.querySelector('a[class*=QuitGameButton]');
-        if (!$btnQuit) {
-            return;
+            // Hide xCloud's Home button
+            const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;
+            $btnXcloudHome && ($btnXcloudHome.style.display = 'none');
+        } else {
+            // Last divider
+            const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]');
+            if ($dividers) {
+                $target = $dividers[$dividers.length - 1] as HTMLElement;
+            }
         }
 
-        const buttons: HTMLElement[] = [];
+        if (!$target) {
+            return false;
+        }
 
-        buttons.push(GuideMenu.#BUTTONS.scriptSettings);
-        AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
-
-        // Reload page
-        buttons.push(GuideMenu.#BUTTONS.reloadPage);
-
-        // Back to home
-        buttons.push(GuideMenu.#BUTTONS.backToHome);
-
-        const $buttons = GuideMenu.#renderButtons(buttons);
-        $btnQuit.insertAdjacentElement('afterend', $buttons);
-
-        // Hide xCloud's Home button
-        const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;
-        $btnXcloudHome && ($btnXcloudHome.style.display = 'none');
+        const $buttons = GuideMenu.#renderButtons();
+        $buttons.dataset.isPlaying = isPlaying.toString();
+        $target.insertAdjacentElement('afterend', $buttons);
     }
 
     static async #onShown(e: Event) {
@@ -134,17 +151,45 @@ export class GuideMenu {
 
         if (where === GuideMenuTab.HOME) {
             const $root = document.querySelector('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]') as HTMLElement;
-            if ($root) {
-                if (STATES.isPlaying) {
-                    GuideMenu.#injectHomePlaying($root);
-                } else {
-                    GuideMenu.#injectHome($root);
-                }
-            }
+            $root && GuideMenu.#injectHome($root, STATES.isPlaying);
         }
     }
 
-    static observe() {
+    static addEventListeners() {
         window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, GuideMenu.#onShown);
     }
+
+    static observe($addedElm: HTMLElement) {
+        const className = $addedElm.className;
+
+        if (className.includes('AchievementsButton-module__progressBarContainer')) {
+            TrueAchievements.injectAchievementsProgress($addedElm);
+            return;
+        }
+
+        if (!className.startsWith('NavigationAnimation') &&
+                !className.startsWith('DialogRoutes') &&
+                !className.startsWith('Dialog-module__container')) {
+            return;
+        }
+
+        // Achievement Details page
+        const $achievDetailPage = $addedElm.querySelector('div[class*=AchievementDetailPage]');
+        if ($achievDetailPage) {
+            TrueAchievements.injectAchievementDetailPage($achievDetailPage as HTMLElement);
+            return;
+        }
+
+        // Find navigation bar
+        const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true');
+        if ($selectedTab) {
+            let $elm: Element | null = $selectedTab;
+            let index;
+            for (index = 0; ($elm = $elm?.previousElementSibling); index++);
+
+            if (index === 0) {
+                BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_MENU_SHOWN, {where: GuideMenuTab.HOME});
+            }
+        }
+    }
 }

src/modules/ui/header.ts

@@ -1,5 +1,5 @@
 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 { RemotePlay } from "@modules/remote-play";
@@ -44,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) || t('better-xcloud');
+        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
@@ -57,13 +61,12 @@ export class HeaderSection {
     }
 
     static checkHeader() {
-        if (!HeaderSection.#$buttonsWrapper.isConnected) {
-            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);
+        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() {
@@ -71,11 +74,14 @@ export class HeaderSection {
     }
 
     static watchHeader() {
-        let $root = document.querySelector('#PageContent header') || document.querySelector('#root');
+        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);

src/modules/ui/product-details.ts

@@ -5,30 +5,60 @@ import { ButtonStyle, createButton } from "@/utils/html";
 import { t } from "@/utils/translation";
 
 export class ProductDetailsPage {
-    private static $btnShortcut = createButton({
+    private static $btnShortcut = AppInterface && createButton({
         classes: ['bx-button-shortcut'],
         icon: BxIcon.CREATE_SHORTCUT,
         label: t('create-shortcut'),
         style: ButtonStyle.FOCUSABLE,
         tabIndex: 0,
         onClick: e => {
-            AppInterface && AppInterface.createShortcut(window.location.pathname.substring(6));
+            AppInterface.createShortcut(window.location.pathname.substring(6));
         },
     });
 
-    private static shortcutTimeoutId: number | null = null;
+    private static $btnWallpaper = AppInterface && createButton({
+        classes: ['bx-button-shortcut'],
+        icon: BxIcon.DOWNLOAD,
+        label: t('wallpaper'),
+        style: ButtonStyle.FOCUSABLE,
+        tabIndex: 0,
+        onClick: async e => {
+            try {
+                const matches = /\/games\/(?<titleSlug>[^\/]+)\/(?<productId>\w+)/.exec(window.location.pathname);
+                if (!matches?.groups) {
+                    return;
+                }
 
-    static injectShortcutButton() {
-        if (!AppInterface || BX_FLAGS.DeviceInfo.deviceType !== 'android') {
+                const titleSlug = matches.groups.titleSlug.replaceAll('\%' + '7C', '-');
+                const productId = matches.groups.productId;
+                AppInterface.downloadWallpapers(titleSlug, productId);
+            } catch (e) {}
+        },
+    });
+
+    private static injectTimeoutId: number | null = null;
+
+    static injectButtons() {
+        if (!AppInterface) {
             return;
         }
 
-        ProductDetailsPage.shortcutTimeoutId && clearTimeout(ProductDetailsPage.shortcutTimeoutId);
-        ProductDetailsPage.shortcutTimeoutId = window.setTimeout(() => {
+        ProductDetailsPage.injectTimeoutId && clearTimeout(ProductDetailsPage.injectTimeoutId);
+        ProductDetailsPage.injectTimeoutId = window.setTimeout(() => {
             // Find action buttons container
             const $container = document.querySelector('div[class*=ActionButtons-module__container]');
-            if ($container) {
-                $container.parentElement?.appendChild(ProductDetailsPage.$btnShortcut);
+            if ($container && $container.parentElement) {
+                const fragment = document.createDocumentFragment();
+
+                // Shortcut button
+                if (BX_FLAGS.DeviceInfo.deviceType === 'android') {
+                    fragment.appendChild(ProductDetailsPage.$btnShortcut);
+                }
+
+                // Wallpaper button
+                fragment.appendChild(ProductDetailsPage.$btnWallpaper);
+
+                $container.parentElement.appendChild(fragment);
             }
         }, 500);
     }

src/modules/ui/ui.ts

@@ -11,7 +11,7 @@ export function localRedirect(path: string) {
 
     const $anchor = CE<HTMLAnchorElement>('a', {
             href: url,
-            class: 'bx-hidden bx-offscreen'
+            class: 'bx-hidden bx-offscreen',
         }, '');
     $anchor.addEventListener('click', e => {
         // Remove element after clicking on it

src/modules/vibration-manager.ts

@@ -1,7 +1,7 @@
 import { AppInterface } from "@utils/global";
 import { BxEvent } from "@utils/bx-event";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { ControllerDeviceVibration, getPref } from "@/utils/settings-storages/global-settings-storage";
 
 const VIBRATION_DATA_MAP = {
     'gamepadIndex': 8,
@@ -69,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

@@ -48,9 +48,9 @@ type BxStates = {
     };
 
     currentStream: Partial<{
-        titleId: string;
-        productId: string;
+        titleSlug: string;
         titleInfo: XcloudTitleInfo;
+        xboxTitleId: number;
 
         streamPlayer: StreamPlayer | null;
 
@@ -65,18 +65,18 @@ type BxStates = {
         config: {
             serverId: string;
         };
+        titleId?: string;
     }>;
 
     pointerServerPort: number;
 }
 
-type DualEnum = {[index: string]: number} & {[index: number]: string};
-
 type XcloudTitleInfo = {
     titleId: string,
 
     details: {
         productId: string;
+        xboxTitleId: number;
         supportedInputTypes: InputType[];
         supportedTabs: any[];
         hasNativeTouchSupport: boolean;
@@ -86,6 +86,7 @@ type XcloudTitleInfo = {
     };
 
     product: {
+        title: string;
         heroImageUrl: string;
         titledHeroImageUrl: string;
         tileImageUrl: string;
@@ -120,3 +121,42 @@ type MkbMouseWheel = {
     vertical: number;
     horizontal: number;
 }
+
+type XboxAchievement = {
+    version: number;
+    id: string;
+    name: string;
+    gamerscore: number;
+    isSecret: boolean;
+    isUnlocked: boolean;
+    description: {
+        locked: string;
+        unlocked: string;
+    };
+
+    imageUrl: string,
+    requirements: Array<{
+        current: number;
+        target: number;
+        percentComplete: number;
+    }>;
+
+    percentComplete: 0,
+    rarity: {
+        currentCategory: string;
+        currentPercentage: number;
+    };
+
+    rewards: Array<{
+        value: number;
+        valueType: string;
+        type: string;
+    }>;
+
+    title: {
+        id: string;
+        scid: string;
+        productId: string;
+        name: string;
+    }
+};

src/types/setting-definition.d.ts

@@ -1,19 +1,60 @@
-export type SettingDefinition = {
-    default: any;
-    optionsGroup?: string;
-    options?: {[index: string]: string};
-    multipleOptions?: {[index: string]: string};
-    unsupported?: string | boolean;
-    note?: string | HTMLElement;
-    type?: SettingElementType;
-    ready?: (setting: SettingDefinition) => void;
-    // migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
-    min?: number;
-    max?: number;
-    steps?: number;
-    experimental?: boolean;
-    params?: any;
-    label?: string;
+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,4 +1,6 @@
 import { AppInterface } from "@utils/global";
+import { BxLogger } from "./bx-logger";
+import { BX_FLAGS } from "./bx-flags";
 
 
 export namespace BxEvent {
@@ -35,6 +37,7 @@ export namespace BxEvent {
 
     export const GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated';
     export const MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed';
+    export const SPEAKER_STATE_CHANGED = 'bx-speaker-state-changed';
 
     export const CAPTURE_SCREENSHOT = 'bx-capture-screenshot';
 
@@ -51,7 +54,9 @@ export namespace BxEvent {
 
     export const XCLOUD_POLLING_MODE_CHANGED = 'bx-xcloud-polling-mode-changed';
 
-    export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-page';
+    export const XCLOUD_RENDERING_COMPONENT = 'bx-xcloud-rendering-component';
+
+    export const XCLOUD_ROUTER_HISTORY_READY = 'bx-xcloud-router-history-ready';
 
     export function dispatch(target: Element | Window | null, eventName: string, data?: any) {
         if (!target) {
@@ -73,6 +78,8 @@ export namespace BxEvent {
 
         target.dispatchEvent(event);
         AppInterface && AppInterface.onEvent(eventName);
+
+        BX_FLAGS.Debug && BxLogger.warning('BxEvent', 'dispatch', eventName, data)
     }
 }
 

src/utils/bx-exposed.ts

@@ -5,7 +5,7 @@ import { BxLogger } from "./bx-logger";
 import { BX_FLAGS } from "./bx-flags";
 import { NavigationDialogManager } from "@/modules/ui/dialog/navigation-dialog";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { getPref, StreamTouchController } from "./settings-storages/global-settings-storage";
 
 export enum SupportedInputType {
     CONTROLLER = 'Controller',
@@ -41,7 +41,7 @@ export const BxExposed = {
             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;
 
@@ -52,10 +52,10 @@ 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 !== SupportedInputType.CUSTOM_TOUCH_OVERLAY && i !== SupportedInputType.GENERIC_TOUCH);
                 // Empty TABs
@@ -68,7 +68,7 @@ export const BxExposed = {
                     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(SupportedInputType.GENERIC_TOUCH);
@@ -128,6 +128,18 @@ export const BxExposed = {
             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,4 +1,8 @@
+import { BxLogger } from "./bx-logger";
+
 type BxFlags = {
+    Debug: boolean;
+
     CheckForUpdate: boolean;
     EnableXcloudLogging: boolean;
     SafariWorkaround: boolean;
@@ -7,13 +11,19 @@ type BxFlags = {
     FeatureGates: {[key: string]: boolean} | null,
 
     DeviceInfo: {
-        deviceType: 'android' | 'android-tv' | 'webos' | 'unknown',
+        deviceType: 'android' | 'android-tv' | 'android-handheld' | 'webos' | 'unknown',
         userAgent?: string,
+
+        androidInfo?: {
+            board: string,
+        },
     }
 }
 
 // Setup flags
 const DEFAULT_FLAGS: BxFlags = {
+    Debug: false,
+
     CheckForUpdate: true,
     EnableXcloudLogging: false,
     SafariWorkaround: true,
@@ -35,4 +45,6 @@ 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,4 +1,5 @@
 import iconBetterXcloud from "@assets/svg/better-xcloud.svg" with { type: "text" };
+import iconTrueAchievements from "@assets/svg/true-achievements.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" };
@@ -9,9 +10,11 @@ import iconDisplay from "@assets/svg/display.svg" with { type: "text" };
 import iconHome from "@assets/svg/home.svg" with { type: "text" };
 import iconNativeMkb from "@assets/svg/native-mkb.svg" with { type: "text" };
 import iconNew from "@assets/svg/new.svg" with { type: "text" };
+import iconPower from "@assets/svg/power.svg" with { type: "text" };
 import iconQuestion from "@assets/svg/question.svg" with { type: "text" };
 import iconRefresh from "@assets/svg/refresh.svg" with { type: "text" };
 import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" };
+import iconSpeakerSlash from "@assets/svg/speaker-slash.svg" with { type: "text" };
 import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" };
 import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" };
 import iconTouchControlDisable from "@assets/svg/touch-control-disable.svg" with { type: "text" };
@@ -37,6 +40,7 @@ import iconUpload from "@assets/svg/upload.svg" with { type: "text" };
 
 export const BxIcon = {
     BETTER_XCLOUD: iconBetterXcloud,
+    TRUE_ACHIEVEMENTS: iconTrueAchievements,
     STREAM_SETTINGS: iconStreamSettings,
     STREAM_STATS: iconStreamStats,
     CLOSE: iconClose,
@@ -50,6 +54,7 @@ export const BxIcon = {
     COPY: iconCopy,
     TRASH: iconTrash,
     CURSOR_TEXT: iconCursorText,
+    POWER: iconPower,
     QUESTION: iconQuestion,
     REFRESH: iconRefresh,
     VIRTUAL_CONTROLLER: iconVirtualController,
@@ -60,6 +65,7 @@ export const BxIcon = {
     CARET_LEFT: iconCaretLeft,
     CARET_RIGHT: iconCaretRight,
     SCREENSHOT: iconCamera,
+    SPEAKER_MUTED: iconSpeakerSlash,
     TOUCH_CONTROL_ENABLE: iconTouchControlEnable,
     TOUCH_CONTROL_DISABLE: iconTouchControlDisable,
 

src/utils/css.ts

@@ -6,7 +6,7 @@ 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);

src/utils/html.ts

@@ -2,8 +2,38 @@ 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,
+    NORMAL_LINK = 2048,
+}
+
+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',
+    [ButtonStyle.NORMAL_LINK]: 'bx-normal-link',
+}
+
 type BxButton = {
-    style?: number | string | ButtonStyle;
+    style?: ButtonStyle;
     url?: string;
     classes?: string[];
     icon?: typeof BxIcon;
@@ -15,8 +45,6 @@ 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
 type CreateElementOptions = {
     [index: string]: any;
@@ -80,20 +108,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.FROSTED = 8] = 'bx-frosted';
-ButtonStyle[ButtonStyle.DROP_SHADOW = 16] = 'bx-drop-shadow';
-ButtonStyle[ButtonStyle.FOCUSABLE = 32] = 'bx-focusable';
-ButtonStyle[ButtonStyle.FULL_WIDTH = 64] = 'bx-full-width';
-ButtonStyle[ButtonStyle.FULL_HEIGHT = 128] = 'bx-full-height';
-ButtonStyle[ButtonStyle.TALL = 256] = 'bx-tall';
-ButtonStyle[ButtonStyle.CIRCULAR = 512] = 'bx-circular';
-ButtonStyle[ButtonStyle.NORMAL_CASE = 1024] = 'bx-normal-case';
-
-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;
@@ -106,8 +121,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);
@@ -146,5 +161,29 @@ 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();
+    }
+}
+
+export function clearFocus() {
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+}
+
+
+export function clearDataSet($elm: HTMLElement) {
+    Object.keys($elm.dataset).forEach(key => {
+        delete $elm.dataset[key];
+    });
+}

src/utils/screenshot.ts

@@ -71,7 +71,7 @@ export class Screenshot {
         // Get data URL and pass to parent app
         if (AppInterface) {
             const data = $canvas.toDataURL('image/png').split(';base64,')[1];
-            AppInterface.saveScreenshot(currentStream.titleId, data);
+            AppInterface.saveScreenshot(currentStream.titleSlug, data);
 
             // Free screenshot from memory
             canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
@@ -84,7 +84,7 @@ export class Screenshot {
                 // Download screenshot
                 const now = +new Date;
                 const $anchor = CE<HTMLAnchorElement>('a', {
-                        'download': `${currentStream.titleId}-${now}.png`,
+                        'download': `${currentStream.titleSlug}-${now}.png`,
                         'href': URL.createObjectURL(blob!),
                     });
                 $anchor.click();

src/utils/setting-element.ts

@@ -3,21 +3,8 @@ import { CE } from "@utils/html";
 import { setNearby } from "./navigation-utils";
 import type { PrefKey } from "@/enums/pref-keys";
 import type { BaseSettingsStore } from "./settings-storages/base-settings-storage";
-
-type MultipleOptionsParams = {
-    size?: number;
-}
-
-type NumberStepperParams = {
-    suffix?: string;
-    disabled?: boolean;
-    hideSlider?: boolean;
-
-    ticks?: number;
-    exactTicks?: number;
-
-    customTextValue?: (value: any) => string | null;
-}
+import { type MultipleOptionsParams, type NumberStepperParams } from "@/types/setting-definition";
+import { BxEvent } from "./bx-event";
 
 export enum SettingElementType {
     OPTIONS = 'options',
@@ -27,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;
@@ -58,19 +55,20 @@ export class SettingElement {
         });
 
         // 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());
         }
@@ -89,7 +87,7 @@ export class SettingElement {
 
                 const $parent = target.parentElement!;
                 $parent.focus();
-                $parent.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($parent, 'input');
             });
 
             $control.appendChild($option);
@@ -114,9 +112,15 @@ export class SettingElement {
     }
 
     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)));
@@ -132,10 +136,14 @@ export class SettingElement {
         const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
         $control.checked = currentValue;
 
-        onChange && $control.addEventListener('change', e => {
+        onChange && $control.addEventListener('input', e => {
             !(e as any).ignoreOnChange && onChange(e, (e.target as HTMLInputElement).checked);
         });
 
+        ($control as any).setValue = (value: boolean) => {
+            $control.checked = !!value;
+        };
+
         return $control;
     }
 
@@ -176,77 +184,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) {
-            ($wrapper as any).disabled = true;
-        }
-
-        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;
@@ -254,9 +206,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;
@@ -292,16 +301,14 @@ export class SettingElement {
 
         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);
         };
 
@@ -315,11 +322,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);
@@ -381,7 +386,11 @@ export class SettingElement {
             type = SettingElementType.CHECKBOX;
         }
 
-        const params = Object.assign(overrideParams, definition.params || {});
+        let params: any = {};
+        if ('params' in definition) {
+            params = Object.assign(overrideParams, definition.params || {});
+        }
+
         if (params.disabled) {
             currentValue = definition.default;
         }

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

@@ -1,6 +1,8 @@
 import type { PrefKey } from "@/enums/pref-keys";
-import type { SettingDefinitions } from "@/types/setting-definition";
+import type { NumberStepperParams, SettingDefinitions } from "@/types/setting-definition";
 import { BxEvent } from "../bx-event";
+import { SettingElementType } from "../setting-element";
+import { t } from "../translation";
 
 export class BaseSettingsStore {
     private storage: Storage;
@@ -12,7 +14,8 @@ export class BaseSettingsStore {
         this.storage = window.localStorage;
         this.storageKey = storageKey;
 
-        for (const settingId in definitions) {
+        let settingId: keyof typeof definitions
+        for (settingId in definitions) {
             const setting = definitions[settingId];
 
             /*
@@ -49,14 +52,14 @@ export class BaseSettingsStore {
         return this.definitions[key];
     }
 
-    getSetting(key: PrefKey) {
+    getSetting(key: PrefKey, checkUnsupported = true) {
         if (typeof key === 'undefined') {
             debugger;
             return;
         }
 
         // Return default value if the feature is not supported
-        if (this.definitions[key].unsupported) {
+        if (checkUnsupported && this.definitions[key].unsupported) {
             return this.definitions[key].default;
         }
 
@@ -121,4 +124,32 @@ export class BaseSettingsStore {
 
         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];
+            }
+        } else if (typeof value === 'boolean') {
+            return value ? t('on') : t('off')
+        }
+
+        return value.toString();
+    }
 }

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

@@ -4,19 +4,43 @@ 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 { PreferenceSetting } from "@/types/preferences";
-import type { SettingDefinitions } from "@/types/setting-definition";
+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 { SettingElementType } from "../setting-element";
 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 const enum StreamResolution {
+    DIM_720P = '720p',
+    DIM_1080P = '1080p',
+}
+
+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: {[index: string]: string} = {
+    const options: PartialRecord<CodecProfile, string> = {
         default: t('default'),
     };
 
@@ -46,25 +70,25 @@ function getSupportedCodecProfiles() {
 
     if (hasLowCodec) {
         if (!hasNormalCodec && !hasHighCodec) {
-            options.default = `${t('visual-quality-low')} (${t('default')})`;
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-low')} (${t('default')})`;
         } else {
-            options.low = t('visual-quality-low');
+            options[CodecProfile.LOW] = t('visual-quality-low');
         }
     }
 
     if (hasNormalCodec) {
         if (!hasLowCodec && !hasHighCodec) {
-            options.default = `${t('visual-quality-normal')} (${t('default')})`;
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-normal')} (${t('default')})`;
         } else {
-            options.normal = t('visual-quality-normal');
+            options[CodecProfile.NORMAL] = t('visual-quality-normal');
         }
     }
 
     if (hasHighCodec) {
         if (!hasLowCodec && !hasNormalCodec) {
-            options.default = `${t('visual-quality-high')} (${t('default')})`;
+            options[CodecProfile.DEFAULT] = `${t('visual-quality-high')} (${t('default')})`;
         } else {
-            options.high = t('visual-quality-high');
+            options[CodecProfile.HIGH] = t('visual-quality-high');
         }
     }
 
@@ -140,25 +164,31 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             default: 'auto',
             options: {
                 auto: t('default'),
-                '720p': '720p',
-                '1080p': '1080p',
+                [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: getSupportedCodecProfiles(),
-            ready: (setting: PreferenceSetting) => {
-                const options: any = setting.options;
+            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]: {
@@ -189,16 +219,16 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
 
         [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;
                 }
             },
         },
@@ -274,6 +304,9 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     }
                 },
             },
+            suggest: {
+                highest: 0,
+            }
         },
 
         [PrefKey.GAME_BAR_POSITION]: {
@@ -318,11 +351,11 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
 
         [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'),
             },
         },
 
@@ -346,7 +379,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 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) {
@@ -372,16 +405,15 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 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'];
                 }
             },
         },
@@ -530,6 +562,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 [StreamPlayerType.VIDEO]: t('default'),
                 [StreamPlayerType.WEBGL2]: t('webgl2'),
             },
+            suggest: {
+                lowest: StreamPlayerType.VIDEO,
+                highest: StreamPlayerType.WEBGL2,
+            },
         },
         [PrefKey.VIDEO_PROCESSING]: {
             label: t('clarity-boost'),
@@ -538,6 +574,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 [StreamVideoProcessing.USM]: t('unsharp-masking'),
                 [StreamVideoProcessing.CAS]: t('amd-fidelity-cas'),
             },
+            suggest: {
+                lowest: StreamVideoProcessing.USM,
+                highest: StreamVideoProcessing.CAS,
+            },
         },
         [PrefKey.VIDEO_POWER_PREFERENCE]: {
             label: t('renderer-configuration'),
@@ -547,6 +587,9 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 'low-power': t('low-power'),
                 'high-performance': t('high-performance'),
             },
+            suggest: {
+                highest: 'low-power',
+            },
         },
         [PrefKey.VIDEO_SHARPNESS]: {
             label: t('sharpness'),
@@ -561,6 +604,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                     return value === 0 ? t('off') : value.toString();
                 },
             },
+            suggest: {
+                lowest: 0,
+                highest: 4,
+            },
         },
         [PrefKey.VIDEO_RATIO]: {
             label: t('aspect-ratio'),
@@ -701,10 +748,10 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
         },
 
         [PrefKey.REMOTE_PLAY_RESOLUTION]: {
-            default: '1080p',
+            default: StreamResolution.DIM_1080P,
             options: {
-                '1080p': '1080p',
-                '720p': '720p',
+                [StreamResolution.DIM_1080P]: '1080p',
+                [StreamResolution.DIM_720P]: '720p',
             },
         },
 

src/utils/translation.ts

@@ -113,6 +113,7 @@ const Texts = {
     "fortnite-force-console-version": "Fortnite: force console version",
     "game-bar": "Game Bar",
     "getting-consoles-list": "Getting the list of consoles...",
+    "guide": "Guide",
     "help": "Help",
     "hide": "Hide",
     "hide-idle-cursor": "Hide mouse cursor on idle",
@@ -121,21 +122,28 @@ 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-fix": "How to fix",
+    "how-to-improve-app-performance": "How to improve app's performance",
     "ignore": "Ignore",
     "import": "Import",
     "increase": "Increase",
     "install-android": "Better xCloud app for Android",
     "japan": "Japan",
     "keyboard-shortcuts": "Keyboard shortcuts",
+    "korea": "Korea",
     "language": "Language",
     "large": "Large",
     "layout": "Layout",
     "left-stick": "Left stick",
+    "load-failed-message": "Failed to run Better xCloud",
     "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",
@@ -188,6 +196,28 @@ 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) => `Empfohlene Einstellungen für ${e.device}`,
+        ,
+        (e: any) => `Ajustes recomendados para ${e.device}`,
+        (e: any) => `Paramètres recommandés pour ${e.device}`,
+        (e: any) => `Configurazioni consigliate per ${e.device}`,
+        (e: any) => `${e.device} の推奨設定`,
+        (e: any) => `다음 기기에서 권장되는 설정: ${e.device}`,
+        (e: any) => `Zalecane ustawienia dla ${e.device}`,
+        ,
+        (e: any) => `Рекомендуемые настройки для ${e.device}`,
+        ,
+        (e: any) => `${e.device} için önerilen ayarlar`,
+        (e: any) => `Рекомендовані налаштування для ${e.device}`,
+        (e: any) => `Cấu hình được đề xuất cho ${e.device}`,
+        (e: any) => `${e.device} 的推荐设置`,
+        (e: any) => `${e.device} 推薦的設定`,
+    ],
     "reduce-animations": "Reduce UI animations",
     "region": "Region",
     "reload-page": "Reload page",
@@ -201,7 +231,6 @@ const Texts = {
     "rocket-always-show": "Always show",
     "rocket-animation": "Rocket animation",
     "rocket-hide-queue": "Hide when queuing",
-    "safari-failed-message": "Failed to run Better xCloud. Retrying, please wait...",
     "saturation": "Saturation",
     "save": "Save",
     "screen": "Screen",
@@ -249,6 +278,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",
@@ -290,6 +321,7 @@ const Texts = {
     ],
     "touch-controller": "Touch controller",
     "transparent-background": "Transparent background",
+    "true-achievements": "TrueAchievements",
     "ui": "UI",
     "unexpected-behavior": "May cause unexpected behavior",
     "united-states": "United States",
@@ -313,6 +345,7 @@ const Texts = {
     "volume": "Volume",
     "wait-time-countdown": "Countdown",
     "wait-time-estimated": "Estimated finish time",
+    "wallpaper": "Wallpaper",
     "webgl2": "WebGL2",
 };
 

src/utils/true-achievements.ts

@@ -0,0 +1,150 @@
+import { BxIcon } from "./bx-icon";
+import { AppInterface, STATES } from "./global";
+import { ButtonStyle, CE, clearDataSet, createButton, getReactProps } from "./html";
+import { t } from "./translation";
+
+export class TrueAchievements {
+    private static $link = createButton({
+        label: t('true-achievements'),
+        url: '#',
+        icon: BxIcon.TRUE_ACHIEVEMENTS,
+        style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH | ButtonStyle.NORMAL_LINK,
+        onClick: TrueAchievements.onClick,
+    }) as HTMLAnchorElement;
+
+    static $button = createButton({
+        label: t('true-achievements'),
+        title: t('true-achievements'),
+        icon: BxIcon.TRUE_ACHIEVEMENTS,
+        style: ButtonStyle.FOCUSABLE,
+        onClick: TrueAchievements.onClick,
+    }) as HTMLAnchorElement;
+
+    private static onClick(e: Event) {
+        e.preventDefault();
+
+        const dataset = TrueAchievements.$link.dataset;
+        TrueAchievements.open(true, dataset.xboxTitleId, dataset.id);
+
+        // Close all xCloud's dialogs
+        window.BX_EXPOSED.dialogRoutes.closeAll();
+    }
+
+    private static $hiddenLink = CE<HTMLAnchorElement>('a', {
+        target: '_blank',
+    });
+
+    private static updateIds(xboxTitleId?: string, id?: string) {
+        const $link = TrueAchievements.$link;
+        const $button = TrueAchievements.$button;
+
+        clearDataSet($link);
+        clearDataSet($button);
+
+        if (xboxTitleId) {
+            $link.dataset.xboxTitleId = xboxTitleId;
+            $button.dataset.xboxTitleId = xboxTitleId;
+        }
+
+        if (id) {
+            $link.dataset.id = id;
+            $button.dataset.id = id;
+        }
+    }
+
+    static injectAchievementsProgress($elm: HTMLElement) {
+        const $parent = $elm.parentElement!;
+
+        // Wrap xCloud's element with our own
+        const $div = CE('div', {
+            class: 'bx-guide-home-achievements-progress',
+        }, $elm);
+
+        // Get xboxTitleId of the game
+        let xboxTitleId: string | number | undefined;
+        try {
+            const $container = $parent.closest('div[class*=AchievementsPreview-module__container]') as HTMLElement;
+            if ($container) {
+                const props = getReactProps($container);
+                xboxTitleId = props.children.props.data.data.xboxTitleId;
+            }
+        } catch (e) {}
+
+        if (!xboxTitleId) {
+            xboxTitleId = TrueAchievements.getStreamXboxTitleId();
+        }
+
+        if (typeof xboxTitleId !== 'undefined') {
+            xboxTitleId = xboxTitleId.toString();
+        }
+        TrueAchievements.updateIds(xboxTitleId);
+
+        if (document.documentElement.dataset.xdsPlatform === 'tv') {
+            $div.appendChild(TrueAchievements.$link);
+        } else {
+            $div.appendChild(TrueAchievements.$button);
+        }
+
+        $parent.appendChild($div);
+    }
+
+    static injectAchievementDetailPage($parent: HTMLElement) {
+        const props = getReactProps($parent);
+        if (!props) {
+            return;
+        }
+
+        try {
+            // Achievement list
+            const achievementList: XboxAchievement[] = props.children.props.data.data;
+
+            // Get current achievement name
+            const $header = $parent.querySelector('div[class*=AchievementDetailHeader]') as HTMLElement;
+            const achievementName = getReactProps($header).children[0].props.achievementName;
+
+            // Find achievement based on name
+            let id: string | undefined;
+            let xboxTitleId: string | undefined;
+            for (const achiev of achievementList) {
+                if (achiev.name === achievementName) {
+                    id = achiev.id;
+                    xboxTitleId = achiev.title.id;
+                    break;
+                }
+            }
+
+            // Found achievement -> add TrueAchievements button
+            if (id) {
+                TrueAchievements.updateIds(xboxTitleId, id);
+                $parent.appendChild(TrueAchievements.$link);
+            }
+        } catch (e) {};
+    }
+
+    private static getStreamXboxTitleId() : number | undefined {
+        return STATES.currentStream.xboxTitleId || STATES.currentStream.titleInfo?.details.xboxTitleId;
+    }
+
+    static open(override: boolean, xboxTitleId?: number | string, id?: number | string) {
+        if (!xboxTitleId || xboxTitleId === 'undefined') {
+            xboxTitleId = TrueAchievements.getStreamXboxTitleId();
+        }
+
+        if (AppInterface && AppInterface.openTrueAchievementsLink) {
+            AppInterface.openTrueAchievementsLink(override, xboxTitleId?.toString(), id?.toString());
+            return;
+        }
+
+        let url = 'https://www.trueachievements.com';
+        if (xboxTitleId) {
+            url += `/deeplink/${xboxTitleId}`;
+
+            if (id) {
+                url += `/${id}`;
+            }
+        }
+
+        TrueAchievements.$hiddenLink.href = url;
+        TrueAchievements.$hiddenLink.click();
+    }
+}

src/utils/utils.ts

@@ -110,3 +110,13 @@ export async function copyToClipboard(text: string, showToast=true): Promise<boo
 
     return false;
 }
+
+export function productTitleToSlug(title: string): string {
+    return title.replace(/[;,/?:@&=+_`~$%#^*()!^\u2122\xae\xa9]/g, '')
+            .replace(/\|/g, '-')
+            .replace(/ {2,}/g, ' ')
+            .trim()
+            .substr(0, 50)
+            .replace(/ /g, '-')
+            .toLowerCase();
+}

src/utils/xbox-api.ts

@@ -0,0 +1,25 @@
+import { NATIVE_FETCH } from "./bx-flags"
+
+export class XboxApi {
+    private static CACHED_TITLES: Record<string, string> = {};
+
+    static async getProductTitle(xboxTitleId: number | string): Promise<string | null> {
+        xboxTitleId = xboxTitleId.toString();
+        if (XboxApi.CACHED_TITLES[xboxTitleId]) {
+            return XboxApi.CACHED_TITLES[xboxTitleId];
+        }
+
+        try {
+            const url = `https://displaycatalog.mp.microsoft.com/v7.0/products/lookup?market=US&languages=en&value=${xboxTitleId}&alternateId=XboxTitleId&fieldsTemplate=browse`;
+            const resp = await NATIVE_FETCH(url);
+            const json = await resp.json();
+
+            const productTitle = json['Products'][0]['LocalizedProperties'][0]['ProductTitle'];
+            XboxApi.CACHED_TITLES[xboxTitleId] = productTitle;
+
+            return productTitle;
+        } catch (e) {}
+
+        return null;
+    }
+}

src/utils/xcloud-interceptor.ts

@@ -9,7 +9,7 @@ import { patchIceCandidates } from "./network";
 import { getPreferredServerRegion } from "./region";
 import { BypassServerIps } from "@/enums/bypass-servers";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 
 export
 class XcloudInterceptor {
@@ -111,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;
         }
 
@@ -147,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

@@ -6,7 +6,7 @@ import { NATIVE_FETCH } from "./bx-flags";
 import { STATES } from "./global";
 import { patchIceCandidates } from "./network";
 import { PrefKey } from "@/enums/pref-keys";
-import { getPref } from "./settings-storages/global-settings-storage";
+import { getPref, StreamResolution, StreamTouchController } from "./settings-storages/global-settings-storage";
 import type { RemotePlayConsoleAddresses } from "@/types/network";
 
 export class XhomeInterceptor {
@@ -70,7 +70,7 @@ 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;
         }
 
@@ -150,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,4 +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 {
@@ -40,7 +42,7 @@ export class BxSelectElement {
                 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', {},
@@ -122,7 +124,7 @@ export class BxSelectElement {
             if (isMultiple) {
                 render();
             } else {
-                $select.dispatchEvent(new Event('input'));
+                BxEvent.dispatch($select, 'input');
             }
         };
 
@@ -178,7 +180,15 @@ export class BxSelectElement {
         $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;
     }