Bump version to 6.0.0

This reverts commit 3e2c1bb2a4.

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -11,12 +11,21 @@ body:
       options:
         - label: I will only use English in my report.
           required: true
-        - label: "The bug doesn't happen when I disable Better xCloud script."
-          required: true
         - label: I have used the search function for [**open and closed issues**](https://github.com/redphx/better-xcloud/issues?q=is%3Aissue) to see if someone else has already submitted the same bug report.
           required: true
         - label: I will describe the problem with as much detail as possible.
           required: true
+  - type: checkboxes
+    id: questions
+    attributes:
+      label: Questions
+      options:
+        - label: xCloud officially supports my country/region.
+          required: false
+        - label: "The bug doesn't happen when I disable Better xCloud script."
+          required: false
+        - label: "The bug didn't happen in previous Better xCloud version (name which one)."
+          required: false
   - type: dropdown
     id: device_type
     attributes:
@@ -50,9 +59,9 @@ body:
   - type: input
     id: browser_version
     attributes:
-      label: "Browser Version"
+      label: "Android app/Browser Version"
-      description: "What is the name and version of the browser?"
+      description: "What is the name and version of the browser/Android app?"
-      placeholder: "e.g., Chrome 124.0"
+      placeholder: "e.g., Chrome 124.0, Android app 0.15.0"
     validations:
       required: true
   - type: input

.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

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.readonlyInclude": {
+    "dist/**/*": true
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,15 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "typescript",
+      "tsconfig": "tsconfig.json",
+      "option": "watch",
+      "problemMatcher": [
+        "$tsc-watch"
+      ],
+      "group": "build",
+      "label": "tsc: watch - tsconfig.json"
+    }
+  ]
+}

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
 Copyright (c) 2023 redphx
+Copyright (c) 2023 Advanced Micro Devices, Inc.
 Copyright (c) 2020 Phosphor Icons
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

README.md

@@ -5,7 +5,9 @@ Improve Xbox Cloud Gaming (xCloud) experience on [xbox.com/play](https://www.xbo
 > The Android app is in development at [redphx/better-xcloud-android](https://github.com/redphx/better-xcloud-android)
 
 > [!IMPORTANT]
-> I don't accept pull requests at the moment (except PR for custom touch controls)
+> I only accept pull requests for:
+> - Custom touch controls
+> - Bug fixes
 
 **Supported platforms:**  
 - Windows
@@ -21,50 +23,15 @@ If you like this project please give it a 🌟. Thank you 🙏.
 [![Total downloads](https://img.shields.io/github/downloads/redphx/better-xcloud/total?color=%23e15f2c)](https://github.com/redphx/better-xcloud/releases) 
 [![Total stars](https://img.shields.io/github/stars/redphx/better-xcloud?color=%23cca400)](https://github.com/redphx/better-xcloud/stargazers)  
 
+## How to install
+Visit the [home page](https://better-xcloud.github.io) to know how to install Better xCloud on your device.
+
 ## Full documentations
-- For the full details please visit: https://better-xcloud.github.io  
+- For the full details please visit: [**better-xcloud.github.io**](https://better-xcloud.github.io)  
 - [Demo video](https://youtu.be/hyp69Jrb2sQ)
 
 ⚠️ Please DO NOT report **Better xCloud**'s bugs on [/r/xcloud subreddit](https://reddit.com/r/xcloud/). Report bugs in [Issues](https://github.com/redphx/better-xcloud/issues) or [Telegram channel](https://t.me/betterxcloud) instead.
 
-## Table of Contents
-- [**How to install**](#how-to-install)
-- [**Features**](#features)
-- [**Donation**](#donation)
-- [**Acknowledgements**](#acknowledgements)
-- [**Disclaimers**](#disclaimers)
-
-## How to install
-Visit [this page](https://better-xcloud.github.io/browsers) to know how to install Better xCloud on your device.
-
-## Features
-
-<img width="400" alt="Settings UI" src="https://github.com/redphx/better-xcloud/assets/96280/4bec2d62-31df-499c-9aad-2485626b6925">
-<br>
-<img width="400" alt="Remote Play dialog" src="https://github.com/redphx/better-xcloud/assets/96280/daf7f698-a228-4f9c-8f23-9669e061a64c">
-<br>
-<img width="600" alt="Stream HUD" src="https://github.com/redphx/better-xcloud/assets/96280/51bdb96c-79ab-402f-902a-a9e6229973b2">
-<br>
-<img width="600" alt="Stream settings" src="https://github.com/redphx/better-xcloud/assets/96280/ed513cb3-6e6c-4e8e-9e06-c62e71e41c90">
-<br>
-<img width="600" alt="Remapper" src="https://github.com/redphx/better-xcloud/assets/96280/f2e2bc51-f673-4b24-b127-c7169b86462b">
-
-
-&nbsp;  
-  
-**Demo video:** [https://youtu.be/oDr5Eddp55E  ](https://youtu.be/AYb-EUcz72U)  
-- **🔥 Totally free and open-source**
-- **🔥 Allow playing with [Mouse & Keyboard](https://better-xcloud.github.io/mouse-and-keyboard)**
-- **🔥 Enable [Remote Play](https://better-xcloud.github.io/remote-play) support**  
-  > 1080p resolution and can stream Xbox 360 games.  
-- **🔥 [Improve visual quality](https://better-xcloud.github.io/ingame-features/#improve-streams-clarity) of the stream**  
-  > Similar to (but not as good as) the "Clarity Boost" of xCloud on Edge browser. [Demo video](https://youtu.be/ZhW2choAHUs). 
-- **🔥 Show [Stream stats](https://better-xcloud.github.io/stream-stats)**  
-- **🔥 [Screenshot capture](https://better-xcloud.github.io/screenshot-capture)**
-- **🔥 [Touch controller](https://better-xcloud.github.io/features/#touch-controller)**
-  > Enable touch controller support for all games.
-- [And more...](https://better-xcloud.github.io/features/)
-
 ## Donation
 If you think this project is useful and want to support future developments, please consider making a donate via [my Ko-fi page](https://ko-fi.com/redphx).  
 Or you can give this project a star, that's also helpful.  

build.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+build_all () {
+    # Clear screen
+    printf "\033c"
+
+    # Build all variants
+    bun build.ts --version $1 --variant full
+    bun build.ts --version $1 --variant lite
+
+    # Wait for key
+    read -p ">> Press Enter to build again..."
+    build_all $1
+}
+
+build_all $1

build.ts

@@ -2,8 +2,14 @@
 import { readFile } from "node:fs/promises";
 import { parseArgs } from "node:util";
 import { sys } from "typescript";
+// @ts-ignore
 import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
+// @ts-ignore
+import txtScriptHeaderLite from "./src/assets/header_script.lite.txt" with { type: "text" };
+// @ts-ignore
 import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
+import { assert } from "node:console";
+import { ESLint } from "eslint";
 
 enum BuildTarget {
     ALL = 'all',
@@ -12,6 +18,44 @@ enum BuildTarget {
     WEBOS = 'webos',
 }
 
+type BuildVariant = 'full' | 'lite';
+
+const MINIFY_SYNTAX = true;
+
+function minifySvgImports(str: string): string {
+    // Minify SVG imports
+    const svgMap = {};
+    str = str.replaceAll(/var ([\w_]+) = `(<svg.*?\n)`;\n\n/gsm, (match, p1, p2) => {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\n\s*/g, '');
+        svgMap[p1] = '"' + p2.trim() + '"';
+
+        return '';
+    });
+
+    for (const name in svgMap) {
+        str = str.replace(name + ',', svgMap[name] + ',');
+        str = str.replace(name + '\n', svgMap[name] + '\n');
+    }
+
+    return str;
+}
+
+function minifyCodeImports(str: string): string {
+    str = str.replaceAll(/var ([\w_]+_default\d?) = `(.*?)`;/gsm, (match, p1, p2) => {
+        // Remove new lines in SVG
+        p2 = p2.replaceAll(/\n\s*/g, '\n');
+        p2 = p2.replaceAll(/\n\/\/.*/g, '\n');
+        p2 = p2.replaceAll(/^\/\/.*/g, '\n');
+        p2 = p2.replaceAll(/\n+/g, '\n');
+        p2 = p2.trim();
+
+        return `var ${p1} = \`${p2}\`;`;
+    });
+
+    return str;
+}
+
 const postProcess = (str: string): string => {
     // Unescape unicode charaters
     str = unescape((str.replace(/\\u/g, '%u')));
@@ -21,13 +65,76 @@ const postProcess = (str: string): string => {
     // Replace "globalThis." with "var";
     str = str.replaceAll('globalThis.', 'var ');
 
+    // Remove enum's inlining comments
+    str = str.replaceAll(/ \/\* [A-Z0-9_:]+ \*\//g, '');
+    str = str.replaceAll('/* @__PURE__ */ ', '');
+
+    // Remove comments from import
+    str = str.replaceAll(/\/\/ src.*\n/g, '');
+
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
 
+    str = str.replaceAll('(e) => `', 'e => `');
+
+    // Simplify object definitions
+    // {[1]: "a"} => {1: "a"}
+    str = str.replaceAll(/\[(\d+)\]: /g, '$1: ');
+    // {["a"]: 1, ["b-c"]: 2} => {a: 1, "b-c": 2}
+    str = str.replaceAll(/\["([^"]+)"\]: /g, function(match, p1) {
+        if (p1.includes('-') || p1.match(/^\d/)) {
+            p1 = `"${p1}"`;
+        }
+
+        return p1 + ': ';
+    });
+
+    str = minifySvgImports(str);
+    str = minifyCodeImports(str);
+
+    // Collapse empty brackets
+    str = str.replaceAll(/\{[\s\n]+\}/g, '{}');
+
+    // Remove blank lines
+    str = str.replaceAll(/\n([\s]*)\n/g, "\n");
+
+    // Minify WebGL shaders & JS strings
+    // Replace "\n     " with "\n"
+    str = str.replaceAll(/\\n+\s*/g, '\\n');
+    // Remove comment line
+    str = str.replaceAll(/\\n\/\/.*?(?=\\n)/g, '');
+
+    // Replace ${"time".toUpperCase()} with "TIME"
+    str = str.replaceAll(/\$\{"([^"]+)"\.toUpperCase\(\)\}/g, (match, p1) => {
+        return p1.toUpperCase();
+    });
+
+    // Replace " (e) =>" to " e =>"
+    // str = str.replaceAll(/ \(([^\s,.$()]+)\) =>/g, ' $1 =>');
+
+    // Set indent to 1 space
+    if (MINIFY_SYNTAX) {
+        // Collapse if/else blocks without curly braces
+        str = str.replaceAll(/((if \(.*?\)|else)\n\s+)/g, '$2 ');
+
+        str = str.replaceAll(/\n(\s+)/g, (match, p1) => {
+            const len = p1.length / 2;
+            return '\n' + ' '.repeat(len);
+        });
+    }
+
+    // Fix unicode regex in Patcher.optimizeGameSlugGenerator
+    str = str.replaceAll('^\\™', '^\\\\u2122');
+
+    assert(str.includes('/* ADDITIONAL CODE */'));
+    assert(str.includes('window.BX_EXPOSED = BxExposed'));
+    assert(str.includes('window.BxEvent = BxEvent'));
+    assert(str.includes('window.BX_FETCH = window.fetch'));
+
     return str;
 }
 
-const build = async (target: BuildTarget, version: string, config: any={}) => {
+const build = async (target: BuildTarget, version: string, variant: BuildVariant, config: any={}) => {
     console.log('-- Target:', target);
     const startTime = performance.now();
 
@@ -35,6 +142,11 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
     if (target !== BuildTarget.ALL) {
         outputScriptName += `.${target}`;
     }
+
+    if (variant !== 'full') {
+        outputScriptName += `.${variant}`;
+    }
+
     let outputMetaName = outputScriptName;
     outputScriptName += '.user.js';
     outputMetaName += '.meta.js';
@@ -45,8 +157,12 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
         entrypoints: ['src/index.ts'],
         outdir: outDir,
         naming: outputScriptName,
+        minify: {
+            syntax: MINIFY_SYNTAX,
+        },
         define: {
             'Bun.env.BUILD_TARGET': JSON.stringify(target),
+            'Bun.env.BUILD_VARIANT': JSON.stringify(variant),
             'Bun.env.SCRIPT_VERSION': JSON.stringify(version),
         },
     });
@@ -61,14 +177,31 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
     let result = postProcess(await readFile(path, 'utf-8'));
 
     // Replace [[VERSION]] with real value
-	const scriptHeader = txtScriptHeader.replace('[[VERSION]]', version);
+    let scriptHeader: string;
+    if (variant === 'full') {
+        scriptHeader = txtScriptHeader;
+    } else {
+        scriptHeader = txtScriptHeaderLite;
+    }
+    scriptHeader = scriptHeader.replace('[[VERSION]]', version);
 
     // Save to script
     await Bun.write(path, scriptHeader + result);
-	console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
 
-	// Create meta file
+    // Create meta file (don't build if it's beta version)
+    if (!version.includes('beta') && variant === 'full') {
         await Bun.write(outDir + '/' + outputMetaName, txtMetaHeader.replace('[[VERSION]]', version));
+    }
+
+    // Check with ESLint
+    const eslint = new ESLint();
+    const results = await eslint.lintFiles([path]);
+    results[0].messages.forEach((msg: any) => {
+        console.error(`${path}#${msg.line}: ${msg.message}`);
+    });
+
+    console.log(`---- [${target}] done in ${performance.now() - startTime} ms`);
+    console.log(`---- [${target}] ${new Date()}`);
 }
 
 const buildTargets = [
@@ -83,21 +216,57 @@ const { values, positionals } = parseArgs({
     options: {
         version: {
             type: 'string',
+        },
 
+        variant: {
+            type: 'string',
+            default: 'full',
         },
     },
     strict: true,
     allowPositionals: true,
-  });
+}) as {
+    values: {
+        version: string,
+        variant: BuildVariant,
+    },
+    positionals: string[],
+};
 
 if (!values['version']) {
     console.log('Missing --version param');
     sys.exit(-1);
 }
 
-console.log('Building: ', values['version']);
+if (values['variant'] !== 'full' && values['variant'] !== 'lite') {
-
+    console.log('--variant param must be either "full" or "lite"');
-const config = {};
+    sys.exit(-1);
-for (const target of buildTargets) {
-	await build(target, values['version'], config);
 }
+
+async function main() {
+    const config = {};
+    console.log(`Building: VERSION=${values['version']}, VARIANT=${values['variant']}`);
+    for (const target of buildTargets) {
+        await build(target, values['version']!!, values['variant'], config);
+    }
+
+    console.log('')
+    // console.log('\n** Press Enter to build or Esc to exit');
+}
+
+function onKeyPress(data: any) {
+    const keyCode = data[0];
+    if (keyCode === 13) {  // Enter key
+        main();
+    } else if (keyCode === 27) {  // Esc key
+        process.exit(0);
+    }
+}
+
+main();
+
+/*
+process.stdin.setRawMode(true);
+process.stdin.resume();
+process.stdin.on('data', onKeyPress);
+*/

dist/better-xcloud.meta.js

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

eslint.config.mjs

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

package.json

@@ -2,16 +2,22 @@
   "name": "better-xcloud",
   "module": "src/index.ts",
   "type": "module",
+  "sideEffects": false,
+  "browserslist": [
+    "Chrome >= 80"
+  ],
   "bin": {
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "latest",
+    "@types/bun": "^1.1.14",
-    "@types/node": "^20.12.7",
+    "@types/node": "^22.10.1",
-    "@types/stylus": "^0.48.42",
+    "@types/stylus": "^0.48.43",
-    "stylus": "^0.63.0"
+    "eslint": "^9.16.0",
+    "eslint-plugin-compat": "^6.0.1",
+    "stylus": "^0.64.0"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.7.2"
   }
 }

scripts/custom-flags.user.js

@@ -0,0 +1,41 @@
+// ==UserScript==
+// @name         Better xCloud - Custom flags
+// @namespace    https://github.com/redphx
+// @version      1.0.0
+// @description  Customize Better xCloud script
+// @author       redphx
+// @license      MIT
+// @match        https://www.xbox.com/*/play*
+// @run-at       document-start
+// @grant        none
+// ==/UserScript==
+'use strict';
+
+/*
+Make sure this script is being loaded before the Better xCloud script.
+
+How to:
+1. Uninstall Better xCloud script.
+2. Install this script.
+3. Reinstall Better xCloud script. All your settings are still there.
+*/
+
+// Change this to `false` if you want to temporary disable the script
+const enabled = true;
+
+enabled && (window.BX_FLAGS = {
+    /*
+    Add titleId of the game(s) you want to add here.
+    Keep in mind: this method only works with some games.
+
+    Example:
+        - Flight Simulator has this link: /play/games/microsoft-flight-simulator-standard-40th-anniversa/9PMQDM08SNK9
+        - That means its titleId is "9PMQDM08SNK9"
+        - So it becomes:
+            ForceNativeMkbTitles: [
+                "9PMQDM08SNK9",
+            ],
+    */
+    ForceNativeMkbTitles: [
+    ],
+});

src/assets/css/button.styl

@@ -1,5 +1,10 @@
 .bx-button {
-    background-color: var(--bx-default-button-color);
+    --button-rgb: var(--bx-default-button-rgb);
+    --button-hover-rgb: var(--bx-default-button-hover-rgb);
+    --button-active-rgb: var(--bx-default-button-active-rgb);
+    --button-disabled-rgb: var(--bx-default-button-disabled-rgb);
+
+    background-color: unquote('rgb(var(--button-rgb))');
     user-select: none;
     -webkit-user-select: none;
     color: #fff;
@@ -14,88 +19,187 @@
     cursor: pointer;
     overflow: hidden;
 
+    &:not([disabled]):active {
+        background-color: unquote('rgb(var(--button-active-rgb))');
+    }
+
     &:focus {
         outline: none !important;
     }
 
+    &:not([disabled]):not(:active) {
         &:hover, &.bx-focusable:focus {
-        background-color: var(--bx-default-button-hover-color);
+            background-color: unquote('rgb(var(--button-hover-rgb))');
         }
+    }
+
 
     &:disabled {
         cursor: default;
-        background-color: var(--bx-default-button-disabled-color);
+        background-color: unquote('rgb(var(--button-disabled-rgb))');
     }
 
     &.bx-ghost {
         background-color: transparent;
 
+        &:not([disabled]):not(:active) {
             &:hover, &.bx-focusable:focus {
-            background-color: var(--bx-default-button-hover-color);
+                background-color: unquote('rgb(var(--button-hover-rgb))');
+            }
         }
     }
 
     &.bx-primary {
-        background-color: var(--bx-primary-button-color);
+        --button-rgb: var(--bx-primary-button-rgb);
 
+        &:not([disabled]):active {
+            --button-active-rgb: var(--bx-primary-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
             &:hover, &.bx-focusable:focus {
-            background-color: var(--bx-primary-button-hover-color);
+                --button-hover-rgb: var(--bx-primary-button-hover-rgb);
+            }
         }
 
         &:disabled {
-            background-color: var(--bx-primary-button-disabled-color);
+            --button-disabled-rgb: var(--bx-primary-button-disabled-rgb);
+        }
+    }
+
+    &.bx-warning {
+        --button-rgb: var(--bx-warning-button-rgb);
+
+        &:not([disabled]):active {
+            --button-active-rgb: var(--bx-warning-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                --button-hover-rgb: var(--bx-warning-button-hover-rgb);
+            }
+        }
+
+        &:disabled {
+            --button-disabled-rgb: var(--bx-warning-button-disabled-rgb);
         }
     }
 
     &.bx-danger {
-        background-color: var(--bx-danger-button-color);
+        --button-rgb: var(--bx-danger-button-rgb);
 
+        &:not([disabled]):active {
+            --button-active-rgb: var(--bx-danger-button-active-rgb);
+        }
+
+        &:not([disabled]):not(:active) {
             &:hover, &.bx-focusable:focus {
-            background-color: var(--bx-danger-button-hover-color);
+                --button-hover-rgb: var(--bx-danger-button-hover-rgb);
+            }
         }
 
         &:disabled {
-            background-color: var(--bx-danger-button-disabled-color);
+            --button-disabled-rgb: var(--bx-danger-button-disabled-rgb);
         }
     }
 
+    &.bx-frosted {
+        --button-alpha: 0.2;
+        background-color: unquote('rgba(var(--button-rgb), var(--button-alpha))');
+        backdrop-filter: blur(4px) brightness(1.5);
+
+        &:not([disabled]):not(:active) {
+            &:hover, &.bx-focusable:focus {
+                background-color: unquote('rgba(var(--button-hover-rgb), var(--button-alpha))');
+            }
+        }
+    }
+
+    &.bx-drop-shadow {
+        box-shadow: 0 0 4px #00000080;
+    }
+
+    &.bx-tall {
+        height: calc(var(--bx-button-height) * 1.5) !important;
+    }
+
+    &.bx-circular {
+        border-radius: var(--bx-button-height);
+        width: var(--bx-button-height);
+        height: var(--bx-button-height);
+    }
+
     svg {
         display: inline-block;
         width: 16px;
         height: var(--bx-button-height);
-
-        &:not(:only-child) {
-            margin-right: 4px;
-        }
     }
 
     span {
         display: inline-block;
-        height: var(--bx-button-height);
+        /* height: var(--bx-button-height); */
         line-height: var(--bx-button-height);
         vertical-align: middle;
-        vertical-align: -webkit-baseline-middle;
+        /* vertical-align: -webkit-baseline-middle; */
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
+
+        &:not(:only-child) {
+            margin-left: 10px;
+        }
     }
 
-    &.bx-focusable {
+    &.bx-button-multi-lines {
+        height: auto;
+        text-align: left;
+        padding: 10px 0;
+
+        span {
+            line-height: unset;
+            display: block;
+
+            &:last-of-type {
+                    text-transform: none;
+                    font-weight: normal;
+                    font-family: "Segoe Sans Variable Text";
+                    font-size: 12px;
+                    margin-top: 4px;
+            }
+        }
+    }
+}
+
+.bx-focusable {
     position: relative;
+    overflow: visible;
 
     &::after {
         border: 2px solid transparent;
-            border-radius: 4px;
+        border-radius: 10px;
     }
 
     &:focus::after {
+        offset = -6px;
         content: '';
         border-color: white;
         position: absolute;
-            top: 0;
+        top: offset;
-            left: 0;
+        left: offset;
-            right: 0;
+        right: offset;
-            bottom: 0;
+        bottom: offset;
+    }
+
+    html[data-active-input=touch] &,
+    html[data-active-input=mouse] & {
+        &:focus::after {
+            border-color: transparent !important;
+        }
+    }
+
+    &.bx-circular {
+        &::after {
+            border-radius: var(--bx-button-height);
         }
     }
 }
@@ -107,3 +211,9 @@ a.bx-button {
         text-align: center;
     }
 }
+
+button.bx-inactive {
+    pointer-events: none;
+    opacity: 0.2;
+    background: transparent !important;
+}

src/assets/css/game-bar.styl

@@ -76,21 +76,21 @@
         }
 
         /* Touch controller buttons */
-        div[data-enabled] {
+        div[data-activated] {
             button {
                 display: none;
             }
         }
 
-        /* Show enabled button */
+        /* Show default button */
-        div[data-enabled='true'] {
+        div[data-activated='false'] {
             button:first-of-type {
                 display: block;
             }
         }
 
-        /* Show enable button */
+        /* Show activated button */
-        div[data-enabled='false'] {
+        div[data-activated='true'] {
             button:last-of-type {
                 display: block;
             }

src/assets/css/global-settings.styl

@@ -1,184 +0,0 @@
-.bx-settings-reload-button {
-    margin-top: 10px;
-    height: calc(var(--bx-button-height) * 1.5);
-}
-
-.bx-settings-container {
-    background-color: #151515;
-    user-select: none;
-    -webkit-user-select: none;
-    color: #fff;
-    font-family: var(--bx-normal-font);
-}
-
-@media (hover: hover) {
-    .bx-settings-wrapper a.bx-settings-title:hover {
-        color: #83f73a;
-    }
-}
-
-.bx-settings-wrapper {
-    width: 450px;
-    margin: auto;
-    padding: 12px 6px;
-
-    @media screen and (max-width: 450px) {
-        width: 100%;
-    }
-
-    *:focus {
-        outline: none !important;
-    }
-
-    .bx-settings-title-wrapper {
-        display: flex;
-        margin-bottom: 10px;
-        align-items: center;
-    }
-
-    a.bx-settings-title {
-        font-family: var(--bx-title-font);
-        font-size: 1.4rem;
-        text-decoration: none;
-        font-weight: bold;
-        display: block;
-        color: #5dc21e;
-        flex: 1;
-
-        &:focus {
-            color: #83f73a;
-        }
-    }
-
-    .bx-button.bx-primary {
-        margin-top: 8px;
-    }
-
-    a.bx-settings-update {
-        display: block;
-        color: #ff834b;
-        text-decoration: none;
-        margin-bottom: 8px;
-        text-align: center;
-        background: #222;
-        border-radius: 4px;
-        padding: 4px;
-
-        &:hover {
-            @media (hover: hover) {
-                color: #ff9869;
-                text-decoration: underline;
-            }
-        }
-
-        &:focus {
-            color: #ff9869;
-            text-decoration: underline;
-        }
-    }
-}
-
-.bx-settings-group-label {
-    font-weight: bold;
-    display: block;
-    font-size: 1.1rem;
-}
-
-
-.bx-settings-row {
-    display: flex;
-    padding: 6px 12px;
-    position: relative;
-
-    label {
-        flex: 1;
-        align-self: center;
-        margin-bottom: 0;
-    }
-
-
-    &:hover, &:focus-within {
-        background-color: #242424;
-    }
-
-    input {
-        align-self: center;
-        accent-color: var(--bx-primary-button-color);
-
-        &:focus {
-            accent-color: var(--bx-danger-button-color);
-        }
-    }
-
-    select {
-        &:disabled {
-            -webkit-appearance: none;
-            background: transparent;
-            text-align-last: right;
-            border: none;
-            color: #fff;
-        }
-    }
-
-    input[type=checkbox], 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) {
-        &::before {
-            content: ' ';
-            border-radius: 4px;
-            border: 2px solid #fff;
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-        }
-    }
-}
-
-.bx-settings-group-label b, .bx-settings-row label b {
-    display: block;
-    font-size: 12px;
-    font-style: italic;
-    font-weight: normal;
-    color: #828282;
-}
-
-.bx-settings-group-label b {
-    margin-bottom: 8px;
-}
-
-.bx-settings-app-version {
-    margin-top: 10px;
-    text-align: center;
-    color: #747474;
-    font-size: 12px;
-}
-
-.bx-donation-link {
-    display: block;
-    text-align: center;
-    text-decoration: none;
-    height: 20px;
-    line-height: 20px;
-    font-size: 14px;
-    margin-top: 10px;
-    color: #5dc21e;
-
-    &:hover {
-        color: #6dd72b;
-    }
-
-    &:focus {
-        text-decoration: underline;
-    }
-}
-
-.bx-settings-custom-user-agent {
-    display: block;
-    width: 100%;
-}

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/header.styl

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

src/assets/css/key-binding-dialog.styl

@@ -1,12 +1,12 @@
-.bx-dialog-overlay {
+.bx-key-binding-dialog-overlay {
     position: fixed;
     inset: 0;
-    z-index: var(--bx-dialog-overlay-z-index);
+    z-index: var(--bx-key-binding-dialog-overlay-z-index);
     background: black;
     opacity: 50%;
 }
 
-.bx-dialog {
+.bx-key-binding-dialog {
     display: flex;
     flex-flow: column;
     max-height: 90vh;
@@ -18,7 +18,7 @@
     min-width: 420px;
     padding: 20px;
     border-radius: 8px;
-    z-index: var(--bx-dialog-z-index);
+    z-index: var(--bx-key-binding-dialog-z-index);
     background: #1a1b1e;
     color: #fff;
     font-weight: 400;
@@ -33,27 +33,14 @@
     }
 
     h2 {
-        display: flex;
         margin-bottom: 12px;
-
-        b {
-            flex: 1;
         color: #fff;
         display: block;
         font-family: var(--bx-title-font);
-            font-size: 26px;
+        font-size: 32px;
         font-weight: 400;
         line-height: var(--bx-button-height);
     }
-    }
-
-    &.bx-binding-dialog {
-        h2 {
-            b {
-                font-family: var(--bx-promptfont-font) !important;
-            }
-        }
-    }
 
     > div {
         overflow: auto;
@@ -85,11 +72,26 @@
             background-color: #515863;
         }
     }
+
+    ul {
+        margin-bottom: 1rem;
+
+        li {
+            display: none;
+        }
+
+        &[data-flags*="[1]"] > li[data-flag="1"],
+        &[data-flags*="[2]"] > li[data-flag="2"],
+        &[data-flags*="[4]"] > li[data-flag="4"],
+        &[data-flags*="[8]"] > li[data-flag="8"] {
+            display: list-item;
+        }
+    }
 }
 
 
 @media screen and (max-width: 450px) {
-    .bx-dialog {
+    .bx-key-binding-dialog {
         min-width: 100%;
     }
 }

src/assets/css/misc.styl

@@ -0,0 +1,21 @@
+.bx-product-details-buttons {
+    display: flex;
+    gap: 10px;
+    flex-direction: row;
+
+    button {
+        max-width: max-content;
+        margin: 10px 0 0 0;
+        display: flex;
+    }
+}
+
+@media (min-width: 568px) and (max-height: 480px) {
+    .bx-product-details-buttons {
+        flex-direction: column;
+
+        button {
+            margin: 8px 0 0 10px;
+        }
+    }
+}

src/assets/css/mkb.styl

@@ -4,31 +4,19 @@
     flex: 1;
     padding-bottom: 10px;
     overflow: hidden;
-
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        text-align: right;
-        border: none;
-        color: #fff;
-    }
 }
 
 .bx-mkb-pointer-lock-msg {
-    display: flex;
-    cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
     left: 50%;
-    top: 50%;
+    bottom: 40px;
-    transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%);
     margin: auto;
-    background: #000000b3;
+    background: #151515;
     z-index: var(--bx-mkb-pointer-lock-msg-z-index);
     color: #fff;
-    text-align: center;
     font-weight: 400;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
     font-size: 1.3rem;
@@ -36,91 +24,55 @@
     border-radius: 8px;
     align-items: center;
     box-shadow: 0 0 6px #000;
-
+    min-width: 300px;
-    &:hover {
+    opacity: 0.9;
-        background: #151515;
-    }
-
-    button {
-        margin-right: 12px;
-        height: 60px;
-    }
-
-    svg {
-        width: 32px;
-    }
-
-    div {
     display: flex;
     flex-direction: column;
+    gap: 10px;
+
+    &:hover {
+        opacity: 1;
+    }
+
+    > p {
+        margin: 0;
+        width: 100%;
+        font-size: 22px;
+        margin-bottom: 4px;
+        font-weight: bold;
         text-align: left;
     }
 
-    p {
+    > div {
-        margin: 0;
+        width: 100%;
-
-        &:first-child {
-            font-size: 22px;
-            margin-bottom: 8px;
-        }
-
-        &:last-child {
-            font-size: 14px;
-            font-style: italic;
-        }
-    }
-}
-
-.bx-mkb-preset-tools {
         display: flex;
-    margin-bottom: 12px;
+        flex-direction: row;
-
-    select {
-        flex: 1;
-    }
 
+        gap: 10px;
         button {
-        margin-left: 6px;
+            &:first-of-type {
+                flex-shrink: 1;
             }
-}
 
-
+            &:last-of-type {
-.bx-mkb-settings-rows {
+                flex-grow: 1;
-    flex: 1;
+            }
-    overflow: scroll;
+        }
+    }
 }
 
 .bx-mkb-key-row {
     display: flex;
     margin-bottom: 10px;
     align-items: center;
+    gap: 20px;
 
 
     label {
         margin-bottom: 0;
         font-family: var(--bx-promptfont-font);
-        font-size: 26px;
+        font-size: 32px;
         text-align: center;
-        width: 26px;
-        height: 32px;
-        line-height: 32px;
-    }
-
-    button {
-        flex: 1;
-        height: 32px;
-        line-height: 32px;
-        margin: 0 0 0 10px;
-        background: transparent;
-        border: none;
-        color: white;
-        border-radius: 0;
-        border-left: 1px solid #373737;
-
-        &:hover {
-            background: transparent;
-            cursor: default;
-        }
     }
 }
 
@@ -157,10 +109,58 @@
 
 .bx-mkb-note {
     display: block;
-    margin: 16px 0 10px;
+    margin: 0 0 10px;
     font-size: 12px;
+    text-align: center;
+}
 
-    &:first-of-type {
+button.bx-binding-button {
-        margin-top: 0;
+    flex: 1;
+    min-height: 38px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    align-self: center;
+    padding: 0 6px;
+
+    &:disabled {
+        background: #131416;
+        padding: 0 8px;
+    }
+
+    &:not(:disabled) {
+        border: 2px solid transparent;
+        border-top: none;
+        border-bottom: 4px solid #252525;
+        background: #3b3b3b;
+        cursor: pointer;
+
+        &:hover, &.bx-focusable:focus {
+            background: #20b217;
+            border-bottom-color: #186c13;
+        }
+
+        &:active {
+            background: #16900f;
+            border-bottom: 3px solid #0c4e08;
+            border-left-width: 2px;
+            border-right-width: 2px;
+        }
+
+        &.bx-focusable:focus {
+            &::after {
+                top: -6px;
+                left: -8px;
+                right: -8px;
+                bottom: -10px;
+            }
+        }
+    }
+
+    .bx-settings-row .bx-binding-button-wrapper & {
+        min-width: 60px;
     }
 }

src/assets/css/navigation-dialog.styl

@@ -0,0 +1,218 @@
+.bx-navigation-dialog {
+    position: absolute;
+    z-index: var(--bx-navigation-dialog-z-index);
+    font-family: var(--bx-title-font);
+
+    *:focus {
+        outline: none !important;
+    }
+
+    select:disabled {
+        -webkit-appearance: none;
+        text-align-last: right;
+        text-align: right;
+        color: #fff;
+        background: #131416;
+        border: none;
+        border-radius: 4px;
+        padding: 0 5px;
+    }
+}
+
+.bx-navigation-dialog-overlay {
+    position: fixed;
+    background: #0b0b0be3;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--bx-navigation-dialog-overlay-z-index);
+
+    &[data-is-playing="true"] {
+        background: transparent;
+    }
+}
+
+.bx-centered-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
+    background: #1a1b1e;
+    border-radius: 10px;
+    width: 450px;
+    max-width: calc(100vw - 20px);
+    margin: 0 0 0 auto;
+    padding: 20px;
+
+    max-height: 95vh;
+    flex-direction: column;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .bx-dialog-title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 10px;
+
+        p {
+            padding: 0;
+            margin: 0;
+            flex: 1;
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+
+        button {
+            flex-shrink: 0;
+        }
+    }
+
+    .bx-dialog-content {
+        flex: 1;
+        overflow: auto;
+        overflow-x: hidden;
+
+        > div {
+        }
+    }
+
+    .bx-dialog-preset-tools {
+        display: flex;
+        margin-bottom: 12px;
+        gap: 6px;
+
+        select {
+            flex: 1;
+        }
+    }
+}
+
+.bx-centered-dialog,
+.bx-settings-dialog {
+    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;
+        }
+    }
+
+    label {
+        margin: 0;
+    }
+}
+
+.bx-controller-shortcuts-manager-container {
+    .bx-shortcut-note {
+        margin-top: 10px;
+        font-size: 14px;
+        text-align: center;
+    }
+
+    .bx-shortcut-row {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 10px;
+        align-items: center;
+
+        label.bx-prompt {
+            flex-shrink: 0;
+            font-size: 32px;
+            margin: 0;
+
+            &::first-letter {
+                letter-spacing: 6px;
+            }
+        }
+
+        .bx-shortcut-actions {
+            flex: 1;
+            position: relative;
+
+            select {
+                width: 100%;
+                height: 100%;
+                min-height: 38px;
+                display: block;
+
+                &:first-of-type {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                }
+
+                &:last-of-type {
+                    opacity: 0;
+                    z-index: calc(var(--bx-settings-z-index) + 1);
+                }
+            }
+        }
+    }
+
+    select:disabled {
+        text-align: left;
+        text-align-last: left;
+    }
+}
+
+.bx-keyboard-shortcuts-manager-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    fieldset {
+        background: #2a2a2a;
+        border: 1px solid #2a2a2a;
+        border-radius: 4px;
+        padding: 4px;
+    }
+
+    legend {
+        width: auto;
+        padding: 4px 8px;
+        margin: 0 4px 4px;
+        background: #004f87;
+        box-shadow: 0px 2px 0px #071e3d;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .bx-settings-row {
+        background: none;
+    }
+}

src/assets/css/number-stepper.styl

@@ -1,18 +1,25 @@
 .bx-number-stepper {
     text-align: center;
 
+    > div {
+        display: flex;
+        align-items: center;
+
         span {
+            flex: 1;
             display: inline-block;
             min-width: 40px;
             font-family: var(--bx-monospaced-font);
-        font-size: 14px;
+            font-size: 13px;
+            margin: 0 4px;
         }
 
         button {
+            flex-shrink: 0;
             border: none;
             width: 24px;
             height: 24px;
-        margin: 0 4px;
+            margin: 0;
             line-height: 24px;
             background-color: var(--bx-default-button-color);
             color: #fff;
@@ -20,7 +27,6 @@
             font-weight: bold;
             font-size: 14px;
             font-family: var(--bx-monospaced-font);
-        color: #fff;
 
             &:hover {
                 @media (hover: hover) {
@@ -36,15 +42,23 @@
                 font-family: var(--bx-title-font);
             }
         }
+    }
 
     input[type="range"] {
         display: block;
-        margin: 12px auto 2px;
+        margin: 8px 0 2px auto;
-        width: 180px;
+        min-width: 180px;
+        width: 100%;
         color: #959595 !important;
     }
 
     input[type=range]:disabled, button:disabled {
         display: none;
     }
+
+    &[data-disabled=true], &[disabled=true] {
+        input[type=range], button {
+            display: none;
+        }
+    }
 }

src/assets/css/remote-play.styl

@@ -1,36 +1,16 @@
-.bx-remote-play-popup {
-    width: 100%;
-    max-width: 1920px;
-    margin: auto;
-    position: relative;
-    height: 0.1px;
-    overflow: visible;
-    z-index: var(--bx-remote-play-popup-z-index);
-}
-
 .bx-remote-play-container {
-    position: absolute;
+    position: fixed;
-    right: 10px;
+    top: 50%;
-    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    color: white;
     background: #1a1b1e;
     border-radius: 10px;
     width: 420px;
     max-width: calc(100vw - 20px);
     margin: 0 0 0 auto;
     padding: 20px;
-    box-shadow: #00000080 0px 0px 12px 0px;
-
-    @media (min-width:480px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 32px);
-    }
-
-    @media (min-width:768px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 48px);
-    }
-
-    @media (min-width:1920px) and (min-height:calc(480px + 1px)) {
-        right: calc(env(safe-area-inset-right, 0px) + 80px);
-    }
 
     > .bx-button {
         display: table;
@@ -57,14 +37,6 @@
             font-size: 12px;
         }
     }
-
-    span {
-        font-weight: bold;
-        font-size: 18px;
-        display: block;
-        margin-bottom: 8px;
-        text-align: center;
-    }
 }
 
 .bx-remote-play-resolution {
@@ -114,10 +86,15 @@
 
 .bx-remote-play-power-state {
     color: #888;
-    font-size: 14px;
+    font-size: 12px;
 }
 
 .bx-remote-play-connect-button {
     min-height: 100%;
     margin: 4px 0;
 }
+
+.bx-remote-play-buttons {
+    display: flex;
+    justify-content: space-between;
+}

src/assets/css/root.styl

@@ -1,3 +1,18 @@
+button_color(name, normal, hover, active, disabled)
+    prefix = unquote('--bx-' + name + '-button');
+    {prefix + '-color'}: normal;
+    {prefix + '-rgb'}: red(normal), green(normal), blue(normal);
+
+    {prefix + '-hover-color'}: hover;
+    {prefix + '-hover-rgb'}: red(hover), green(hover), blue(hover);
+
+    {prefix + '-active-color'}: active;
+    {prefix + '-active-rgb'}: red(active), green(active), blue(active);
+
+    {prefix + '-disabled-color'}: disabled;
+    {prefix + '-disabled-rgb'}: red(disabled), green(disabled), blue(disabled);
+
+
 :root {
     --bx-title-font: Bahnschrift, Arial, Helvetica, sans-serif;
     --bx-title-font-semibold: Bahnschrift Semibold, Arial, Helvetica, sans-serif;
@@ -5,30 +20,28 @@
     --bx-monospaced-font: Consolas, "Courier New", Courier, monospace;
     --bx-promptfont-font: promptfont;
 
-    --bx-button-height: 36px;
+    --bx-button-height: 40px;
 
-    --bx-default-button-color: #2d3036;
+    button_color('default', #2d3036, #515863, #222428, #8e8e8e);
-    --bx-default-button-hover-color: #515863;
+    button_color('primary', #008746, #04b358, #044e2a, #448262);
-    --bx-default-button-disabled-color: #8e8e8e;
+    button_color('warning', #c16e04, #fa9005, #965603, #a2816c);
+    button_color('danger', #c10404, #e61d1d, #a26c6c, #df5656);
 
-    --bx-primary-button-color: #008746;
+    --bx-fullscreen-text-z-index: 9999;
-    --bx-primary-button-hover-color: #04b358;
+    --bx-toast-z-index: 6000;
-    --bx-primary-button-disabled-color: #448262;
+    --bx-key-binding-dialog-z-index: 5010;
+    --bx-key-binding-dialog-overlay-z-index: 5000;
 
-    --bx-danger-button-color: #c10404;
+    --bx-stats-bar-z-index: 4010;
-    --bx-danger-button-hover-color: #e61d1d;
-    --bx-danger-button-disabled-color: #a26c6c;
 
-    --bx-toast-z-index: 9999;
+    --bx-navigation-dialog-z-index: 3010;
-    --bx-dialog-z-index: 9101;
+    --bx-navigation-dialog-overlay-z-index: 3000;
-    --bx-dialog-overlay-z-index: 9100;
+
-    --bx-remote-play-popup-z-index: 9090;
+    --bx-mkb-pointer-lock-msg-z-index: 2000;
-    --bx-stats-bar-z-index: 9001;
+
-    --bx-stream-settings-z-index: 9000;
+    --bx-game-bar-z-index: 1000;
-    --bx-mkb-pointer-lock-msg-z-index: 8999;
+    --bx-screenshot-animation-z-index: 200;
-    --bx-game-bar-z-index: 8888;
     --bx-wait-time-box-z-index: 100;
-    --bx-screenshot-animation-z-index: 1;
 }
 
 @font-face {
@@ -46,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;
     }
@@ -64,6 +77,14 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     overflow: hidden !important;
 }
 
+.bx-hide-scroll-bar {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 .bx-gone {
     display: none !important;
 }
@@ -79,6 +100,19 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     visibility: hidden !important;
 }
 
+.bx-invisible {
+    opacity: 0;
+}
+
+.bx-unclickable {
+    pointer-events: none;
+}
+
+.bx-pixel {
+    width: 1px !important;
+    height: 1px !important;
+}
+
 .bx-no-margin {
     margin: 0 !important;
 }
@@ -88,7 +122,26 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
 }
 
 .bx-prompt {
-    font-family: var(--bx-promptfont-font);
+    font-family: var(--bx-promptfont-font) !important;
+}
+
+.bx-line-through {
+    text-decoration: line-through !important;
+}
+
+.bx-normal-case {
+    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;
 }
 
 /* Hide UI elements */
@@ -107,3 +160,81 @@ div[class*=NotFocusedDialog] {
 #game-stream video:not([src]) {
     visibility: hidden;
 }
+
+/* Hide Controller icon in Game tiles */
+div[class*=SupportedInputsBadge] {
+    &:not(:has(:nth-child(2))), svg:first-of-type {
+        display: none;
+    }
+}
+
+
+.bx-game-tile-wait-time {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background: #0000008c;
+    display: flex;
+    border-radius: 4px 0 4px 0;
+    align-items: center;
+    padding: 4px 8px;
+
+    svg {
+        width: 14px;
+        height: 16px;
+        margin-right: 2px;
+    }
+
+    span {
+        display: inline-block;
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        font-weight: bold;
+        margin-left: 2px;
+    }
+}
+
+
+.bx-fullscreen-text {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000000cc;
+    z-index: var(--bx-fullscreen-text-z-index);
+    line-height: 100vh;
+    color: #fff;
+    text-align: center;
+    font-weight: 400;
+    font-family: var(--bx-normal-font);
+    font-size: 1.3rem;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Device Code page */
+#root {
+    section[class*=DeviceCodePage-module__page] {
+        margin-left: 20px !important;
+        margin-right: 20px !important;
+        margin-top: 20px !important;
+        max-width: 800px !important;
+    }
+
+    div[class*=DeviceCodePage-module__back] {
+        display: none;
+    }
+}
+
+.bx-blink-me {
+  animation: bx-blinker 1s linear infinite;
+}
+
+@keyframes bx-blinker {
+  100% {
+    opacity: 0;
+  }
+}

src/assets/css/settings-dialog.styl

@@ -0,0 +1,540 @@
+.bx-settings-dialog {
+    display: flex;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.98;
+    user-select: none;
+    -webkit-user-select: none;
+
+    .bx-focusable {
+        &::after {
+            border-radius: 4px;
+        }
+
+        &:focus::after {
+            offset = 0;
+
+            top: offset;
+            left: offset;
+            right: offset;
+            bottom: offset;
+        }
+    }
+
+    .bx-settings-reload-note {
+        font-size: 0.8rem;
+        display: block;
+        padding: 8px;
+        font-style: italic;
+        font-weight: normal;
+        height: var(--bx-button-height);
+    }
+}
+
+.bx-settings-tabs-container {
+    position: fixed;
+    width: 48px;
+    max-height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    > div:last-of-type {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+
+        button {
+            flex-shrink: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            margin-top: 8px;
+            height: unset;
+            padding: 8px 10px;
+
+            svg {
+                size = 16px;
+
+                width: size;
+                height: size;
+            }
+        }
+    }
+}
+
+.bx-settings-tabs {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0 0 0 8px;
+    box-shadow: 0 0 6px #000;
+    overflow: overlay;
+    flex: 1;
+
+    svg {
+        size = 24px;
+        width: size;
+        height: size;
+        padding: 10px;
+        flex-shrink: 0;
+        box-sizing: content-box;
+        background: #131313;
+        cursor: pointer;
+        border-left: 4px solid #1e1e1e;
+
+        &.bx-active {
+            background: #222;
+            border-color: #008746;
+        }
+
+        &:not(.bx-active):hover {
+            background: #2f2f2f;
+            border-color: #484848;
+        }
+
+        &:focus {
+            border-color: #fff;
+        }
+
+        &[data-group=global] {
+            &[data-need-refresh=true] {
+                background: var(--bx-danger-button-color) !important;
+
+                &:hover {
+                    background: var(--bx-danger-button-hover-color) !important;
+                }
+            }
+        }
+    }
+}
+
+
+.bx-settings-tab-contents {
+    tabsWidth = 48px;
+
+    flex-direction: column;
+    padding: 10px;
+    margin-left: tabsWidth;
+    width: 450px;
+    max-width: calc(100vw - tabsWidth);
+    background: #1a1b1e;
+    color: #fff;
+    font-weight: 400;
+    font-size: 16px;
+    font-family: var(--bx-title-font);
+    text-align: center;
+    box-shadow: 0px 0px 6px #000;
+    overflow: overlay;
+    z-index: 1;
+
+    > div[data-tab-group=mkb] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .bx-top-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 8px;
+
+        .bx-button {
+            display: block;
+        }
+    }
+
+    h2 {
+        margin: 16px 0 8px 0;
+        display: flex;
+        align-items: center;
+
+        &:first-of-type {
+            margin-top: 0;
+        }
+
+        span {
+            display: inline-block;
+            font-size: 20px;
+            font-weight: bold;
+            text-align: left;
+            flex: 1;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            min-height: var(--bx-button-height);
+            align-content: center;
+        }
+    }
+}
+
+@media (max-width: 500px) {
+    .bx-settings-tab-contents {
+        width: calc(100vw - 48px);
+    }
+}
+
+.bx-settings-row {
+    display: flex;
+    gap: 10px;
+    padding: 16px 10px;
+    margin: 0;
+    background: #2a2a2a;
+    border-bottom: 1px solid #343434;
+
+    &:hover, &:focus-within {
+        background-color: #242424;
+    }
+
+    &:not(:has(> input[type=checkbox])) {
+        flex-wrap: wrap;
+    }
+
+    /*
+    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
+        border-left-color: white;
+    }
+    */
+
+    > span.bx-settings-label {
+        font-size: 14px;
+        display: block;
+        text-align: left;
+        align-self: center;
+        margin-bottom: 0 !important;
+        flex: 1;
+
+        + * {
+            margin: 0 0 0 auto;
+        }
+    }
+
+    &[data-multi-lines="true"] {
+        flex-direction: column;
+
+        > span.bx-settings-label {
+            align-self: start;
+
+            + * {
+                margin: unset;
+            }
+        }
+    }
+}
+
+.bx-settings-dialog-note {
+    display: block;
+    color: #afafb0;
+    font-size: 12px;
+    font-weight: lighter;
+    font-style: italic;
+
+    &:not(:has(a)) {
+        margin-top: 4px;
+    }
+
+    a {
+        display: inline-block;
+        padding: 4px;
+    }
+}
+
+.bx-settings-custom-user-agent {
+    display: block;
+    width: 100%;
+    padding: 6px;
+}
+
+.bx-donation-link {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.bx-debug-info {
+    button {
+        margin-top: 10px;
+    }
+
+    pre {
+        margin-top: 10px;
+        cursor: copy;
+        color: white;
+        padding: 8px;
+        border: 1px solid #2d2d2d;
+        background: #212121;
+        white-space: break-spaces;
+        text-align: left;
+
+        &:hover {
+            background: #272727;
+        }
+    }
+}
+
+.bx-settings-app-version {
+    margin-top: 10px;
+    text-align: center;
+    color: #747474;
+    font-size: 12px;
+}
+
+.bx-note-unsupported {
+    display: block;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: normal;
+    color: #828282;
+}
+
+.bx-settings-tab-contents {
+    border-radius-size = 6px;
+
+    > div {
+        // Label at the beginning
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:has(+ .bx-settings-row) {
+            border-top-left-radius: border-radius-size;
+            border-top-right-radius: border-radius-size;
+        }
+
+        // Label at the end
+        .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-bottom-left-radius: border-radius-size;
+            border-bottom-right-radius: border-radius-size;
+        }
+
+        // Single label
+        *:not(.bx-settings-row):has(+ .bx-settings-row) + .bx-settings-row:not(:has(+ .bx-settings-row)) {
+            border: none;
+            border-radius: border-radius-size;
+        }
+    }
+}
+
+.bx-suggest-toggler {
+    text-align: left;
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #003861;
+
+    label {
+        flex: 1;
+        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;
+}
+
+.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;
+                }
+            }
+        }
+    }
+}
+
+.bx-sub-content-box {
+    background: #161616;
+    padding: 10px;
+    box-shadow: 0px 0px 12px #0f0f0f inset;
+    border-radius: 10px;
+
+    .bx-settings-row & {
+        background: #202020;
+        padding: 12px;
+        box-shadow: 0 0 4px #000000 inset;
+        border-radius: 6px;
+    }
+}
+
+.bx-controller-extra-settings {
+    &[data-has-gamepad=true] {
+        > :first-child {
+            display: none;
+        }
+
+        > :last-child {
+            display: block;
+        }
+    }
+
+    &[data-has-gamepad=false] {
+        > :first-child {
+            display: block;
+        }
+
+        > :last-child {
+            display: none;
+        }
+    }
+
+    .bx-controller-extra-wrapper {
+        flex: 1;
+        min-width: 1px;
+    }
+
+    .bx-sub-content-box {
+        flex: 1;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+
+        > label {
+            font-size: 14px;
+        }
+    }
+}
+
+.bx-preset-row {
+    display: flex;
+    gap: 8px;
+
+    .bx-select {
+        flex: 1;
+    }
+}

src/assets/css/stream-settings.styl

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

src/assets/css/stream-stats.styl

@@ -1,6 +1,5 @@
 /* STATS BADGE */
 .bx-badges {
-    position: absolute;
     margin-left: 0px;
     user-select: none;
     -webkit-user-select: none;
@@ -21,26 +20,60 @@
 
 .bx-badge-name {
     background-color: #2d3036;
-    display: inline-block;
-    padding: 2px 8px;
     border-radius: 4px 0 0 4px;
-    text-transform: uppercase;
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
 }
 
 .bx-badge-value {
     background-color: grey;
-    display: inline-block;
-    padding: 2px 8px;
     border-radius: 0 4px 4px 0;
 }
 
+.bx-badge-name, .bx-badge-value {
+    display: inline-block;
+    padding: 0 8px;
+    /* height: 30px; */
+    line-height: 30px;
+    vertical-align: bottom;
+}
+
 .bx-badge-battery[data-charging=true] span:first-of-type::after {
     content: ' ⚡️';
 }
 
+div[class^=StreamMenu-module__container] .bx-badges {
+    position: absolute;
+    max-width: 500px;
+}
+
+#gamepass-dialog-root .bx-badges {
+    position: fixed;
+    top: 60px;
+    left: 460px;
+    max-width: 500px;
+
+    @media (min-width: 568px) and (max-height: 480px) {
+        position: unset;
+        top: unset;
+        left: unset;
+        margin: 8px 0;
+    }
+
+    @media (min-width: 480px) and (min-height: calc(481px)) {
+
+    }
+}
+
+
 /* STATS BAR */
 .bx-stats-bar {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
@@ -53,22 +86,34 @@
     z-index: var(--bx-stats-bar-z-index);
     text-wrap: nowrap;
 
+    &[data-stats*="[time]"] > .bx-stat-time,
+    &[data-stats*="[play]"] > .bx-stat-play,
+    &[data-stats*="[batt]"] > .bx-stat-batt,
     &[data-stats*="[fps]"] > .bx-stat-fps,
     &[data-stats*="[ping]"] > .bx-stat-ping,
+    &[data-stats*="[jit]"] > .bx-stat-jit,
     &[data-stats*="[btr]"] > .bx-stat-btr,
     &[data-stats*="[dt]"] > .bx-stat-dt,
     &[data-stats*="[pl]"] > .bx-stat-pl,
-    &[data-stats*="[fl]"] > .bx-stat-fl {
+    &[data-stats*="[fl]"] > .bx-stat-fl,
-        display: inline-block;
+    &[data-stats*="[dl]"] > .bx-stat-dl,
+    &[data-stats*="[ul]"] > .bx-stat-ul {
+        display: inline-flex;
+        align-items: baseline;
     }
 
+    &[data-stats$="[time]"] > .bx-stat-time,
+    &[data-stats$="[play]"] > .bx-stat-play,
+    &[data-stats$="[batt]"] > .bx-stat-batt,
     &[data-stats$="[fps]"] > .bx-stat-fps,
     &[data-stats$="[ping]"] > .bx-stat-ping,
+    &[data-stats$="[jit]"] > .bx-stat-jit,
     &[data-stats$="[btr]"] > .bx-stat-btr,
     &[data-stats$="[dt]"] > .bx-stat-dt,
     &[data-stats$="[pl]"] > .bx-stat-pl,
-    &[data-stats$="[fl]"] > .bx-stat-fl {
+    &[data-stats$="[fl]"] > .bx-stat-fl,
-        margin-right: 0;
+    &[data-stats$="[dl]"] > .bx-stat-dl,
+    &[data-stats$="[ul]"] > .bx-stat-ul {
         border-right: none;
     }
 
@@ -106,7 +151,6 @@
 
     > div {
         display: none;
-        margin-right: 8px;
         border-right: 1px solid #fff;
         padding-right: 8px;
     }
@@ -114,7 +158,7 @@
     label {
         margin: 0 8px 0 0;
         font-family: var(--bx-title-font);
-        font-size: inherit;
+        font-size: 70%;
         font-weight: bold;
         vertical-align: middle;
         cursor: help;

src/assets/css/stream.styl

@@ -20,6 +20,18 @@ body[data-media-type=tv] .bx-stream-refresh-button {
     top: calc(var(--gds-focus-borderSize) + 80px) !important;
 }
 
+.bx-stream-home-button {
+    top: calc(env(safe-area-inset-top, 0px) + 10px + 50px * 2) !important;
+}
+
+body[data-media-type=default] .bx-stream-home-button {
+    left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
+}
+
+body[data-media-type=tv] .bx-stream-home-button {
+    top: calc(var(--gds-focus-borderSize) + 80px * 2) !important;
+}
+
 @keyframes bx-anim-taking-screenshot {
     0% {
         border: 0px solid #ffffff80;
@@ -53,3 +65,18 @@ div[data-testid=media-container] {
     align-self: center;
     background: #000;
 }
+
+#game-stream canvas {
+    position: absolute;
+    align-self: center;
+    margin: auto;
+    left: 0;
+    right: 0;
+}
+
+#gamepass-dialog-root div[class^=Guide-module__guide] {
+    .bx-button {
+        overflow: visible;
+        margin-bottom: 12px;
+    }
+}

src/assets/css/styles.styl

@@ -2,15 +2,18 @@
 
 @import 'button.styl';
 @import 'header.styl';
-@import 'global-settings.styl';
+@import 'key-binding-dialog.styl';
-@import 'dialog.styl';
+@import 'navigation-dialog.styl';
+@import 'settings-dialog.styl';
 @import 'toast.styl';
 @import 'loading-screen.styl';
 @import 'remote-play.styl';
+@import 'web-components.styl';
+@import 'guide-menu.styl';
 
 @import 'stream.styl';
 @import 'number-stepper.styl';
 @import 'game-bar.styl';
 @import 'stream-stats.styl';
-@import 'stream-settings.styl';
 @import 'mkb.styl';
+@import 'misc.styl';

src/assets/css/web-components.styl

@@ -0,0 +1,157 @@
+select.bx-select {
+    min-height: 30px;
+}
+
+div.bx-select {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+    gap: 8px;
+
+    select {
+        // Render offscreen instead of "display: none" so we could get its size
+        position: absolute !important;
+        top: -9999px !important;
+        left: -9999px !important;
+        visibility: hidden !important;
+
+        &:disabled {
+            & ~ button {
+                display: none;
+            }
+
+            & ~ div {
+                background: #131416;
+                color: white;
+                pointer-events: none;
+
+                .bx-select-indicators {
+                    visibility: hidden;
+                }
+            }
+        }
+    }
+
+    > div, button.bx-select-value {
+        min-width: 120px;
+        text-align: left;
+        line-height: 24px;
+        vertical-align: middle;
+        background: #fff;
+        color: #000;
+        border-radius: 4px;
+        padding: 2px 8px;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+    }
+
+    > div {
+        min-height: 24px;
+        box-sizing: content-box;
+
+        input {
+            display: inline-block;
+            margin-right: 8px;
+        }
+
+        label {
+            margin-bottom: 0;
+            font-size: 14px;
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            span {
+                display: block;
+                font-size: 10px;
+                font-weight: bold;
+                text-align: left;
+                line-height: initial;
+                white-space: pre;
+            }
+        }
+    }
+
+    button.bx-select-value {
+        border: none;
+        cursor: pointer;
+        min-height: 30px;
+        font-size: 0.9rem;
+        align-items: center;
+
+        > div {
+            display: flex;
+            width: 100%;
+        }
+
+        span {
+            flex: 1;
+            text-align: left;
+            display: inline-block;
+        }
+
+        input {
+            margin: 0 4px;
+            accent-color: var(--bx-primary-button-color);
+            pointer-events: none;
+        }
+
+        &:hover,
+        &:focus {
+            input {
+                accent-color: var(--bx-danger-button-color);
+            }
+
+            &::after {
+                border-color: #4d4d4d !important;
+            }
+        }
+    }
+
+    button.bx-button {
+        border: none;
+        height: 24px;
+        width: 24px;
+        padding: 0;
+        line-height: 24px;
+        color: #fff;
+        border-radius: 4px;
+        font-weight: bold;
+        font-size: 12px;
+        font-family: var(--bx-monospaced-font);
+        flex-shrink: 0;
+
+        span {
+            line-height: unset;
+        }
+    }
+}
+
+.bx-select-indicators {
+    display: flex;
+    height: 4px;
+    gap: 2px;
+    margin-bottom: 2px;
+
+    span {
+        content: ' ';
+        display: inline-block;
+        flex: 1;
+        background: #cfcfcf;
+        border-radius: 4px;
+
+        &[data-highlighted] {
+            background: #9c9c9c;
+        }
+
+        &[data-selected] {
+            background: #aacfe7;
+        }
+
+        &[data-highlighted][data-selected] {
+            background: #5fa3d0;
+        }
+    }
+}

src/assets/header_script.lite.txt

@@ -0,0 +1,13 @@
+// ==UserScript==
+// @name         Better xCloud (Lite)
+// @namespace    https://github.com/redphx
+// @version      [[VERSION]]
+// @description  Improve Xbox Cloud Gaming (xCloud) experience
+// @author       redphx
+// @license      MIT
+// @match        https://www.xbox.com/*/play*
+// @match        https://www.xbox.com/*/auth/msa?*loggedIn*
+// @run-at       document-end
+// @grant        none
+// ==/UserScript==
+"use strict";

src/assets/header_script.txt

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

src/assets/svg/battery-full.svg

@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke-miterlimit='2' viewBox='0 0 32 32'>
+    <path d='M24.774 6.71H3.097C1.398 6.71 0 8.108 0 9.806v12.387c0 1.699 1.398 3.097 3.097 3.097h21.677c1.699 0 3.097-1.398 3.097-3.097V9.806c0-1.699-1.398-3.097-3.097-3.097zm1.032 15.484a1.04 1.04 0 0 1-1.032 1.032H3.097a1.04 1.04 0 0 1-1.032-1.032V9.806a1.04 1.04 0 0 1 1.032-1.032h21.677a1.04 1.04 0 0 1 1.032 1.032v12.387zm-2.065-10.323v8.258a1.04 1.04 0 0 1-1.032 1.032H5.161a1.04 1.04 0 0 1-1.032-1.032v-8.258a1.04 1.04 0 0 1 1.032-1.032H22.71a1.04 1.04 0 0 1 1.032 1.032zm8.258 0v8.258a1.04 1.04 0 0 1-1.032 1.032 1.04 1.04 0 0 1-1.032-1.032v-8.258a1.04 1.04 0 0 1 1.032-1.032A1.04 1.04 0 0 1 32 11.871z' fill-rule='nonzero'/>
+</svg>

src/assets/svg/better-xcloud.svg

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

src/assets/svg/camera.svg

@@ -1,6 +1,6 @@
 <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
-    <g transform="matrix(.150985 0 0 .150985 -3.32603 -2.72209)" fill="none" stroke="#fff" stroke-width="16">
+    <g transform='matrix(.150985 0 0 .150985 -3.32603 -2.72209)' fill='none' stroke='#fff' stroke-width='16'>
-        <path d="M208 208H48c-8.777 0-16-7.223-16-16V80c0-8.777 7.223-16 16-16h32l16-24h64l16 24h32c8.777 0 16 7.223 16 16v112c0 8.777-7.223 16-16 16z"/>
+        <path d='M208 208H48c-8.777 0-16-7.223-16-16V80c0-8.777 7.223-16 16-16h32l16-24h64l16 24h32c8.777 0 16 7.223 16 16v112c0 8.777-7.223 16-16 16z'/>
-        <circle cx="128" cy="132" r="36"/>
+        <circle cx='128' cy='132' r='36'/>
     </g>
 </svg>

src/assets/svg/caret-left.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' stroke='#fff' fill='#fff' height='100%' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
-    <path d="M6.755 1.924l-6 13.649c-.119.27-.119.578 0 .849l6 13.649c.234.533.857.775 1.389.541s.775-.857.541-1.389L2.871 15.997 8.685 2.773c.234-.533-.008-1.155-.541-1.389s-1.155.008-1.389.541z"/>
+    <path d='M6.755 1.924l-6 13.649c-.119.27-.119.578 0 .849l6 13.649c.234.533.857.775 1.389.541s.775-.857.541-1.389L2.871 15.997 8.685 2.773c.234-.533-.008-1.155-.541-1.389s-1.155.008-1.389.541z'/>
 </svg>

src/assets/svg/caret-right.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" stroke="#fff" fill="#fff" height="100%" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' stroke='#fff' fill='#fff' height='100%' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
-    <path d="M2.685 1.924l6 13.649c.119.27.119.578 0 .849l-6 13.649c-.234.533-.857.775-1.389.541s-.775-.857-.541-1.389l5.813-13.225L.755 2.773c-.234-.533.008-1.155.541-1.389s1.155.008 1.389.541z"/>
+    <path d='M2.685 1.924l6 13.649c.119.27.119.578 0 .849l-6 13.649c-.234.533-.857.775-1.389.541s-.775-.857-.541-1.389l5.813-13.225L.755 2.773c-.234-.533.008-1.155.541-1.389s1.155.008 1.389.541z'/>
 </svg>

src/assets/svg/clock.svg

@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <g transform='matrix(.150026 0 0 .150026 -3.20332 -3.20332)' fill='none' stroke='#fff' stroke-width='16'>
+        <circle cx='128' cy='128' r='96'/>
+        <path d='M128 72v56h56'/>
+    </g>
+</svg>

src/assets/svg/close.svg

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

src/assets/svg/cloud.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='M9.773 16c0-5.694 4.685-10.379 10.379-10.379S30.53 10.306 30.53 16s-4.685 10.379-10.379 10.379H8.735c-3.982-.005-7.256-3.283-7.256-7.265s3.28-7.265 7.265-7.265c.606 0 1.21.076 1.797.226' fill='none' stroke='#fff' stroke-width='2.076'/>
+</svg>

src/assets/svg/command.svg

@@ -1,4 +1,4 @@
 <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
-    <path d="M25.425 1.5c2.784 0 5.075 2.291 5.075 5.075s-2.291 5.075-5.075 5.075H20.35V6.575c0-2.784 2.291-5.075 5.075-5.075zM11.65 11.65H6.575C3.791 11.65 1.5 9.359 1.5 6.575S3.791 1.5 6.575 1.5s5.075 2.291 5.075 5.075v5.075zm8.7 8.7h5.075c2.784 0 5.075 2.291 5.075 5.075S28.209 30.5 25.425 30.5s-5.075-2.291-5.075-5.075V20.35zM6.575 30.5c-2.784 0-5.075-2.291-5.075-5.075s2.291-5.075 5.075-5.075h5.075v5.075c0 2.784-2.291 5.075-5.075 5.075z"/>
+    <path d='M25.425 1.5c2.784 0 5.075 2.291 5.075 5.075s-2.291 5.075-5.075 5.075H20.35V6.575c0-2.784 2.291-5.075 5.075-5.075zM11.65 11.65H6.575C3.791 11.65 1.5 9.359 1.5 6.575S3.791 1.5 6.575 1.5s5.075 2.291 5.075 5.075v5.075zm8.7 8.7h5.075c2.784 0 5.075 2.291 5.075 5.075S28.209 30.5 25.425 30.5s-5.075-2.291-5.075-5.075V20.35zM6.575 30.5c-2.784 0-5.075-2.291-5.075-5.075s2.291-5.075 5.075-5.075h5.075v5.075c0 2.784-2.291 5.075-5.075 5.075z'/>
-    <path d="M11.65 11.65h8.7v8.7h-8.7z"/>
+    <path d='M11.65 11.65h8.7v8.7h-8.7z'/>
 </svg>

src/assets/svg/create-shortcut.svg

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

src/assets/svg/download.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M16 19.955V1.5m14.5 18.455v9.227c0 .723-.595 1.318-1.318 1.318H2.818c-.723 0-1.318-.595-1.318-1.318v-9.227'/>
+    <path d='M22.591 13.364L16 19.955l-6.591-6.591'/>
+</svg>

src/assets/svg/eye-slash.svg

@@ -0,0 +1,8 @@
+<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'>
+    <clipPath id='A'>
+        <path d='M0 0h32v32H0z'/>
+    </clipPath>
+    <g clip-path='url(#A)'>
+        <path d='M6.123 3.549a1.07 1.07 0 0 0-.798-.359c-.585 0-1.067.482-1.067 1.067 0 .27.102.53.286.727l2.565 2.823C2.267 10.779.184 15.36.092 15.568c-.123.276-.123.591 0 .867.047.105 1.176 2.609 3.687 5.12 3.345 3.344 7.57 5.112 12.221 5.112a16.97 16.97 0 0 0 6.943-1.444l2.933 3.228c.202.228.493.359.798.359.585 0 1.067-.482 1.067-1.067a1.07 1.07 0 0 0-.286-.727L6.123 3.549zm6.31 10.112l5.556 6.114c-.612.322-1.294.49-1.986.49a4.29 4.29 0 0 1-4.267-4.266c0-.831.242-1.643.697-2.338zM16 24.533c-4.104 0-7.689-1.492-10.657-4.433A17.73 17.73 0 0 1 2.267 16c.625-1.172 2.621-4.452 6.313-6.584l2.4 2.633c-.878 1.125-1.356 2.512-1.356 3.939 0 3.511 2.89 6.4 6.4 6.4 1.221 0 2.416-.349 3.444-1.005l1.964 2.16a14.92 14.92 0 0 1-5.432.99zm.8-12.724a1.07 1.07 0 0 1-.867-1.048c0-.585.482-1.067 1.067-1.067a1.12 1.12 0 0 1 .2.019c2.784.54 4.896 2.863 5.169 5.686a1.07 1.07 0 0 1-.962 1.161c-.034.002-.067.002-.1 0a1.07 1.07 0 0 1-1.067-.968 4.29 4.29 0 0 0-3.44-3.783zm15.104 4.626c-.056.125-1.407 3.116-4.448 5.84a1.07 1.07 0 0 1-.724.283c-.585 0-1.067-.482-1.067-1.067a1.07 1.07 0 0 1 .368-.806A17.7 17.7 0 0 0 29.74 16a17.73 17.73 0 0 0-3.083-4.103C23.689 8.959 20.104 7.467 16 7.467a15.82 15.82 0 0 0-2.581.209 1.06 1.06 0 0 1-.186.016 1.07 1.07 0 0 1-1.067-1.066 1.07 1.07 0 0 1 .901-1.054A17.89 17.89 0 0 1 16 5.333c4.651 0 8.876 1.768 12.221 5.114 2.511 2.51 3.64 5.016 3.687 5.121.123.276.123.591 0 .867h-.004z' fill-rule='nonzero'/>
+    </g>
+</svg>

src/assets/svg/eye.svg

@@ -0,0 +1,8 @@
+<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'>
+    <clipPath id='A'>
+        <path d='M0 0h32v32H0z'/>
+    </clipPath>
+    <g clip-path='url(#A)'>
+        <path d='M31.908 15.568c-.047-.105-1.176-2.611-3.687-5.121C24.876 7.101 20.651 5.333 16 5.333S7.124 7.101 3.779 10.447c-2.511 2.51-3.646 5.02-3.687 5.121-.123.276-.123.591 0 .867.047.105 1.176 2.609 3.687 5.12 3.345 3.344 7.57 5.112 12.221 5.112s8.876-1.768 12.221-5.112c2.511-2.511 3.64-5.015 3.687-5.12.123-.276.123-.591 0-.867zM16 24.533c-4.104 0-7.689-1.492-10.657-4.433-1.218-1.211-2.254-2.592-3.076-4.1.822-1.508 1.858-2.889 3.076-4.1C8.311 8.959 11.896 7.467 16 7.467s7.689 1.492 10.657 4.433c1.221 1.211 2.259 2.592 3.083 4.1-.961 1.795-5.149 8.533-13.74 8.533zM16 9.6c-3.511 0-6.4 2.889-6.4 6.4s2.889 6.4 6.4 6.4 6.4-2.889 6.4-6.4A6.44 6.44 0 0 0 16 9.6zm0 10.667A4.29 4.29 0 0 1 11.733 16 4.29 4.29 0 0 1 16 11.733 4.29 4.29 0 0 1 20.267 16 4.29 4.29 0 0 1 16 20.267z' fill-rule='nonzero'/>
+    </g>
+</svg>

src/assets/svg/home.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='M12.217 30.503V20.414h7.567v10.089h10.089V15.37a1.26 1.26 0 0 0-.369-.892L16.892 1.867a1.26 1.26 0 0 0-1.784 0L2.497 14.478a1.26 1.26 0 0 0-.369.892v15.133h10.089z'/>
+</svg>

src/assets/svg/microphone-slash.svg

@@ -1,4 +1,4 @@
 <svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
-    <path d="M16 25.125v5.368M5.265 4.728l21.471 23.618m-4.789-5.267c-1.698 1.326-3.793 2.047-5.947 2.047-5.3 0-9.662-4.362-9.662-9.662"/>
+    <path d='M16 25.125v5.368M5.265 4.728l21.471 23.618m-4.789-5.267c-1.698 1.326-3.793 2.047-5.947 2.047-5.3 0-9.662-4.362-9.662-9.662'/>
-    <path d="M25.662 15.463a9.62 9.62 0 0 1-.978 4.242m-5.64.187c-.895.616-1.957.943-3.043.939-2.945 0-5.368-2.423-5.368-5.368v-4.831m.442-5.896A5.38 5.38 0 0 1 16 1.507c2.945 0 5.368 2.423 5.368 5.368v8.588c0 .188-.01.375-.03.562"/>
+    <path d='M25.662 15.463a9.62 9.62 0 0 1-.978 4.242m-5.64.187c-.895.616-1.957.943-3.043.939-2.945 0-5.368-2.423-5.368-5.368v-4.831m.442-5.896A5.38 5.38 0 0 1 16 1.507c2.945 0 5.368 2.423 5.368 5.368v8.588c0 .188-.01.375-.03.562'/>
 </svg>

src/assets/svg/microphone.svg

@@ -1,3 +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="M21.368 6.875A5.37 5.37 0 0 0 16 1.507a5.37 5.37 0 0 0-5.368 5.368v8.588A5.37 5.37 0 0 0 16 20.831a5.37 5.37 0 0 0 5.368-5.368V6.875zM16 25.125v5.368m9.662-15.03c0 5.3-4.362 9.662-9.662 9.662s-9.662-4.362-9.662-9.662"/>
+    <path d='M21.368 6.875A5.37 5.37 0 0 0 16 1.507a5.37 5.37 0 0 0-5.368 5.368v8.588A5.37 5.37 0 0 0 16 20.831a5.37 5.37 0 0 0 5.368-5.368V6.875zM16 25.125v5.368m9.662-15.03c0 5.3-4.362 9.662-9.662 9.662s-9.662-4.362-9.662-9.662'/>
 </svg>

src/assets/svg/native-mkb.svg

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

src/assets/svg/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/refresh.svg

@@ -1,3 +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="M23.247 12.377h7.247V5.13"/><path d="M23.911 25.663a13.29 13.29 0 0 1-9.119 3.623C7.504 29.286 1.506 23.289 1.506 16S7.504 2.713 14.792 2.713a13.29 13.29 0 0 1 9.395 3.891l6.307 5.772"/>
+    <path d='M23.247 12.377h7.247V5.13'/><path d='M23.911 25.663a13.29 13.29 0 0 1-9.119 3.623C7.504 29.286 1.506 23.289 1.506 16S7.504 2.713 14.792 2.713a13.29 13.29 0 0 1 9.395 3.891l6.307 5.772'/>
 </svg>

src/assets/svg/speaker-high.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M8.964 21.417h-6.5a1.09 1.09 0 0 1-1.083-1.083v-8.667a1.09 1.09 0 0 1 1.083-1.083h6.5L18.714 3v26l-9.75-7.583z'/>
+    <path d='M8.964 10.583v10.833m15.167-8.28a4.35 4.35 0 0 1 0 5.728M28.149 9.5a9.79 9.79 0 0 1 0 13'/>
+</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/touch-control-disable.svg

@@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
-    <g fill="none" stroke="#fff">
+    <g fill='none' stroke='#fff'>
-        <path d="M6.021 5.021l20 22" stroke-width="2"/>
+        <path d='M6.021 5.021l20 22' stroke-width='2'/>
-        <path d="M8.735 8.559H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h19.34m4.289 0h2.594a.89.89 0 0 0 .889-.888V9.448a.89.89 0 0 0-.889-.889H12.971" stroke-miterlimit="1.5" stroke-width="2.083"/>
+        <path d='M8.735 8.559H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h19.34m4.289 0h2.594a.89.89 0 0 0 .889-.888V9.448a.89.89 0 0 0-.889-.889H12.971' stroke-miterlimit='1.5' stroke-width='2.083'/>
     </g>
-    <path d="M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z"/>
+    <path d='M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z'/>
-    <path d="M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z"/>
+    <path d='M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z'/>
-    <circle cx="25.345" cy="18.582" r="2.561" fill="none" stroke="#fff" stroke-width="1.78" transform="matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)"/>
+    <circle cx='25.345' cy='18.582' r='2.561' fill='none' stroke='#fff' stroke-width='1.78' transform='matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)'/>
 </svg>

src/assets/svg/touch-control-enable.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 32 32" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
+<svg xmlns='http://www.w3.org/2000/svg' fill='#fff' viewBox='0 0 32 32' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'>
-    <path d="M30.021 9.448a.89.89 0 0 0-.889-.889H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h26.223a.89.89 0 0 0 .889-.888V9.448z" fill="none" stroke="#fff" stroke-width="2.083"/>
+    <path d='M30.021 9.448a.89.89 0 0 0-.889-.889H2.909a.89.89 0 0 0-.889.889v13.146a.89.89 0 0 0 .889.888h26.223a.89.89 0 0 0 .889-.888V9.448z' fill='none' stroke='#fff' stroke-width='2.083'/>
-    <path d="M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z"/>
+    <path d='M8.147 11.981l-.053-.001-.054.001c-.55.028-.988.483-.988 1.04v6c0 .575.467 1.042 1.042 1.042l.053-.001c.55-.028.988-.484.988-1.04v-6a1.04 1.04 0 0 0-.988-1.04z'/>
-    <path d="M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z"/>
+    <path d='M11.147 14.981l-.054-.001h-6a1.04 1.04 0 1 0 0 2.083h6c.575 0 1.042-.467 1.042-1.042a1.04 1.04 0 0 0-.988-1.04z'/>
-    <circle cx="25.345" cy="18.582" r="2.561" fill="none" stroke="#fff" stroke-width="1.78" transform="matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)"/>
+    <circle cx='25.345' cy='18.582' r='2.561' fill='none' stroke='#fff' stroke-width='1.78' transform='matrix(1.17131 0 0 1.17131 -5.74235 -5.74456)'/>
 </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/assets/svg/upload.svg

@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#fff' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 32 32'>
+    <path d='M16 19.905V1.682m14.318 18.223v9.112a1.31 1.31 0 0 1-1.302 1.302H2.983a1.31 1.31 0 0 1-1.302-1.302v-9.112'/>
+    <path d='M9.492 8.19L16 1.682l6.508 6.508'/>
+</svg>

src/assets/svg/virtual-controller.svg

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

src/enums/bypass-servers.ts

@@ -0,0 +1,17 @@
+import { t } from "@/utils/translation"
+
+export const BypassServers = {
+    br: t('brazil'),
+    jp: t('japan'),
+    kr: t('korea'),
+    pl: t('poland'),
+    us: t('united-states'),
+} as const;
+
+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',
+} as const;

src/enums/game-pass-gallery.ts

@@ -0,0 +1,6 @@
+export enum GamePassCloudGallery {
+    ALL = 'ce573635-7c18-4d0c-9d68-90b932393470',
+    MOST_POPULAR = 'e7590b22-e299-44db-ae22-25c61405454c',
+    NATIVE_MKB = '8fa264dd-124f-4af3-97e8-596fcdf4b486',
+    TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
+}

src/enums/gamepad.ts

@@ -1,5 +1,4 @@
-import type { GamepadKeyNameType } from "@/types/mkb";
+import { PrompFont } from "./prompt-font";
-import { PrompFont } from "@/utils/prompt-font";
 
 export enum GamepadKey {
     A = 0,
@@ -32,8 +31,7 @@ export enum GamepadKey {
     RS_RIGHT = 203,
 };
 
-
+export const GamepadKeyName: Record<number, [string, PrompFont]> = {
-export const GamepadKeyName: GamepadKeyNameType = {
     [GamepadKey.A]: ['A', PrompFont.A],
     [GamepadKey.B]: ['B', PrompFont.B],
     [GamepadKey.X]: ['X', PrompFont.X],
@@ -71,32 +69,3 @@ export enum GamepadStick {
     LEFT = 0,
     RIGHT = 1,
 };
-
-export enum MouseButtonCode {
-    LEFT_CLICK = 'Mouse0',
-    RIGHT_CLICK = 'Mouse2',
-    MIDDLE_CLICK = 'Mouse1',
-};
-
-export enum MouseMapTo {
-    OFF = 0,
-    LS = 1,
-    RS = 2,
-}
-
-
-export enum WheelCode {
-    SCROLL_UP = 'ScrollUp',
-    SCROLL_DOWN = 'ScrollDown',
-    SCROLL_LEFT = 'ScrollLeft',
-    SCROLL_RIGHT = 'ScrollRight',
-};
-
-export enum MkbPresetKey {
-    MOUSE_MAP_TO = 'map_to',
-
-    MOUSE_SENSITIVITY_X = 'sensitivity_x',
-    MOUSE_SENSITIVITY_Y = 'sensitivity_y',
-
-    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzone_counterweight',
-}

src/enums/mkb.ts

@@ -0,0 +1,169 @@
+export const enum MouseConstant {
+    DEFAULT_PANNING_SENSITIVITY = 0.0010,
+    DEFAULT_DEADZONE_COUNTERWEIGHT = 0.01,
+    MAXIMUM_STICK_RANGE = 1.1,
+}
+
+
+export const enum MouseButtonCode {
+    LEFT_CLICK = 'Mouse0',
+    RIGHT_CLICK = 'Mouse2',
+    MIDDLE_CLICK = 'Mouse1',
+};
+
+
+export const enum MouseMapTo {
+    OFF = 0,
+    LS = 1,
+    RS = 2,
+}
+
+
+export const enum WheelCode {
+    SCROLL_UP = 'ScrollUp',
+    SCROLL_DOWN = 'ScrollDown',
+    SCROLL_LEFT = 'ScrollLeft',
+    SCROLL_RIGHT = 'ScrollRight',
+};
+
+
+export const enum MkbPresetKey {
+    MOUSE_MAP_TO = 'mapTo',
+
+    MOUSE_SENSITIVITY_X = 'sensitivityX',
+    MOUSE_SENSITIVITY_Y = 'sensitivityY',
+
+    MOUSE_DEADZONE_COUNTERWEIGHT = 'deadzoneCounterweight',
+}
+
+
+export type KeyCode =
+  | 'Backspace'
+  | 'Tab'
+  | 'Enter'
+  | 'ShiftLeft'
+  | 'ShiftRight'
+  | 'ControlLeft'
+  | 'ControlRight'
+  | 'AltLeft'
+  | 'AltRight'
+  | 'Pause'
+  | 'CapsLock'
+  | 'Escape'
+  | 'Space'
+  | 'PageUp'
+  | 'PageDown'
+  | 'End'
+  | 'Home'
+  | 'ArrowLeft'
+  | 'ArrowUp'
+  | 'ArrowRight'
+  | 'ArrowDown'
+  | 'PrintScreen'
+  | 'Insert'
+  | 'Delete'
+  | 'Digit0'
+  | 'Digit1'
+  | 'Digit2'
+  | 'Digit3'
+  | 'Digit4'
+  | 'Digit5'
+  | 'Digit6'
+  | 'Digit7'
+  | 'Digit8'
+  | 'Digit9'
+  | 'KeyA'
+  | 'KeyB'
+  | 'KeyC'
+  | 'KeyD'
+  | 'KeyE'
+  | 'KeyF'
+  | 'KeyG'
+  | 'KeyH'
+  | 'KeyI'
+  | 'KeyJ'
+  | 'KeyK'
+  | 'KeyL'
+  | 'KeyM'
+  | 'KeyN'
+  | 'KeyO'
+  | 'KeyP'
+  | 'KeyQ'
+  | 'KeyR'
+  | 'KeyS'
+  | 'KeyT'
+  | 'KeyU'
+  | 'KeyV'
+  | 'KeyW'
+  | 'KeyX'
+  | 'KeyY'
+  | 'KeyZ'
+  | 'MetaLeft'
+  | 'MetaRight'
+  | 'ContextMenu'
+  | 'F1'
+  | 'F2'
+  | 'F3'
+  | 'F4'
+  | 'F5'
+  | 'F6'
+  | 'F7'
+  | 'F8'
+  | 'F9'
+  | 'F10'
+  | 'F11'
+  | 'F12'
+  | 'NumLock'
+  | 'ScrollLock'
+  | 'AudioVolumeMute'
+  | 'AudioVolumeDown'
+  | 'AudioVolumeUp'
+  | 'MediaTrackNext'
+  | 'MediaTrackPrevious'
+  | 'MediaStop'
+  | 'MediaPlayPause'
+  | 'LaunchMail'
+  | 'LaunchMediaPlayer'
+  | 'LaunchApplication1'
+  | 'LaunchApplication2'
+  | 'Semicolon'
+  | 'Equal'
+  | 'Comma'
+  | 'Minus'
+  | 'Period'
+  | 'Slash'
+  | 'Backquote'
+  | 'BracketLeft'
+  | 'Backslash'
+  | 'BracketRight'
+  | 'Quote'
+  | 'Numpad0'
+  | 'Numpad1'
+  | 'Numpad2'
+  | 'Numpad3'
+  | 'Numpad4'
+  | 'Numpad5'
+  | 'Numpad6'
+  | 'Numpad7'
+  | 'Numpad8'
+  | 'Numpad9'
+  | 'NumpadMultiply'
+  | 'NumpadAdd'
+  | 'NumpadSubtract'
+  | 'NumpadDecimal'
+  | 'NumpadDivide';
+
+export type KeyCodeExcludeModifiers = Exclude<KeyCode,
+    'ShiftLeft'
+    | 'ShiftRight'
+    | 'ControlLeft'
+    | 'ControlRight'
+    | 'AltLeft'
+    | 'AltRight'
+>
+
+export const enum KeyModifier {
+    CTRL = 1,
+    ALT = 2,
+    SHIFT = 4,
+}

src/enums/pref-keys.ts

@@ -0,0 +1,114 @@
+export const enum StorageKey {
+    GLOBAL = 'BetterXcloud',
+
+    LOCALE = 'BetterXcloud.Locale',
+    LOCALE_TRANSLATIONS = 'BetterXcloud.Locale.Translations',
+    PATCHES_CACHE = 'BetterXcloud.Patches.Cache',
+    PATCHES_SIGNATURE = 'BetterXcloud.Patches.Cache.Signature',
+    USER_AGENT = 'BetterXcloud.UserAgent',
+
+    GH_PAGES_COMMIT_HASH = 'BetterXcloud.GhPages.CommitHash',
+    LIST_CUSTOM_TOUCH_LAYOUTS = 'BetterXcloud.GhPages.CustomTouchLayouts',
+    LIST_FORCE_NATIVE_MKB = 'BetterXcloud.GhPages.ForceNativeMkb',
+}
+
+export const enum PrefKey {
+    VERSION_LAST_CHECK = 'version.lastCheck',
+    VERSION_LATEST = 'version.latest',
+    VERSION_CURRENT = 'version.current',
+
+    SCRIPT_LOCALE = 'bx.locale',
+
+    SERVER_REGION = 'server.region',
+    SERVER_BYPASS_RESTRICTION = 'server.bypassRestriction',
+    SERVER_PREFER_IPV6 = 'server.ipv6.prefer',
+
+    STREAM_PREFERRED_LOCALE = 'stream.locale',
+    STREAM_RESOLUTION = 'stream.video.resolution',
+    STREAM_CODEC_PROFILE = 'stream.video.codecProfile',
+    STREAM_MAX_VIDEO_BITRATE = 'stream.video.maxBitrate',
+    STREAM_COMBINE_SOURCES = 'stream.video.combineAudio',
+
+    USER_AGENT_PROFILE = 'userAgent.profile',
+
+    TOUCH_CONTROLLER_MODE = 'touchController.mode',
+    TOUCH_CONTROLLER_AUTO_OFF = 'touchController.autoOff',
+    TOUCH_CONTROLLER_DEFAULT_OPACITY = 'touchController.opacity.default',
+    TOUCH_CONTROLLER_STYLE_STANDARD = 'touchController.style.standard',
+    TOUCH_CONTROLLER_STYLE_CUSTOM = 'touchController.style.custom',
+
+    GAME_BAR_POSITION = 'gameBar.position',
+
+    LOCAL_CO_OP_ENABLED = 'localCoOp.enabled',
+
+    DEVICE_VIBRATION_MODE = 'deviceVibration.mode',
+    DEVICE_VIBRATION_INTENSITY = 'deviceVibration.intensity',
+
+    CONTROLLER_POLLING_RATE = 'controller.pollingRate',
+
+    NATIVE_MKB_MODE = 'nativeMkb.mode',
+    FORCE_NATIVE_MKB_GAMES = 'nativeMkb.forcedGames',
+    NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityX',
+    NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY = 'nativeMkb.scroll.sensitivityY',
+
+    MKB_ENABLED = 'mkb.enabled',
+    MKB_HIDE_IDLE_CURSOR = 'mkb.cursor.hideIdle',
+    MKB_P1_MAPPING_PRESET_ID = 'mkb.p1.preset.mappingId',
+    MKB_P1_SLOT = 'mkb.p1.slot',
+    MKB_P2_MAPPING_PRESET_ID = 'mkb.p2.preset.mappingId',
+    MKB_P2_SLOT = 'mkb.p2.slot',
+
+    KEYBOARD_SHORTCUTS_IN_GAME_PRESET_ID = 'keyboardShortcuts.preset.inGameId',
+
+    SCREENSHOT_APPLY_FILTERS = 'screenshot.applyFilters',
+
+    BLOCK_TRACKING = 'block.tracking',
+    BLOCK_SOCIAL_FEATURES = 'block.social',
+
+    LOADING_SCREEN_GAME_ART = 'loadingScreen.gameArt.show',
+    LOADING_SCREEN_SHOW_WAIT_TIME = 'loadingScreen.waitTime.show',
+    LOADING_SCREEN_ROCKET = 'loadingScreen.rocket',
+
+    UI_CONTROLLER_FRIENDLY = 'ui.controllerFriendly',
+    UI_LAYOUT = 'ui.layout',
+    UI_SCROLLBAR_HIDE = 'ui.hideScrollbar',
+    UI_HIDE_SECTIONS = 'ui.hideSections',
+    BYOG_DISABLED = 'feature.byog.disabled',
+
+    UI_GAME_CARD_SHOW_WAIT_TIME = 'ui.gameCard.waitTime.show',
+    UI_SIMPLIFY_STREAM_MENU = 'ui.streamMenu.simplify',
+    UI_DISABLE_FEEDBACK_DIALOG = 'ui.feedbackDialog.disabled',
+    UI_CONTROLLER_SHOW_STATUS = 'ui.controllerStatus.show',
+
+    UI_SKIP_SPLASH_VIDEO = 'ui.splashVideo.skip',
+    UI_HIDE_SYSTEM_MENU_ICON = 'ui.systemMenu.hideHandle',
+    UI_REDUCE_ANIMATIONS = 'ui.reduceAnimations',
+
+    VIDEO_PLAYER_TYPE = 'video.player.type',
+    VIDEO_POWER_PREFERENCE = 'video.player.powerPreference',
+    VIDEO_PROCESSING = 'video.processing',
+    VIDEO_SHARPNESS = 'video.processing.sharpness',
+    VIDEO_MAX_FPS = 'video.maxFps',
+    VIDEO_RATIO = 'video.ratio',
+    VIDEO_BRIGHTNESS = 'video.brightness',
+    VIDEO_CONTRAST = 'video.contrast',
+    VIDEO_SATURATION = 'video.saturation',
+
+    AUDIO_MIC_ON_PLAYING = 'audio.mic.onPlaying',
+    AUDIO_VOLUME_CONTROL_ENABLED = 'audio.volume.booster.enabled',
+    AUDIO_VOLUME = 'audio.volume',
+
+    STATS_ITEMS = 'stats.items',
+    STATS_SHOW_WHEN_PLAYING = 'stats.showWhenPlaying',
+    STATS_QUICK_GLANCE_ENABLED = 'stats.quickGlance.enabled',
+    STATS_POSITION = 'stats.position',
+    STATS_TEXT_SIZE = 'stats.textSize',
+    STATS_TRANSPARENT = 'stats.transparent',
+    STATS_OPACITY = 'stats.opacity',
+    STATS_CONDITIONAL_FORMATTING = 'stats.colors',
+
+    REMOTE_PLAY_ENABLED = 'xhome.enabled',
+    REMOTE_PLAY_STREAM_RESOLUTION = 'xhome.video.resolution',
+
+    GAME_FORTNITE_FORCE_CONSOLE = 'game.fortnite.forceConsole',
+}

src/enums/pref-values.ts

@@ -0,0 +1,104 @@
+export const enum UiSection {
+    ALL_GAMES = 'all-games',
+    FRIENDS = 'friends',
+    MOST_POPULAR = 'most-popular',
+    NATIVE_MKB = 'native-mkb',
+    NEWS = 'news',
+    TOUCH = 'touch',
+    BOYG = 'byog',
+}
+
+export const enum GameBarPosition {
+    BOTTOM_LEFT = 'bottom-left',
+    BOTTOM_RIGHT = 'bottom-right',
+    OFF = 'off',
+};
+
+export const enum UiLayout {
+    TV = 'tv',
+    NORMAL = 'normal',
+    DEFAULT = 'default',
+}
+
+export const enum LoadingScreenRocket {
+    SHOW = 'show',
+    HIDE = 'hide',
+    HIDE_QUEUE = 'hide-queue',
+}
+
+export const enum StreamResolution {
+    DIM_720P = '720p',
+    DIM_1080P = '1080p',
+    DIM_1080P_HQ = '1080p-hq',
+    AUTO = 'auto',
+}
+
+export const enum CodecProfile {
+    DEFAULT = 'default',
+    LOW = 'low',
+    NORMAL = 'normal',
+    HIGH = 'high',
+};
+
+export const enum TouchControllerMode {
+    DEFAULT = 'default',
+    ALL = 'all',
+    OFF = 'off',
+}
+
+export const enum TouchControllerStyleStandard {
+    DEFAULT = 'default',
+    WHITE = 'white',
+    MUTED = 'muted',
+}
+
+export const enum TouchControllerStyleCustom {
+    DEFAULT = 'default',
+    MUTED = 'muted',
+}
+
+export const enum DeviceVibrationMode {
+    ON = 'on',
+    AUTO = 'auto',
+    OFF = 'off',
+}
+
+export const enum NativeMkbMode {
+    DEFAULT = 'default',
+    ON = 'on',
+    OFF = 'off',
+}
+
+export const enum StreamStat {
+    PING = 'ping',
+    JITTER = 'jit',
+    FPS = 'fps',
+    BITRATE = 'btr',
+    DECODE_TIME = 'dt',
+    PACKETS_LOST = 'pl',
+    FRAMES_LOST = 'fl',
+    DOWNLOAD = 'dl',
+    UPLOAD = 'ul',
+    PLAYTIME = 'play',
+    BATTERY = 'batt',
+    CLOCK = 'time',
+};
+
+export const enum VideoRatio {
+    '16:9' = '16:9',
+    '18:9' = '18:9',
+    '21:9' = '21:9',
+    '16:10' = '16:10',
+    '4:3' = '4:3',
+    FILL = 'fill',
+}
+
+export const enum StreamPlayerType {
+    VIDEO = 'default',
+    WEBGL2 = 'webgl2',
+}
+
+export const enum StreamVideoProcessing {
+    USM = 'usm',
+    CAS = 'cas',
+}

src/enums/shortcut-actions.ts

@@ -0,0 +1,25 @@
+export const enum ShortcutAction {
+    BETTER_XCLOUD_SETTINGS_SHOW = 'bx.settings.show',
+
+    STREAM_VIDEO_TOGGLE = 'stream.video.toggle',
+    STREAM_SCREENSHOT_CAPTURE = 'stream.screenshot.capture',
+
+    STREAM_MENU_SHOW = 'stream.menu.show',
+    STREAM_STATS_TOGGLE = 'stream.stats.toggle',
+    STREAM_SOUND_TOGGLE = 'stream.sound.toggle',
+    STREAM_MICROPHONE_TOGGLE = 'stream.microphone.toggle',
+
+    STREAM_VOLUME_INC = 'stream.volume.inc',
+    STREAM_VOLUME_DEC = 'stream.volume.dec',
+
+    DEVICE_SOUND_TOGGLE = 'device.sound.toggle',
+    DEVICE_VOLUME_INC = 'device.volume.inc',
+    DEVICE_VOLUME_DEC = 'device.volume.dec',
+
+    DEVICE_BRIGHTNESS_INC = 'device.brightness.inc',
+    DEVICE_BRIGHTNESS_DEC = 'device.brightness.dec',
+
+    MKB_TOGGLE = 'mkb.toggle',
+
+    TRUE_ACHIEVEMENTS_OPEN = 'ta.open',
+};

src/enums/user-agent.ts

@@ -0,0 +1,9 @@
+export enum UserAgentProfile {
+    WINDOWS_EDGE = 'windows-edge',
+    MACOS_SAFARI = 'macos-safari',
+    SMART_TV_GENERIC = 'smarttv-generic',
+    SMART_TV_TIZEN = 'smarttv-tizen',
+    VR_OCULUS = 'vr-oculus',
+    DEFAULT = 'default',
+    CUSTOM = 'custom',
+}

src/index.ts

@@ -1,3 +1,5 @@
+import { compressCss, isFullVersion } from "@macros/build" with {type: "macro"};
+
 import "@utils/global";
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS } from "@utils/bx-flags";
@@ -6,82 +8,142 @@ import { t } from "@utils/translation";
 import { interceptHttpRequests } from "@utils/network";
 import { CE } from "@utils/html";
 import { showGamepadToast } from "@utils/gamepad";
-import { MkbHandler } from "@modules/mkb/mkb-handler";
+import { EmulatedMkbHandler } from "@modules/mkb/mkb-handler";
 import { StreamBadges } from "@modules/stream/stream-badges";
 import { StreamStats } from "@modules/stream/stream-stats";
-import { addCss } from "@utils/css";
+import { addCss, preloadFonts } from "@utils/css";
-import { Toast } from "@utils/toast";
-import { setupStreamUi, updateVideoPlayerCss } from "@modules/ui/ui";
-import { PrefKey, getPref } from "@utils/preferences";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
-import { watchHeader } from "@modules/ui/header";
+import { checkForUpdate, disablePwa, productTitleToSlug } from "@utils/utils";
-import { checkForUpdate, disablePwa } from "@utils/utils";
 import { Patcher } from "@modules/patcher";
-import { RemotePlay } from "@modules/remote-play";
+import { RemotePlayManager } from "@/modules/remote-play-manager";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
-import { VibrationManager } from "@modules/vibration-manager";
+import { disableAdobeAudienceManager, patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
-import { overridePreloadState } from "@utils/preload-state";
-import { patchAudioContext, patchCanvasContext, patchMeControl, 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 { ScreenshotManager } from "./utils/screenshot-manager";
-
+import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
+import { GuideMenu } from "./modules/ui/guide-menu";
+import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
+import { NativeMkbMode, TouchControllerMode, UiSection } from "./enums/pref-values";
+import { HeaderSection } from "./modules/ui/header";
+import { GameTile } from "./modules/ui/game-tile";
+import { ProductDetailsPage } from "./modules/ui/product-details";
+import { NavigationDialogManager } from "./modules/ui/dialog/navigation-dialog";
+import { PrefKey } from "./enums/pref-keys";
+import { getPref } from "./utils/settings-storages/global-settings-storage";
+import { SettingsDialog } 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";
+import { StreamStatsCollector } from "./utils/stream-stats-collector";
+import { RootDialogObserver } from "./utils/root-dialog-observer";
+import { StreamSettings } from "./utils/stream-settings";
+import { KeyboardShortcutHandler } from "./modules/mkb/keyboard-shortcut-handler";
+import { GhPagesUtils } from "./utils/gh-pages";
+import { DeviceVibrationManager } from "./modules/device-vibration-manager";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
-    window.addEventListener('load', e => {
+    const nativePushState = window.history['pushState'];
-            window.location.search.includes('loggedIn') && window.setTimeout(() => {
+    window.history['pushState'] = function(...args: any[]) {
-                const location = window.location;
+        const url = args[2];
+        if (url && (url.startsWith('/play') || url.substring(6).startsWith('/play'))) {
+            console.log('Redirecting to xbox.com/play');
+            window.stop();
+            window.location.href = 'https://www.xbox.com' + url;
+            return;
+        }
+
         // @ts-ignore
-                location.pathname.includes('/play') && location.reload(true);
+        return nativePushState.apply(this, arguments);
-            }, 2000);
+    }
-        });
     // Stop processing the script
     throw new Error('[Better xCloud] Refreshing the page after logging in');
 }
 
 BxLogger.info('readyState', document.readyState);
 
-if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
+if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     // Stop loading
     window.stop();
 
-    // Show the reloading overlay
+    // We need to set it to an empty string first to work around Bun's bug
-    const css = `
+    // https://github.com/oven-sh/bun/issues/12067
+    let css = '';
+    css += compressCss(`
 .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'));
+    }
+
+    // Show the reloading overlay
     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');
 }
 
-// Automatically reload the page when running into the "We are sorry..." error message
 window.addEventListener('load', e => {
+    // Automatically reload the page when running into the "We are sorry..." error message
     window.setTimeout(() => {
         if (document.body.classList.contains('legacyBackground')) {
             // Has error message -> reload page
@@ -92,6 +154,31 @@ window.addEventListener('load', e => {
     }, 3000);
 });
 
+document.addEventListener('readystatechange', e => {
+    if (document.readyState !== 'interactive') {
+        return;
+    }
+
+    STATES.isSignedIn = !!((window as any).xbcUser?.isSignedIn);
+
+    if (STATES.isSignedIn) {
+        // Preload Remote Play
+        RemotePlayManager.getInstance()?.initialize();
+    } else {
+        // Show Settings button in the header when not signed in
+        window.setTimeout(HeaderSection.watchHeader, 2000);
+    }
+
+    // Hide "Play with Friends" skeleton section
+    if (getPref<UiSection[]>(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
+        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest<HTMLElement>('div[class*=HomePage-module]');
+        $parent && ($parent.style.display = 'none');
+    }
+
+    // Preload fonts
+    preloadFonts();
+})
+
 window.BX_EXPOSED = BxExposed;
 
 // Hide Settings UI when navigate to another page
@@ -103,140 +190,175 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
-window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
+window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
-    // Start rendering UI
+    STATES.supportedRegion = false;
-    if (document.querySelector('div[class^=UnsupportedMarketPage]')) {
+    window.setTimeout(HeaderSection.watchHeader, 2000);
-        window.setTimeout(watchHeader, 2000);
+
-    } else {
+    // Open Settings dialog on Unsupported page
-        watchHeader();
+    const $unsupportedPage = document.querySelector<HTMLElement>('div[class^=UnsupportedMarketPage-module__container]');
+    if ($unsupportedPage) {
+        SettingsDialog.getInstance().show();
     }
+}, {once: true});
+
+window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
+    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/')) {
+    if (window.location.pathname.includes('/launch/') && STATES.currentStream.titleInfo) {
-        const matches = /\/launch\/(?<title_id>[^\/]+)\/(?<product_id>\w+)/.exec(window.location.pathname);
+        STATES.currentStream.titleSlug = productTitleToSlug(STATES.currentStream.titleInfo.product.title);
-        if (matches?.groups) {
-            STATES.currentStream.titleId = matches.groups.title_id;
-            STATES.currentStream.productId = matches.groups.product_id;
-        }
     } else {
-        STATES.currentStream.titleId = 'remote-play';
+        STATES.currentStream.titleSlug = 'remote-play';
-        STATES.currentStream.productId = '';
     }
-
-    // Setup UI
-    setupStreamUi();
 });
 
 // Setup loading screen
-getPref(PrefKey.UI_LOADING_SCREEN_GAME_ART) && window.addEventListener(BxEvent.TITLE_INFO_READY, LoadingScreen.setup);
+getPref(PrefKey.LOADING_SCREEN_GAME_ART) && window.addEventListener(BxEvent.TITLE_INFO_READY, LoadingScreen.setup);
 
 window.addEventListener(BxEvent.STREAM_STARTING, e => {
     // Hide loading screen
     LoadingScreen.hide();
 
+    if (isFullVersion()) {
         // Start hiding cursor
-    if (!getPref(PrefKey.MKB_ENABLED) && getPref(PrefKey.MKB_HIDE_IDLE_CURSOR)) {
+        const cursorHider = MouseCursorHider.getInstance();
-        MouseCursorHider.start();
+        if (cursorHider) {
-        MouseCursorHider.hide();
+            cursorHider.start();
+            cursorHider.hide();
+        }
     }
 });
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    const $video = (e as any).$video as HTMLVideoElement;
+    window.BX_STREAM_SETTINGS = StreamSettings.settings;
-    STATES.currentStream.$video = $video;
+    StreamSettings.refreshAllSettings();
 
     STATES.isPlaying = true;
-    injectStreamMenuButtons();
+    StreamUiHandler.observe();
 
-    if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
+    if (isFullVersion()) {
         const gameBar = GameBar.getInstance();
+        if (gameBar) {
             gameBar.reset();
             gameBar.enable();
             gameBar.showBar();
         }
 
-    Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+        // Setup Keyboard shortcuts
+        KeyboardShortcutHandler.getInstance().start();
 
-    updateVideoPlayerCss();
+        // Setup screenshot
+        const $video = (e as any).$video as HTMLVideoElement;
+        ScreenshotManager.getInstance().updateCanvasSize($video.videoWidth, $video.videoHeight);
+
+        // Setup local co-op
+        getPref(PrefKey.LOCAL_CO_OP_ENABLED) && BxExposed.toggleLocalCoOp(getPref(PrefKey.LOCAL_CO_OP_ENABLED));
+    }
+
+
+    updateVideoPlayer();
 });
 
 window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
     BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 });
 
-window.addEventListener(BxEvent.STREAM_STOPPED, e => {
+window.addEventListener(BxEvent.XCLOUD_RENDERING_COMPONENT, e => {
+    const component = (e as any).component;
+    if (component === 'product-details') {
+        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;
     }
 
+    if (isFullVersion()) {
+        KeyboardShortcutHandler.getInstance().stop();
+
+        // Stop MKB listeners
+        EmulatedMkbHandler.getInstance()?.destroy();
+        NativeMkbHandler.getInstance()?.destroy();
+
+        DeviceVibrationManager.getInstance()?.reset();
+    }
+
+    // Destroy StreamPlayer
+    STATES.currentStream.streamPlayer?.destroy();
+
     STATES.isPlaying = false;
     STATES.currentStream = {};
     window.BX_EXPOSED.shouldShowSensorControls = false;
+    window.BX_EXPOSED.stopTakRendering = false;
 
-    // Stop MKB listeners
+    NavigationDialogManager.getInstance().hide();
-    getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();
+    StreamStats.getInstance().destroy();
+    StreamBadges.getInstance().destroy();
 
-    const $streamSettingsDialog = document.querySelector('.bx-stream-settings-dialog');
+    if (isFullVersion()) {
-    if ($streamSettingsDialog) {
+        MouseCursorHider.getInstance()?.stop();
-        $streamSettingsDialog.classList.add('bx-gone');
-    }
-
-    STATES.currentStream.audioGainNode = null;
-    STATES.currentStream.$video = null;
-    StreamStats.onStoppedPlaying();
-
-    MouseCursorHider.stop();
         TouchController.reset();
-    GameBar.getInstance().disable();
-});
 
-window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
+        GameBar.getInstance()?.disable();
-    Screenshot.takeScreenshot();
-});
-
-
-function observeRootDialog($root: HTMLElement) {
-    let currentShown = false;
-
-    const observer = new MutationObserver(mutationList => {
-        for (const mutation of mutationList) {
-            if (mutation.type !== 'childList') {
-                continue;
     }
-
-            const shown = ($root.firstElementChild && $root.firstElementChild.childElementCount > 0) || false;
-            if (shown !== currentShown) {
-                currentShown = shown;
-                BxEvent.dispatch(window, shown ? BxEvent.XCLOUD_DIALOG_SHOWN : BxEvent.XCLOUD_DIALOG_DISMISSED);
-            }
-        }
-    });
-    observer.observe($root, {subtree: true, childList: true});
 }
 
-function waitForRootDialog() {
+window.addEventListener(BxEvent.STREAM_STOPPED, unload);
-    const observer = new MutationObserver(mutationList => {
+window.addEventListener('pagehide', e => {
-        for (const mutation of mutationList) {
+    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
-            if (mutation.type !== 'childList') {
+});
-                continue;
-            }
 
-            const $target = mutation.target as HTMLElement;
+isFullVersion() && window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
-            if ($target.id && $target.id === 'gamepass-dialog-root') {
+    ScreenshotManager.getInstance().takeScreenshot();
-                observer.disconnect();
+});
-                observeRootDialog($target);
-                break;
-            }
-        };
-    });
-    observer.observe(document.documentElement, {subtree: true, childList: true});
-}
 
 
 function main() {
-    waitForRootDialog();
+    GhPagesUtils.fetchLatestCommit();
+
+    if (getPref<NativeMkbMode>(PrefKey.NATIVE_MKB_MODE) === NativeMkbMode.ON) {
+        const customList = getPref<string[]>(PrefKey.FORCE_NATIVE_MKB_GAMES);
+        BX_FLAGS.ForceNativeMkbTitles.push(...customList);
+    }
+
+    StreamSettings.setup();
 
     // Monkey patches
     patchRtcPeerConnection();
@@ -244,47 +366,62 @@ function main() {
     interceptHttpRequests();
     patchVideoApi();
     patchCanvasContext();
+    isFullVersion() && AppInterface && patchPointerLockApi();
 
-    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
+    getPref(PrefKey.AUDIO_VOLUME_CONTROL_ENABLED) && patchAudioContext();
-    getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
 
-    STATES.hasTouchSupport && TouchController.updateCustomList();
+    if (getPref(PrefKey.BLOCK_TRACKING)) {
-    overridePreloadState();
+        patchMeControl();
+        disableAdobeAudienceManager();
+    }
 
-    VibrationManager.initialSetup();
+    RootDialogObserver.waitForRootDialog();
+
+    // Setup UI
+    addCss();
+
+    GuideMenu.getInstance().addEventListeners();
+    StreamStatsCollector.setupEvents();
+    StreamBadges.setupEvents();
+    StreamStats.setupEvents();
+
+    if (isFullVersion()) {
+        STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
+
+        DeviceVibrationManager.getInstance();
 
         // Check for Update
         BX_FLAGS.CheckForUpdate && checkForUpdate();
 
-    // Setup UI
-    addCss();
-    Toast.setup();
-    (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
-    BX_FLAGS.PreloadUi && setupStreamUi();
-
-    StreamBadges.setupEvents();
-    StreamStats.setupEvents();
-    MkbHandler.setupEvents();
-
         Patcher.init();
-
         disablePwa();
 
-    // Show a toast when connecting/disconecting controller
-    window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
-    window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
-
         // Preload Remote Play
         if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-        RemotePlay.detect();
+            RemotePlayManager.detect();
         }
 
-    if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
+        if (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) === TouchControllerMode.ALL) {
             TouchController.setup();
         }
 
         // Start PointerProviderServer
-    (getPref(PrefKey.MKB_ENABLED)) && AppInterface && AppInterface.startPointerServer();
+        if (getPref(PrefKey.MKB_ENABLED) && AppInterface) {
+            STATES.pointerServerPort = AppInterface.startPointerServer() || 9269;
+            BxLogger.info('startPointerServer', 'Port', STATES.pointerServerPort.toString());
+        }
+
+        // Show wait time in game card
+        getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && GameTile.setup();
+
+        EmulatedMkbHandler.setupEvents();
+    }
+
+    // Show a toast when connecting/disconecting controller
+    if (getPref(PrefKey.UI_CONTROLLER_SHOW_STATUS)) {
+        window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
+        window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
+    }
 }
 
 main();

src/macros/build.ts

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

src/modules/controller-shortcut.ts

@@ -1,369 +1,55 @@
-import { Screenshot } from "@utils/screenshot";
+import { GamepadKey } from "@enums/gamepad";
-import { GamepadKey } from "./mkb/definitions";
+import { ShortcutHandler } from "@/utils/shortcut-handler";
-import { PrompFont } from "@utils/prompt-font";
-import { CE } from "@utils/html";
-import { t } from "@utils/translation";
-import { MkbHandler } from "./mkb/mkb-handler";
-import { StreamStats } from "./stream/stream-stats";
-import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
-import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
-import { PrefKey, getPref } from "@utils/preferences";
-import { SoundShortcut } from "./shortcuts/shortcut-sound";
-import { BxEvent } from "@/utils/bx-event";
-import { AppInterface } from "@/utils/global";
 
-enum ShortcutAction {
-    STREAM_SCREENSHOT_CAPTURE = 'stream-screenshot-capture',
-
-    STREAM_MENU_SHOW = 'stream-menu-show',
-    STREAM_STATS_TOGGLE = 'stream-stats-toggle',
-    STREAM_SOUND_TOGGLE = 'stream-sound-toggle',
-    STREAM_MICROPHONE_TOGGLE = 'stream-microphone-toggle',
-
-    STREAM_VOLUME_INC = 'stream-volume-inc',
-    STREAM_VOLUME_DEC = 'stream-volume-dec',
-
-    DEVICE_SOUND_TOGGLE = 'device-sound-toggle',
-    DEVICE_VOLUME_INC = 'device-volume-inc',
-    DEVICE_VOLUME_DEC = 'device-volume-dec',
-
-    DEVICE_BRIGHTNESS_INC = 'device-brightness-inc',
-    DEVICE_BRIGHTNESS_DEC = 'device-brightness-dec',
-}
 
 export class ControllerShortcut {
-    static readonly #STORAGE_KEY = 'better_xcloud_controller_shortcuts';
+    private static buttonsCache: {[key: string]: boolean[]} = {};
-
+    private static buttonsStatus: {[key: string]: boolean[]} = {};
-    static #buttonsCache: {[key: string]: boolean[]} = {};
-    static #buttonsStatus: {[key: string]: boolean[]} = {};
-
-    static #$selectProfile: HTMLSelectElement;
-    static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {};
-    static #$container: HTMLElement;
-
-    static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} = {};
 
     static reset(index: number) {
-        ControllerShortcut.#buttonsCache[index] = [];
+        ControllerShortcut.buttonsCache[index] = [];
-        ControllerShortcut.#buttonsStatus[index] = [];
+        ControllerShortcut.buttonsStatus[index] = [];
     }
 
     static handle(gamepad: Gamepad): boolean {
-        const gamepadIndex = gamepad.index;
+        const controllerSettings = window.BX_STREAM_SETTINGS.controllers[gamepad.id];
-        const actions = ControllerShortcut.#ACTIONS[gamepad.id];
+        if (!controllerSettings) {
+            return false;
+        }
+
+        const actions = controllerSettings.shortcuts;
         if (!actions) {
             return false;
         }
 
+        const gamepadIndex = gamepad.index;
+
         // Move the buttons status from the previous frame to the cache
-        ControllerShortcut.#buttonsCache[gamepadIndex] = ControllerShortcut.#buttonsStatus[gamepadIndex].slice(0);
+        ControllerShortcut.buttonsCache[gamepadIndex] = ControllerShortcut.buttonsStatus[gamepadIndex].slice(0);
         // Clear the buttons status
-        ControllerShortcut.#buttonsStatus[gamepadIndex] = [];
+        ControllerShortcut.buttonsStatus[gamepadIndex] = [];
 
         const pressed: boolean[] = [];
         let otherButtonPressed = false;
 
-        gamepad.buttons.forEach((button, index) => {
+        const entries = gamepad.buttons.entries();
+        let index: GamepadKey;
+        let button: GamepadButton;
+        for ([index, button] of entries) {
             // Only add the newly pressed button to the array (holding doesn't count)
             if (button.pressed && index !== GamepadKey.HOME) {
                 otherButtonPressed = true;
                 pressed[index] = true;
 
                 // If this is newly pressed button -> run action
-                if (actions[index] && !ControllerShortcut.#buttonsCache[gamepadIndex][index]) {
+                if (actions[index] && !ControllerShortcut.buttonsCache[gamepadIndex][index]) {
-                    setTimeout(() => ControllerShortcut.#runAction(actions[index]!), 0);
+                    const idx = index;
+                    setTimeout(() => ShortcutHandler.runAction(actions[idx]!), 0);
                 }
             }
-        });
+        };
 
-        ControllerShortcut.#buttonsStatus[gamepadIndex] = pressed;
+        ControllerShortcut.buttonsStatus[gamepadIndex] = pressed;
         return otherButtonPressed;
     }
-
-    static #runAction(action: ShortcutAction) {
-        switch (action) {
-            case ShortcutAction.STREAM_SCREENSHOT_CAPTURE:
-                Screenshot.takeScreenshot();
-                break;
-
-            case ShortcutAction.STREAM_STATS_TOGGLE:
-                StreamStats.toggle();
-                break;
-
-            case ShortcutAction.STREAM_MICROPHONE_TOGGLE:
-                MicrophoneShortcut.toggle();
-                break;
-
-            case ShortcutAction.STREAM_MENU_SHOW:
-                StreamUiShortcut.showHideStreamMenu();
-                break;
-
-            case ShortcutAction.STREAM_SOUND_TOGGLE:
-                SoundShortcut.muteUnmute();
-                break;
-
-            case ShortcutAction.STREAM_VOLUME_INC:
-                SoundShortcut.adjustGainNodeVolume(10);
-                break;
-
-            case ShortcutAction.STREAM_VOLUME_DEC:
-                SoundShortcut.adjustGainNodeVolume(-10);
-                break;
-
-            case ShortcutAction.DEVICE_BRIGHTNESS_INC:
-            case ShortcutAction.DEVICE_BRIGHTNESS_DEC:
-            case ShortcutAction.DEVICE_SOUND_TOGGLE:
-            case ShortcutAction.DEVICE_VOLUME_INC:
-            case ShortcutAction.DEVICE_VOLUME_DEC:
-                AppInterface && AppInterface.runShortcut && AppInterface.runShortcut(action);
-                break;
-        }
-    }
-
-    static #updateAction(profile: string, button: GamepadKey, action: ShortcutAction | null) {
-        if (!(profile in ControllerShortcut.#ACTIONS)) {
-            ControllerShortcut.#ACTIONS[profile] = [];
-        }
-
-        if (!action) {
-            action = null;
-        }
-
-        ControllerShortcut.#ACTIONS[profile][button] = action;
-
-        // Remove empty profiles
-        for (const key in ControllerShortcut.#ACTIONS) {
-            let empty = true;
-            for (const value of ControllerShortcut.#ACTIONS[key]) {
-                if (!!value) {
-                    empty = false;
-                    break;
-                }
-            }
-
-            if (empty) {
-                delete ControllerShortcut.#ACTIONS[key];
-            }
-        }
-
-        // Save to storage
-        window.localStorage.setItem(ControllerShortcut.#STORAGE_KEY, JSON.stringify(ControllerShortcut.#ACTIONS));
-
-        console.log(ControllerShortcut.#ACTIONS);
-    }
-
-    static #updateProfileList(e?: GamepadEvent) {
-        const $select = ControllerShortcut.#$selectProfile;
-        const $container = ControllerShortcut.#$container;
-
-        const $fragment = document.createDocumentFragment();
-
-        // Remove old profiles
-        while ($select.firstElementChild) {
-            $select.firstElementChild.remove();
-        }
-
-        const gamepads = navigator.getGamepads();
-        let hasGamepad = false;
-
-        for (const gamepad of gamepads) {
-            if (!gamepad || !gamepad.connected) {
-                continue;
-            }
-
-            // Ignore emulated gamepad
-            if (gamepad.id === MkbHandler.VIRTUAL_GAMEPAD_ID) {
-                continue;
-            }
-
-            hasGamepad = true;
-
-            const $option = CE<HTMLOptionElement>('option', {value: gamepad.id}, gamepad.id);
-            $fragment.appendChild($option);
-        }
-
-        if (hasGamepad) {
-            $select.appendChild($fragment);
-
-            $select.selectedIndex = 0;
-            $select.dispatchEvent(new Event('change'));
-        }
-
-        $container.dataset.hasGamepad = hasGamepad.toString();
-    }
-
-    static #switchProfile(profile: string) {
-        let actions = ControllerShortcut.#ACTIONS[profile];
-        if (!actions) {
-            actions = [];
-        }
-
-        // Reset selects' values
-        let button: any;
-        for (button in ControllerShortcut.#$selectActions) {
-            const $select = ControllerShortcut.#$selectActions[button as GamepadKey]!;
-            $select.value = actions[button] || '';
-
-            BxEvent.dispatch($select, 'change', {
-                    ignoreOnChange: true,
-                });
-        }
-    }
-
-    static renderSettings() {
-        // Read actions from localStorage
-        ControllerShortcut.#ACTIONS = JSON.parse(window.localStorage.getItem(ControllerShortcut.#STORAGE_KEY) || '{}');
-
-        const buttons: Map<GamepadKey, PrompFont> = new Map();
-        buttons.set(GamepadKey.Y, PrompFont.Y);
-        buttons.set(GamepadKey.A, PrompFont.A);
-        buttons.set(GamepadKey.B, PrompFont.B);
-        buttons.set(GamepadKey.X, PrompFont.X);
-
-        buttons.set(GamepadKey.UP, PrompFont.UP);
-        buttons.set(GamepadKey.DOWN, PrompFont.DOWN);
-        buttons.set(GamepadKey.LEFT, PrompFont.LEFT);
-        buttons.set(GamepadKey.RIGHT, PrompFont.RIGHT);
-
-        buttons.set(GamepadKey.SELECT, PrompFont.SELECT);
-        buttons.set(GamepadKey.START, PrompFont.START);
-
-        buttons.set(GamepadKey.LB, PrompFont.LB);
-        buttons.set(GamepadKey.RB, PrompFont.RB);
-
-        buttons.set(GamepadKey.LT, PrompFont.LT);
-        buttons.set(GamepadKey.RT, PrompFont.RT);
-
-        buttons.set(GamepadKey.L3, PrompFont.L3);
-        buttons.set(GamepadKey.R3, PrompFont.R3);
-
-        const actions: {[key: string]: Partial<{[key in ShortcutAction]: string | string[]}>} = {
-            [t('device')]: AppInterface && {
-                [ShortcutAction.DEVICE_SOUND_TOGGLE]: [t('sound'), t('toggle')],
-                [ShortcutAction.DEVICE_VOLUME_INC]: [t('volume'), t('increase')],
-                [ShortcutAction.DEVICE_VOLUME_DEC]: [t('volume'), t('decrease')],
-
-                [ShortcutAction.DEVICE_BRIGHTNESS_INC]: [t('brightness'), t('increase')],
-                [ShortcutAction.DEVICE_BRIGHTNESS_DEC]: [t('brightness'), t('decrease')],
-            },
-
-            [t('stream')]: {
-                [ShortcutAction.STREAM_SCREENSHOT_CAPTURE]: t('take-screenshot'),
-
-                [ShortcutAction.STREAM_SOUND_TOGGLE]: [t('sound'), t('toggle')],
-                [ShortcutAction.STREAM_VOLUME_INC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('volume'), t('increase')],
-                [ShortcutAction.STREAM_VOLUME_DEC]: getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && [t('volume'), t('decrease')],
-
-                [ShortcutAction.STREAM_MENU_SHOW]: [t('menu'), t('show')],
-                [ShortcutAction.STREAM_STATS_TOGGLE]: [t('stats'), t('show-hide')],
-                [ShortcutAction.STREAM_MICROPHONE_TOGGLE]: [t('microphone'), t('toggle')],
-            }
-        };
-
-        const $baseSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'}, CE('option', {value: ''}, '---'));
-        for (const groupLabel in actions) {
-            const items = actions[groupLabel];
-            if (!items) {
-                continue;
-            }
-
-            const $optGroup = CE<HTMLOptGroupElement>('optgroup', {'label': groupLabel});
-
-            for (const action in items) {
-                let label = items[action as keyof typeof items];
-                if (!label) {
-                    continue;
-                }
-
-                if (Array.isArray(label)) {
-                    label = label.join(' ❯ ');
-                }
-
-                const $option = CE<HTMLOptionElement>('option', {value: action}, label);
-                $optGroup.appendChild($option);
-            }
-
-            $baseSelect.appendChild($optGroup);
-        }
-
-        let $remap: HTMLElement;
-        let $selectProfile: HTMLSelectElement;
-
-        const $container = CE('div', {'data-has-gamepad': 'false'},
-            CE('div', {},
-                CE('p', {'class': 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
-            ),
-
-            $remap = CE('div', {},
-                $selectProfile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}),
-                CE('p', {'class': 'bx-shortcut-note'},
-                    CE('span', {'class': 'bx-prompt'}, PrompFont.HOME),
-                    ': ' + t('controller-shortcuts-xbox-note'),
-                ),
-            ),
-        );
-
-        $selectProfile.addEventListener('change', e => {
-            ControllerShortcut.#switchProfile($selectProfile.value);
-        });
-
-        const onActionChanged = (e: Event) => {
-            const $target = e.target as HTMLSelectElement;
-
-            const profile = $selectProfile.value;
-            const button: unknown = $target.dataset.button;
-            const action = $target.value as ShortcutAction;
-
-            const $fakeSelect = $target.previousElementSibling! as HTMLSelectElement;
-            let fakeText = '---';
-            if (action) {
-                const $selectedOption =  $target.options[$target.selectedIndex];
-                const $optGroup = $selectedOption.parentElement as HTMLOptGroupElement;
-                fakeText = $optGroup.label + ' ❯ ' + $selectedOption.text;
-            }
-            ($fakeSelect.firstElementChild as HTMLOptionElement).text = fakeText;
-
-            !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action);
-        };
-
-        // @ts-ignore
-        for (const [button, prompt] of buttons) {
-            const $row = CE('div', {'class': 'bx-shortcut-row'});
-
-            const $label = CE('label', {'class': 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
-
-            const $div = CE('div', {'class': 'bx-shortcut-actions'});
-
-            const $fakeSelect = CE<HTMLSelectElement>('select', {autocomplete: 'off'},
-                CE('option', {}, '---'),
-            );
-            $div.appendChild($fakeSelect);
-
-            const $select = $baseSelect.cloneNode(true) as HTMLSelectElement;
-            $select.dataset.button = button.toString();
-            $select.addEventListener('change', onActionChanged);
-
-            ControllerShortcut.#$selectActions[button] = $select;
-
-            $div.appendChild($select);
-
-            $row.appendChild($label);
-            $row.appendChild($div);
-
-            $remap.appendChild($row);
-        }
-
-        $container.appendChild($remap);
-
-        ControllerShortcut.#$selectProfile = $selectProfile;
-        ControllerShortcut.#$container = $container;
-
-        // Detect when gamepad connected/disconnect
-        window.addEventListener('gamepadconnected', ControllerShortcut.#updateProfileList);
-        window.addEventListener('gamepaddisconnected', ControllerShortcut.#updateProfileList);
-
-        ControllerShortcut.#updateProfileList();
-
-        return $container;
-    }
 }

src/modules/device-vibration-manager.ts

@@ -0,0 +1,145 @@
+import { AppInterface, STATES } from "@utils/global";
+import { BxEvent } from "@utils/bx-event";
+import { StreamSettings } from "@/utils/stream-settings";
+
+const VIBRATION_DATA_MAP = {
+    gamepadIndex: 8,
+    leftMotorPercent: 8,
+    rightMotorPercent: 8,
+    leftTriggerMotorPercent: 8,
+    rightTriggerMotorPercent: 8,
+    durationMs: 16,
+    // delayMs: 16,
+    // repeat: 8,
+};
+
+type VibrationData = {
+    [key in keyof typeof VIBRATION_DATA_MAP]?: number;
+}
+
+export class DeviceVibrationManager {
+    private static instance: DeviceVibrationManager | null | undefined;
+    public static getInstance(): typeof DeviceVibrationManager['instance'] {
+        if (typeof DeviceVibrationManager.instance === 'undefined') {
+            if (STATES.browser.capabilities.deviceVibration) {
+                DeviceVibrationManager.instance = new DeviceVibrationManager();
+            } else {
+                DeviceVibrationManager.instance = null;
+            }
+        }
+
+        return DeviceVibrationManager.instance;
+    }
+
+    private dataChannel: RTCDataChannel | null = null;
+    private boundOnMessage: (e: MessageEvent) => void;
+
+    constructor() {
+        this.boundOnMessage = this.onMessage.bind(this);
+
+        window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
+            const dataChannel = (e as any).dataChannel as RTCDataChannel;
+            if (dataChannel?.label === 'input') {
+                this.reset();
+
+                this.dataChannel = dataChannel;
+                this.setupDataChannel();
+            }
+        });
+
+        window.addEventListener(BxEvent.DEVICE_VIBRATION_CHANGED, e => {
+            this.setupDataChannel();
+        });
+    }
+
+    private setupDataChannel() {
+        if (!this.dataChannel) {
+            return;
+        }
+
+        this.removeEventListeners();
+
+        if (window.BX_STREAM_SETTINGS.deviceVibrationIntensity > 0) {
+            this.dataChannel.addEventListener('message', this.boundOnMessage);
+        }
+    }
+
+    private playVibration(data: Required<VibrationData>) {
+        const vibrationIntensity = StreamSettings.settings.deviceVibrationIntensity;
+        if (AppInterface) {
+            AppInterface.vibrate(JSON.stringify(data), vibrationIntensity);
+            return;
+        }
+
+        const realIntensity = Math.min(100, data.leftMotorPercent + data.rightMotorPercent / 2) * vibrationIntensity;
+        if (realIntensity === 0 || realIntensity === 100) {
+            // Stop vibration
+            window.navigator.vibrate(realIntensity ? data.durationMs : 0);
+            return;
+        }
+
+        const pulseDuration = 200;
+        const onDuration = Math.floor(pulseDuration * realIntensity / 100);
+        const offDuration = pulseDuration - onDuration;
+
+        const repeats = Math.ceil(data.durationMs / pulseDuration);
+        const pulses = Array(repeats).fill([onDuration, offDuration]).flat();
+
+        window.navigator.vibrate(pulses);
+    }
+
+    onMessage(e: MessageEvent) {
+        if (typeof e !== 'object' || !(e.data instanceof ArrayBuffer)) {
+            return;
+        }
+
+        const dataView = new DataView(e.data);
+        let offset = 0;
+
+        let messageType;
+        if (dataView.byteLength === 13) { // version >= 8
+            messageType = dataView.getUint16(offset, true);
+            offset += Uint16Array.BYTES_PER_ELEMENT;
+        } else {
+            messageType = dataView.getUint8(offset);
+            offset += Uint8Array.BYTES_PER_ELEMENT;
+        }
+
+        if (!(messageType & 128)) { // Vibration
+            return;
+        }
+
+        const vibrationType = dataView.getUint8(offset);
+        offset += Uint8Array.BYTES_PER_ELEMENT;
+
+        if (vibrationType !== 0) { // FourMotorRumble
+            return;
+        }
+
+        const data: VibrationData = {};
+        let key: keyof typeof VIBRATION_DATA_MAP;
+        for (key in VIBRATION_DATA_MAP) {
+            if (VIBRATION_DATA_MAP[key] === 16) {
+                data[key] = dataView.getUint16(offset, true);
+                offset += Uint16Array.BYTES_PER_ELEMENT;
+            } else {
+                data[key] = dataView.getUint8(offset);
+                offset += Uint8Array.BYTES_PER_ELEMENT;
+            }
+        }
+
+        this.playVibration(data as Required<VibrationData>);
+    }
+
+    private removeEventListeners() {
+        // Clear event listeners in previous DataChannel
+        try {
+            this.dataChannel?.removeEventListener('message', this.boundOnMessage);
+        } catch (e) {}
+    }
+
+    reset() {
+        this.removeEventListeners();
+        this.dataChannel = null;
+    }
+}

src/modules/dialog.ts

@@ -1,102 +0,0 @@
-import { t } from "@utils/translation";
-import { CE, createButton, ButtonStyle } from "@utils/html";
-import { BxIcon } from "@utils/bx-icon";
-
-type DialogOptions = Partial<{
-    title: string;
-    className: string;
-    content: string | HTMLElement;
-    hideCloseButton: boolean;
-    onClose: string;
-    helpUrl: string;
-}>;
-
-export class Dialog {
-    $dialog: HTMLElement;
-    $title: HTMLElement;
-    $content: HTMLElement;
-    $overlay: HTMLElement;
-
-    onClose: any;
-
-    constructor(options: DialogOptions) {
-        const {
-            title,
-            className,
-            content,
-            hideCloseButton,
-            onClose,
-            helpUrl,
-        } = options;
-
-        // Create dialog overlay
-        const $overlay = document.querySelector('.bx-dialog-overlay') as HTMLElement;
-
-        if (!$overlay) {
-            this.$overlay = CE('div', {'class': 'bx-dialog-overlay bx-gone'});
-
-            // Disable right click
-            this.$overlay.addEventListener('contextmenu', e => e.preventDefault());
-
-            document.documentElement.appendChild(this.$overlay);
-        } else {
-            this.$overlay = $overlay;
-        }
-
-        let $close;
-        this.onClose = onClose;
-        this.$dialog = CE('div', {'class': `bx-dialog ${className || ''} bx-gone`},
-                this.$title = CE('h2', {}, CE('b', {}, title),
-                        helpUrl && createButton({
-                                icon: BxIcon.QUESTION,
-                                style: ButtonStyle.GHOST,
-                                title: t('help'),
-                                url: helpUrl,
-                            }),
-                    ),
-                this.$content = CE('div', {'class': 'bx-dialog-content'}, content),
-                !hideCloseButton && ($close = CE('button', {type: 'button'}, t('close'))),
-            );
-
-        $close && $close.addEventListener('click', e => {
-            this.hide(e);
-        });
-
-        !title && this.$title.classList.add('bx-gone');
-        !content && this.$content.classList.add('bx-gone');
-
-        // Disable right click
-        this.$dialog.addEventListener('contextmenu', e => e.preventDefault());
-
-        document.documentElement.appendChild(this.$dialog);
-    }
-
-    show(newOptions: DialogOptions) {
-        // Clear focus
-        document.activeElement && (document.activeElement as HTMLElement).blur();
-
-        if (newOptions && newOptions.title) {
-            this.$title.querySelector('b')!.textContent = newOptions.title;
-            this.$title.classList.remove('bx-gone');
-        }
-
-        this.$dialog.classList.remove('bx-gone');
-        this.$overlay.classList.remove('bx-gone');
-
-        document.body.classList.add('bx-no-scroll');
-    }
-
-    hide(e?: any) {
-        this.$dialog.classList.add('bx-gone');
-        this.$overlay.classList.add('bx-gone');
-
-        document.body.classList.remove('bx-no-scroll');
-
-        this.onClose && this.onClose(e);
-    }
-
-    toggle() {
-        this.$dialog.classList.toggle('bx-gone');
-        this.$overlay.classList.toggle('bx-gone');
-    }
-}

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

@@ -1,6 +0,0 @@
-export abstract class BaseGameBarAction {
-    constructor() {}
-    reset() {}
-
-    abstract render(): HTMLElement;
-}

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

@@ -1,30 +0,0 @@
-import { BxEvent } from "@utils/bx-event";
-import { BxIcon } from "@utils/bx-icon";
-import { createButton, ButtonStyle } from "@utils/html";
-import { BaseGameBarAction } from "./action-base";
-import { t } from "@utils/translation";
-import { Screenshot } from "@/utils/screenshot";
-
-export class ScreenshotAction extends BaseGameBarAction {
-    $content: HTMLElement;
-
-    constructor() {
-        super();
-
-        const onClick = (e: Event) => {
-                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,
-            });
-    }
-
-    render(): HTMLElement {
-        return this.$content;
-    }
-}

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

@@ -1,54 +0,0 @@
-import { BxEvent } from "@utils/bx-event";
-import { BxIcon } from "@utils/bx-icon";
-import { createButton, ButtonStyle, CE } from "@utils/html";
-import { TouchController } from "@modules/touch-controller";
-import { BaseGameBarAction } from "./action-base";
-import { t } from "@utils/translation";
-
-export class TouchControlAction extends BaseGameBarAction {
-    $content: HTMLElement;
-
-    constructor() {
-        super();
-
-        const onClick = (e: Event) => {
-            BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-
-            const $parent = (e as any).target.closest('div[data-enabled]');
-            let enabled = $parent.getAttribute('data-enabled', 'true') === 'true';
-            $parent.setAttribute('data-enabled', (!enabled).toString());
-
-            TouchController.toggleVisibility(enabled);
-        };
-
-        const $btnEnable = createButton({
-            style: ButtonStyle.GHOST,
-            icon: BxIcon.TOUCH_CONTROL_ENABLE,
-            title: t('show-touch-controller'),
-            onClick: onClick,
-            classes: ['bx-activated'],
-        });
-
-        const $btnDisable = createButton({
-            style: ButtonStyle.GHOST,
-            icon: BxIcon.TOUCH_CONTROL_DISABLE,
-            title: t('hide-touch-controller'),
-            onClick: onClick,
-        });
-
-        this.$content = CE('div', {},
-            $btnEnable,
-            $btnDisable,
-        );
-
-        this.reset();
-    }
-
-    render(): HTMLElement {
-        return this.$content;
-    }
-
-    reset(): void {
-        this.$content.setAttribute('data-enabled', 'true');
-    }
-}

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

@@ -0,0 +1,16 @@
+import { BxEvent } from "@/utils/bx-event";
+
+export abstract class BaseGameBarAction {
+    abstract $content: HTMLElement;
+
+    constructor() {}
+    reset() {}
+
+    onClick(e: Event) {
+        BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
+    };
+
+    render(): HTMLElement {
+        return this.$content;
+    };
+}

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

@@ -1,38 +1,51 @@
 import { CE, createSvgIcon } from "@utils/html";
-import { ScreenshotAction } from "./action-screenshot";
+import { ScreenshotAction } from "./screenshot-action";
-import { TouchControlAction } from "./action-touch-control";
+import { TouchControlAction } from "./touch-control-action";
 import { BxEvent } from "@utils/bx-event";
 import { BxIcon } from "@utils/bx-icon";
-import type { BaseGameBarAction } from "./action-base";
+import type { BaseGameBarAction } from "./base-action";
 import { STATES } from "@utils/global";
-import { PrefKey, getPref } from "@utils/preferences";
+import { MicrophoneAction } from "./microphone-action";
-import { MicrophoneAction } from "./action-microphone";
+import { PrefKey } from "@/enums/pref-keys";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
+import { TrueAchievementsAction } from "./true-achievements-action";
+import { SpeakerAction } from "./speaker-action";
+import { RendererAction } from "./renderer-action";
+import { BxLogger } from "@/utils/bx-logger";
+import { GameBarPosition, TouchControllerMode } from "@/enums/pref-values";
 
 
 export class GameBar {
-    private static instance: GameBar;
+    private static instance: GameBar | null | undefined;
-
+    public static getInstance(): typeof GameBar['instance'] {
-    public static getInstance(): GameBar {
+        if (typeof GameBar.instance === 'undefined') {
-        if (!GameBar.instance) {
+            if (getPref<GameBarPosition>(PrefKey.GAME_BAR_POSITION) !== GameBarPosition.OFF) {
                 GameBar.instance = new GameBar();
+            } else {
+                GameBar.instance = null;
+            }
         }
 
         return GameBar.instance;
     }
 
+    private readonly LOG_TAG = 'GameBar';
+
     private static readonly VISIBLE_DURATION = 2000;
 
     private $gameBar: HTMLElement;
     private $container: HTMLElement;
 
-    private timeout: number | null = null;
+    private timeoutId: number | null = null;
 
     private actions: BaseGameBarAction[] = [];
 
     private constructor() {
+        BxLogger.info(this.LOG_TAG, 'constructor()');
+
         let $container;
 
-        const position = getPref(PrefKey.GAME_BAR_POSITION);
+        const position = getPref<GameBarPosition>(PrefKey.GAME_BAR_POSITION);
 
         const $gameBar = CE('div', {id: 'bx-game-bar', class: 'bx-gone', 'data-position': position},
             $container = CE('div', {class: 'bx-game-bar-container bx-offscreen'}),
@@ -41,8 +54,11 @@ export class GameBar {
 
         this.actions = [
             new ScreenshotAction(),
-            ...(STATES.hasTouchSupport && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
+            ...(STATES.userAgent.capabilities.touch && (getPref<TouchControllerMode>(PrefKey.TOUCH_CONTROLLER_MODE) !== TouchControllerMode.OFF) ? [new TouchControlAction()] : []),
+            new SpeakerAction(),
+            new RendererAction(),
             new MicrophoneAction(),
+            new TrueAchievementsAction(),
         ];
 
         // Reverse the action list if Game Bar's position is on the right side
@@ -65,18 +81,14 @@ export class GameBar {
         });
 
         // Hide game bar after clicking on an action
-        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, this.hideBar.bind(this));
+        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, this.hideBar);
 
-        $container.addEventListener('pointerover', this.clearHideTimeout.bind(this));
+        $container.addEventListener('pointerover', this.clearHideTimeout);
-        $container.addEventListener('pointerout', this.beginHideTimeout.bind(this));
+        $container.addEventListener('pointerout', this.beginHideTimeout);
 
         // Add animation when hiding game bar
         $container.addEventListener('transitionend', e => {
-            const classList = $container.classList;
+            $container.classList.replace('bx-hide', 'bx-offscreen');
-            if (classList.contains('bx-hide')) {
-                classList.remove('bx-offscreen', 'bx-hide');
-                classList.add('bx-offscreen');
-            }
         });
 
         document.documentElement.appendChild($gameBar);
@@ -84,59 +96,47 @@ export class GameBar {
         this.$container = $container;
 
         // Enable/disable Game Bar when playing/pausing
-        getPref(PrefKey.GAME_BAR_POSITION) !== 'off' && window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, ((e: Event) => {
+        position !== GameBarPosition.OFF && window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, ((e: Event) => {
-            if (!STATES.isPlaying) {
-                this.disable();
-                return;
-            }
-
             // Toggle Game bar
-            const mode = (e as any).mode;
+            if (STATES.isPlaying) {
-            mode !== 'None' ? this.disable() : this.enable();
+                window.BX_STREAM_SETTINGS.xCloudPollingMode !== 'none' ? this.disable() : this.enable();
+            }
         }).bind(this));
     }
 
-    private beginHideTimeout() {
+    private beginHideTimeout = () => {
         this.clearHideTimeout();
 
-        this.timeout = window.setTimeout(() => {
+        this.timeoutId = window.setTimeout(() => {
-                this.timeout = null;
+            this.timeoutId = null;
             this.hideBar();
         }, GameBar.VISIBLE_DURATION);
     }
 
-    private clearHideTimeout() {
+    private clearHideTimeout = () => {
-        this.timeout && clearTimeout(this.timeout);
+        this.timeoutId && clearTimeout(this.timeoutId);
-        this.timeout = null;
+        this.timeoutId = null;
     }
 
     enable() {
-        this.$gameBar && this.$gameBar.classList.remove('bx-gone');
+        this.$gameBar.classList.remove('bx-gone');
     }
 
     disable() {
         this.hideBar();
-        this.$gameBar && this.$gameBar.classList.add('bx-gone');
+        this.$gameBar.classList.add('bx-gone');
     }
 
     showBar() {
-        if (!this.$container) {
+        this.$container.classList.remove('bx-offscreen', 'bx-hide' , 'bx-gone');
-            return;
-        }
-
-        this.$container.classList.remove('bx-offscreen', 'bx-hide');
         this.$container.classList.add('bx-show');
 
         this.beginHideTimeout();
     }
 
-    hideBar() {
+    hideBar = () => {
-        if (!this.$container) {
+        this.clearHideTimeout();
-            return;
+        this.$container.classList.replace('bx-show', 'bx-hide');
-        }
-
-        this.$container.classList.remove('bx-show');
-        this.$container.classList.add('bx-hide');
     }
 
     // Reset all states

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

@@ -1,66 +1,49 @@
 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 "./base-action";
-import { BaseGameBarAction } from "./action-base";
+import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/microphone-shortcut";
-import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-microphone";
 
 
 export class MicrophoneAction extends BaseGameBarAction {
     $content: HTMLElement;
 
-    visible: boolean = false;
-
     constructor() {
         super();
 
-        const onClick = (e: Event) => {
-                BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
-
-                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: this.onClick,
-            onClick: onClick,
             classes: ['bx-activated'],
         });
 
         const $btnMuted = createButton({
             style: ButtonStyle.GHOST,
             icon: BxIcon.MICROPHONE_MUTED,
-            title: t('hide-touch-controller'),
+            onClick: this.onClick,
-            onClick: onClick,
         });
 
-        this.$content = CE('div', {},
+        this.$content = CE('div', {}, $btnMuted, $btnDefault);
-            $btnDefault,
-            $btnMuted,
-        );
-
-        this.reset();
 
         window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
             const microphoneState = (e as any).microphoneState;
             const enabled = microphoneState === MicrophoneState.ENABLED;
-
+            this.$content.dataset.activated = enabled.toString();
-            this.$content.setAttribute('data-enabled', enabled.toString());
 
             // Show the button in Game Bar if the mic is enabled
             this.$content.classList.remove('bx-gone');
         });
     }
 
-    render(): HTMLElement {
+    onClick = (e: Event) => {
-        return this.$content;
+        super.onClick(e);
+        const enabled = MicrophoneShortcut.toggle(false);
+        this.$content.dataset.activated = enabled.toString();
     }
 
     reset(): void {
-        this.visible = false;
         this.$content.classList.add('bx-gone');
-        this.$content.setAttribute('data-enabled', 'false');
+        this.$content.dataset.activated = 'false';
     }
 }