Bump version to 5.4.0

This reverts commit 91ab57fa29.

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

@@ -4,12 +4,28 @@ title: "[Bug] "
 labels:
   - bug
 body:
-  - type: markdown
+  - type: checkboxes
+    id: checklist
     attributes:
-      value: |
-        Please fill out the following information to help us resolve the issue.
-        > [!warning]
-        > Only use English. Any other languages will be deleted.
+      label: Checklist
+      options:
+        - label: I will only use English in my report.
+          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:
@@ -24,40 +40,28 @@ body:
       multiple: false
     validations:
       required: true
-  - type: dropdown
+  - type: input
+    id: device_name
+    attributes:
+      label: "Device"
+      description: "Name of the device"
+      placeholder: "e.g., Google Pixel 8"
+    validations:
+      required: true
+  - type: input
     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
+      placeholder: "e.g., Android 14"
     validations:
       required: true
   - type: input
     id: browser_version
     attributes:
-      label: "Browser Version"
-      description: "What is the version of the browser?"
-      placeholder: "e.g., 122.0"
+      label: "Android app/Browser Version"
+      description: "What is the name and version of the browser/Android app?"
+      placeholder: "e.g., Chrome 124.0, Android app 0.15.0"
     validations:
       required: true
   - type: input
@@ -68,12 +72,20 @@ body:
       placeholder: "e.g., 3.5.0"
     validations:
       required: true
+  - type: input
+    id: game_list
+    attributes:
+      label: "Game list"
+      description: "Name the game(s) where you saw this bug"
+      placeholder: "e.g., Halo"
+    validations:
+      required: false
   - type: textarea
-    id: repro
+    id: reproduction
     attributes:
       label: "Reproduction Steps"
       description: |
-        How did you trigger this bug? Please provide screenshot/video if possible.
+        How did you trigger this bug?
       placeholder: |
         Example:
         1. Open game X
@@ -81,3 +93,11 @@ body:
         3. Error
     validations:
       required: true
+  - type: textarea
+    id: media
+    attributes:
+      label: "Screenshot/video"
+      description: |
+        Please provide screenshot/video if possible.
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.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.ts

@@ -4,6 +4,7 @@ import { parseArgs } from "node:util";
 import { sys } from "typescript";
 import txtScriptHeader from "./src/assets/header_script.txt" with { type: "text" };
 import txtMetaHeader from "./src/assets/header_meta.txt" with { type: "text" };
+import { assert } from "node:console";
 
 enum BuildTarget {
     ALL = 'all',
@@ -24,6 +25,8 @@ const postProcess = (str: string): string => {
     // Add ADDITIONAL CODE block
     str = str.replace('var DEFAULT_FLAGS', '\n/* ADDITIONAL CODE */\n\nvar DEFAULT_FLAGS');
 
+    assert(str.includes('/* ADDITIONAL CODE */'));
+
     return str;
 }
 
@@ -45,6 +48,9 @@ const build = async (target: BuildTarget, version: string, config: any={}) => {
         entrypoints: ['src/index.ts'],
         outdir: outDir,
         naming: outputScriptName,
+        minify: {
+            syntax: true,
+        },
         define: {
             'Bun.env.BUILD_TARGET': JSON.stringify(target),
             'Bun.env.SCRIPT_VERSION': JSON.stringify(version),
@@ -99,5 +105,5 @@ console.log('Building: ', values['version']);
 
 const config = {};
 for (const target of buildTargets) {
-	await build(target, values['version'], config);
+    await build(target, values['version']!!, config);
 }

dist/better-xcloud.meta.js

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

package.json

@@ -6,12 +6,12 @@
     "build": "build.ts"
   },
   "devDependencies": {
-    "@types/bun": "latest",
-    "@types/node": "^20.12.7",
+    "@types/bun": "^1.1.6",
+    "@types/node": "^20.14.10",
     "@types/stylus": "^0.48.42",
     "stylus": "^0.63.0"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.5.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

@@ -59,6 +59,10 @@
         }
     }
 
+    &.bx-tall {
+        height: calc(var(--bx-button-height) * 1.5) !important;
+    }
+
     svg {
         display: inline-block;
         width: 16px;
@@ -71,15 +75,17 @@
 
     span {
         display: inline-block;
-        height: calc(var(--bx-button-height) - 2px);
+        /* height: var(--bx-button-height); */
         line-height: var(--bx-button-height);
         vertical-align: middle;
+        /* vertical-align: -webkit-baseline-middle; */
         color: #fff;
         overflow: hidden;
         white-space: nowrap;
     }
+}
 
-    &.bx-focusable {
+.bx-focusable {
     position: relative;
 
     &::after {
@@ -97,7 +103,6 @@
         bottom: 0;
     }
 }
-}
 
 a.bx-button {
     display: inline-block;
@@ -106,3 +111,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

@@ -0,0 +1,118 @@
+#bx-game-bar {
+    z-index: var(--bx-game-bar-z-index);
+    position: fixed;
+    bottom: 0;
+    width: 40px;
+    height: 90px;
+    overflow: visible;
+    cursor: pointer;
+
+    > svg {
+        display: none;
+        pointer-events: none;
+        position: absolute;
+        height: 28px;
+        margin-top: 16px;
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            > svg {
+                display: block;
+            }
+        }
+    }
+
+    .bx-game-bar-container {
+        opacity: 0;
+        position absolute;
+        display: flex;
+        overflow: hidden;
+        background: #1a1b1ee8;
+        box-shadow: 0px 0px 6px #1c1c1c;
+        transition: opacity 0.1s ease-in;
+
+        &.bx-show {
+            opacity: 0.9;
+
+            + svg {
+                display: none !important;
+            }
+        }
+
+        &.bx-hide {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        button {
+            width: 60px;
+            height: 60px;
+            border-radius: 0;
+
+            svg {
+                width: 28px;
+                height: 28px;
+                transition: transform 0.08s ease 0s;
+            }
+
+            &:hover {
+                border-radius: 0;
+            }
+
+            &:active {
+                svg {
+                    transform: scale(0.75);
+                }
+            }
+
+            &.bx-activated {
+                background-color: white;
+
+                svg {
+                    filter: invert(1);
+                }
+            }
+        }
+
+        /* Touch controller buttons */
+        div[data-enabled] {
+            button {
+                display: none;
+            }
+        }
+
+        /* Show enabled button */
+        div[data-enabled='true'] {
+            button:first-of-type {
+                display: block;
+            }
+        }
+
+        /* Show enable button */
+        div[data-enabled='false'] {
+            button:last-of-type {
+                display: block;
+            }
+        }
+    }
+
+    &[data-position="bottom-left"] {
+        left: 0;
+        direction: ltr;
+
+        .bx-game-bar-container {
+            border-radius: 0 10px 10px 0;
+        }
+    }
+
+    &[data-position="bottom-right"] {
+        right: 0;
+        direction: rtl;
+
+        .bx-game-bar-container {
+            direction: ltr;
+            border-radius: 10px 0 0 10px;
+        }
+    }
+}

src/assets/css/global-settings.styl

@@ -1,17 +1,5 @@
-.bx-settings-reload-button-wrapper {
-    z-index: var(--bx-reload-button-z-index);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-    background: #000000cf;
-    padding: 10px;
-
-    button {
-        max-width: 450px;
-        margin: 0 !important;
-    }
+.bx-settings-reload-button {
+    margin-top: 10px;
 }
 
 .bx-settings-container {
@@ -29,11 +17,13 @@
 }
 
 .bx-settings-wrapper {
-    width: 450px;
+    min-width: 450px;
+    max-width: 600px;
     margin: auto;
     padding: 12px 6px;
 
     @media screen and (max-width: 450px) {
+        min-width: unset;
         width: 100%;
     }
 
@@ -41,6 +31,13 @@
         outline: none !important;
     }
 
+    .bx-top-buttons {
+        .bx-button {
+            display: block;
+            margin-bottom: 8px;
+        }
+    }
+
     .bx-settings-title-wrapper {
         display: flex;
         margin-bottom: 10px;
@@ -53,16 +50,19 @@
         text-decoration: none;
         font-weight: bold;
         display: block;
-        color: #5dc21e;
         flex: 1;
+        text-transform: none;
+        margin-right: 10px;
+
+        span {
+            color: #5dc21e !important;
+        }
 
         &:focus {
-            color: #83f73a;
+            span {
+                color: #83f73a !important;
             }
         }
-
-    .bx-button.bx-primary {
-        margin-top: 8px;
     }
 
     a.bx-settings-update {
@@ -98,29 +98,36 @@
 
 .bx-settings-row {
     display: flex;
-    margin-bottom: 8px;
-    padding: 2px 4px;
+    padding: 6px 12px;
+    position: relative;
 
     label {
-        flex: 1;
         align-self: center;
-        margin-bottom: 0;
-        padding-left: 10px;
+        margin: 0 4px 0;
+    }
+
+    .bx-setting-control {
+        flex: 1;
+        display: flex;
+        justify-content: right;
     }
 
 
-    &:focus-within {
-        @media (hover: none) {
+    &: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 {
+    select {
+        &:disabled {
             -webkit-appearance: none;
             background: transparent;
             text-align-last: right;
@@ -129,6 +136,31 @@
         }
     }
 
+    input[type=checkbox] {
+        cursor: pointer;
+    }
+
+    input[type=checkbox],
+    select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+
+    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
+        &::before {
+            content: ' ';
+            border-radius: 4px;
+            border: 2px solid #fff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+        }
+    }
+}
+
 .bx-settings-group-label b, .bx-settings-row label b {
     display: block;
     font-size: 12px;
@@ -161,6 +193,10 @@
     &:hover {
         color: #6dd72b;
     }
+
+    &:focus {
+        text-decoration: underline;
+    }
 }
 
 .bx-settings-custom-user-agent {

src/assets/css/mkb.styl

@@ -16,8 +16,6 @@
 }
 
 .bx-mkb-pointer-lock-msg {
-    display: flex;
-    cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     position: fixed;
@@ -25,7 +23,7 @@
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
     margin: auto;
-    background: #000000e5;
+    background: #151515;
     z-index: var(--bx-mkb-pointer-lock-msg-z-index);
     color: #fff;
     text-align: center;
@@ -36,21 +34,14 @@
     border-radius: 8px;
     align-items: center;
     box-shadow: 0 0 6px #000;
+    min-width: 220px;
+    opacity: 0.9;
 
     &:hover {
-        background: #151515;
+        opacity: 1;
     }
 
-    button {
-        margin-right: 12px;
-        height: 60px;
-    }
-
-    svg {
-        width: 32px;
-    }
-
-    div {
+    > div:first-of-type {
         display: flex;
         flex-direction: column;
         text-align: left;
@@ -61,14 +52,47 @@
 
         &:first-child {
             font-size: 22px;
-            margin-bottom: 8px;
+            margin-bottom: 4px;
+            font-weight: bold;
         }
 
         &:last-child {
-            font-size: 14px;
+            font-size: 12px;
             font-style: italic;
         }
     }
+
+    > div:last-of-type {
+        margin-top: 10px;
+
+        &[data-type='native'] {
+            button {
+                &:first-of-type {
+                    margin-bottom: 8px;
+                }
+            }
+        }
+
+        &[data-type='virtual'] {
+            div {
+                display: flex;
+                flex-flow: row;
+                margin-top: 8px;
+
+                button {
+                    flex: 1;
+
+                    &:first-of-type {
+                        margin-right: 5px;
+                    }
+
+                    &:last-of-type {
+                        margin-left: 5px;
+                    }
+                }
+            }
+        }
+    }
 }
 
 .bx-mkb-preset-tools {

src/assets/css/number-stepper.styl

@@ -1,16 +1,19 @@
 .bx-number-stepper {
+    text-align: center;
+
     span {
         display: inline-block;
-        width: 40px;
+        min-width: 40px;
         font-family: var(--bx-monospaced-font);
-        font-size: 14px;
+        font-size: 12px;
+        margin: 0 4px;
     }
 
     button {
         border: none;
         width: 24px;
         height: 24px;
-        margin: 0 4px;
+        margin: 0;
         line-height: 24px;
         background-color: var(--bx-default-button-color);
         color: #fff;
@@ -18,7 +21,6 @@
         font-weight: bold;
         font-size: 14px;
         font-family: var(--bx-monospaced-font);
-        color: #fff;
 
         &:hover {
             @media (hover: hover) {
@@ -35,7 +37,20 @@
         }
     }
 
+    input[type="range"] {
+        display: block;
+        margin: 12px auto 2px;
+        width: 180px;
+        color: #959595 !important;
+    }
+
     input[type=range]:disabled, button:disabled {
         display: none;
     }
+
+    &[data-disabled=true] {
+        input[type=range], button {
+            display: none;
+        }
+    }
 }

src/assets/css/root.styl

@@ -20,16 +20,16 @@
     --bx-danger-button-disabled-color: #a26c6c;
 
     --bx-toast-z-index: 9999;
-    --bx-reload-button-z-index: 9200;
     --bx-dialog-z-index: 9101;
     --bx-dialog-overlay-z-index: 9100;
     --bx-remote-play-popup-z-index: 9090;
-    --bx-stats-bar-z-index: 9001;
-    --bx-stream-settings-z-index: 9000;
-    --bx-mkb-pointer-lock-msg-z-index: 8999;
-    --bx-screenshot-z-index: 8888;
-    --bx-touch-controller-bar-z-index: 5555;
+    --bx-stats-bar-z-index: 9010;
+    --bx-stream-settings-z-index: 9001;
+    --bx-mkb-pointer-lock-msg-z-index: 9000;
+    --bx-stream-settings-overlay-z-index: 8999;
+    --bx-game-bar-z-index: 8888;
     --bx-wait-time-box-z-index: 100;
+    --bx-screenshot-animation-z-index: 1;
 }
 
 @font-face {
@@ -80,6 +80,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,6 +101,18 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     padding: 0 !important;
 }
 
+.bx-prompt {
+    font-family: var(--bx-promptfont-font);
+}
+
+.bx-line-through {
+    text-decoration: line-through
+}
+
+select[multiple] {
+    overflow: auto;
+}
+
 /* Hide UI elements */
 #headerArea, #uhfSkipToMain, .uhf-footer {
     display: none;
@@ -104,3 +129,42 @@ 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: none;
+    border-radius: 0 0 4px 0;
+    align-items: center;
+    padding: 4px 8px;
+
+    a[class^=BaseItem-module__container]:focus &,
+    button[class^=BaseItem-module__container]:focus & {
+        display: flex;
+    }
+
+    svg {
+        width: 14px;
+        height: 16px;
+        margin-right: 2px;
+    }
+
+    span {
+        display: inline-block;
+        height: 16px;
+        line-height: 16px;
+        font-size: 12px;
+        font-weight: bold;
+    }
+}

src/assets/css/stream-actions.styl

@@ -1,46 +0,0 @@
-.bx-screenshot-button {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    bottom: 0;
-    box-sizing: border-box;
-    width: 60px;
-    height: 90px;
-    padding: 16px 16px 46px 16px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    filter: drop-shadow(0 0 2px #000000B0);
-    transition: opacity 0.1s ease-in-out 0s, padding 0.1s ease-in 0s;
-    z-index: var(--bx-screenshot-z-index);
-
-    /* Credit: https://phosphoricons.com */
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDMyIDMyIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMjguMzA4IDUuMDM4aC00LjI2NWwtMi4wOTctMy4xNDVhMS4yMyAxLjIzIDAgMCAwLTEuMDIzLS41NDhoLTkuODQ2YTEuMjMgMS4yMyAwIDAgMC0xLjAyMy41NDhMNy45NTYgNS4wMzhIMy42OTJBMy43MSAzLjcxIDAgMCAwIDAgOC43MzF2MTcuMjMxYTMuNzEgMy43MSAwIDAgMCAzLjY5MiAzLjY5MmgyNC42MTVBMy43MSAzLjcxIDAgMCAwIDMyIDI1Ljk2MlY4LjczMWEzLjcxIDMuNzEgMCAwIDAtMy42OTItMy42OTJ6bS02Ljc2OSAxMS42OTJjMCAzLjAzOS0yLjUgNS41MzgtNS41MzggNS41MzhzLTUuNTM4LTIuNS01LjUzOC01LjUzOCAyLjUtNS41MzggNS41MzgtNS41MzggNS41MzggMi41IDUuNTM4IDUuNTM4eiIvPjwvc3ZnPgo=');
-
-    &[data-showing=true] {
-        opacity: 0.9;
-    }
-
-    &[data-capturing=true] {
-        padding: 8px 8px 38px 8px;
-    }
-}
-
-.bx-screenshot-canvas {
-    display: none;
-}
-
-#bx-touch-controller-bar {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 6vh;
-    z-index: var(--bx-touch-controller-bar-z-index);
-
-    &[data-showing=true] {
-        display: block;
-    }
-}

src/assets/css/stream-settings.styl

@@ -1,4 +1,4 @@
-.bx-quick-settings-bar {
+.bx-stream-settings-dialog {
     display: flex;
     position: fixed;
     z-index: var(--bx-stream-settings-z-index);
@@ -7,7 +7,21 @@
     -webkit-user-select: none;
 }
 
-.bx-quick-settings-tabs {
+.bx-stream-settings-overlay {
+    position: fixed;
+    background: #0b0b0be3;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--bx-stream-settings-overlay-z-index);
+
+    &[data-is-playing="true"] {
+        background: transparent;
+    }
+}
+
+.bx-stream-settings-tabs {
     position: fixed;
     top: 0;
     right: 420px;
@@ -35,11 +49,16 @@
             background: #2f2f2f;
             border-color: #484848;
         }
+
+        &:focus {
+            border-color: #fff;
+            outline: none;
+        }
     }
 }
 
 
-.bx-quick-settings-tab-contents {
+.bx-stream-settings-tab-contents {
     flex-direction: column;
     position: fixed;
     right: 0;
@@ -56,13 +75,14 @@
     box-shadow: 0px 0px 6px #000;
     overflow: overlay;
 
-    > div[data-group=mkb] {
+    > div[data-tab-group=mkb] {
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow: hidden;
     }
 
+    &:focus,
     *:focus {
         outline: none !important;
     }
@@ -86,23 +106,31 @@
             white-space: nowrap;
         }
     }
-
-    input[type="range"] {
-        display: block;
-        margin: 12px auto 2px;
-        width: 180px;
-        color: #959595 !important;
-    }
 }
 
 
-.bx-quick-settings-row {
+.bx-stream-settings-row {
     display: flex;
     border-bottom: 1px solid #40404080;
-    margin-bottom: 16px;
-    padding-bottom: 16px;
+    padding: 16px 8px;
+    border-left: 2px solid transparent;
 
-    label {
+    &:hover, &:focus-within {
+        background-color: #242424;
+    }
+
+    input[type=checkbox],
+    select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+    &:has(input:focus), &:has(select:focus), &:has(button:focus) {
+        border-left-color: white;
+    }
+
+    > label {
         font-size: 16px;
         display: block;
         text-align: left;
@@ -113,6 +141,10 @@
 
     input {
         accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
     }
 
     select:disabled {
@@ -120,14 +152,82 @@
         background: transparent;
         text-align-last: right;
         border: none;
+        color: #fff;
+    }
+
+    select option:disabled {
+        display: none;
     }
 }
 
-.bx-quick-settings-bar-note {
+.bx-stream-settings-dialog-note {
     display: block;
-    text-align: center;
     font-size: 12px;
     font-weight: lighter;
     font-style: italic;
-    padding-top: 16px;
+}
+
+.bx-stream-settings-tab-contents {
+    div[data-tab-group="shortcuts"] {
+        > div {
+            &[data-has-gamepad=true] {
+                > div:first-of-type {
+                    display: none;
+                }
+
+                > div:last-of-type {
+                    display: block;
+                }
+            }
+
+            &[data-has-gamepad=false] {
+                > div:first-of-type {
+                    display: block;
+                }
+
+                > div:last-of-type {
+                    display: none;
+                }
+            }
+        }
+
+        .bx-shortcut-profile {
+            width: 100%;
+            height: 36px;
+            display: block;
+        }
+
+        .bx-shortcut-note {
+            margin-top: 10px;
+            font-size: 14px;
+        }
+
+        .bx-shortcut-row {
+            display: flex;
+            margin-bottom: 10px;
+
+            label.bx-prompt {
+                flex: 1;
+                font-size: 26px;
+                margin-bottom: 0;
+            }
+
+            .bx-shortcut-actions {
+                flex: 2;
+                position: relative;
+
+                select {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+
+                    &:last-of-type {
+                        opacity: 0;
+                        z-index: calc(var(--bx-stream-settings-z-index) + 1);
+                    }
+                }
+            }
+        }
+    }
 }

src/assets/css/stream-stats.styl

@@ -1,6 +1,5 @@
 /* STATS BADGE */
 .bx-badges {
-    position: absolute;
     margin-left: 0px;
     user-select: none;
     -webkit-user-select: none;
@@ -21,23 +20,55 @@
 
 .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;

src/assets/css/stream.styl

@@ -7,3 +7,76 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
     background-color: #2d2d2d !important;
     color: #000 !important;
 }
+
+.bx-stream-refresh-button {
+    top: calc(env(safe-area-inset-top, 0px) + 10px + 50px) !important;
+}
+
+body[data-media-type=default] .bx-stream-refresh-button {
+    left: calc(env(safe-area-inset-left, 0px) + 11px) !important;
+}
+
+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;
+    }
+
+    50% {
+        border: 8px solid #ffffff80;
+    }
+
+    100% {
+        border: 0px solid #ffffff80;
+    }
+}
+
+div[data-testid=media-container] {
+    display: flex;
+
+    &.bx-taking-screenshot:before {
+        animation: bx-anim-taking-screenshot 0.5s ease;
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: var(--bx-screenshot-animation-z-index);
+    }
+}
+
+
+#game-stream video {
+    margin: auto;
+    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

@@ -7,10 +7,11 @@
 @import 'toast.styl';
 @import 'loading-screen.styl';
 @import 'remote-play.styl';
+@import 'web-components.styl';
 
 @import 'stream.styl';
 @import 'number-stepper.styl';
-@import 'stream-actions.styl';
+@import 'game-bar.styl';
 @import 'stream-stats.styl';
 @import 'stream-settings.styl';
 @import 'mkb.styl';

src/assets/css/toast.styl

@@ -23,6 +23,7 @@
 
     &.bx-hide {
         opacity: 0;
+        pointer-events: none;
     }
 }
 

src/assets/css/web-components.styl

@@ -0,0 +1,93 @@
+.bx-select {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+
+    select {
+        display: none !important;
+    }
+
+    > div, button.bx-select-value {
+        min-width: 110px;
+        text-align: center;
+        margin: 0 8px;
+        line-height: 24px;
+        vertical-align: middle;
+        background: #fff;
+        color: #000;
+        border-radius: 4px;
+        padding: 2px 8px;
+        flex: 1;
+    }
+
+    > div {
+        display: inline-block;
+
+        input {
+            display: inline-block;
+            margin-right: 8px;
+        }
+
+        label {
+            margin-bottom: 0;
+            font-size: 14px;
+            width: 100%;
+
+            span {
+                display: block;
+                font-size: 10px;
+                font-weight: bold;
+                text-align: left;
+                line-height: initial;
+            }
+        }
+    }
+
+    button.bx-select-value {
+        border: none;
+        display: inline-flex;
+        cursor: pointer;
+        min-height: 30px;
+        font-size: 0.9rem;
+        align-items: center;
+
+        span {
+            flex: 1;
+            text-align: center;
+            display: inline-block;
+        }
+
+        input {
+            margin: 0 4px;
+            accent-color: var(--bx-primary-button-color);
+        }
+
+        &: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);
+
+        span {
+            line-height: unset;
+        }
+    }
+}

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/camera.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(.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'/>
+        <circle cx='128' cy='132' r='36'/>
+    </g>
+</svg>

src/assets/svg/caret-left.svg

@@ -0,0 +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'>
+    <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

@@ -0,0 +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'>
+    <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/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

@@ -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='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'/>
+</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/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

@@ -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 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'/>
+</svg>

src/assets/svg/microphone.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='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/refresh.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='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/touch-control-disable.svg

@@ -0,0 +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'>
+    <g fill='none' stroke='#fff'>
+        <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'/>
+    </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='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)'/>
+</svg>

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

@@ -0,0 +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'>
+    <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='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)'/>
+</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,13 @@
+export const BypassServers = {
+    'br': 'Brazil',
+    'jp': 'Japan',
+    'pl': 'Poland',
+    'us': 'United States',
+}
+
+export const BypassServerIps = {
+    'br': '169.150.198.66',
+    'jp': '138.199.21.239',
+    'pl': '45.134.212.66',
+    'us': '143.244.47.65',
+}

src/enums/game-pass-gallery.ts

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

src/enums/mkb.ts

@@ -0,0 +1,102 @@
+import type { GamepadKeyNameType } from "@/types/mkb";
+import { PrompFont } from "@enums/prompt-font";
+
+export enum GamepadKey {
+    A = 0,
+    B = 1,
+    X = 2,
+    Y = 3,
+    LB = 4,
+    RB = 5,
+    LT = 6,
+    RT = 7,
+    SELECT = 8,
+    START = 9,
+    L3 = 10,
+    R3 = 11,
+    UP = 12,
+    DOWN = 13,
+    LEFT = 14,
+    RIGHT = 15,
+    HOME = 16,
+    SHARE = 17,
+
+    LS_UP = 100,
+    LS_DOWN = 101,
+    LS_LEFT = 102,
+    LS_RIGHT = 103,
+
+    RS_UP = 200,
+    RS_DOWN = 201,
+    RS_LEFT = 202,
+    RS_RIGHT = 203,
+};
+
+
+export const GamepadKeyName: GamepadKeyNameType = {
+    [GamepadKey.A]: ['A', PrompFont.A],
+    [GamepadKey.B]: ['B', PrompFont.B],
+    [GamepadKey.X]: ['X', PrompFont.X],
+    [GamepadKey.Y]: ['Y', PrompFont.Y],
+
+    [GamepadKey.LB]: ['LB', PrompFont.LB],
+    [GamepadKey.RB]: ['RB', PrompFont.RB],
+    [GamepadKey.LT]: ['LT', PrompFont.LT],
+    [GamepadKey.RT]: ['RT', PrompFont.RT],
+
+    [GamepadKey.SELECT]: ['Select', PrompFont.SELECT],
+    [GamepadKey.START]: ['Start', PrompFont.START],
+    [GamepadKey.HOME]: ['Home', PrompFont.HOME],
+
+    [GamepadKey.UP]: ['D-Pad Up', PrompFont.UP],
+    [GamepadKey.DOWN]: ['D-Pad Down', PrompFont.DOWN],
+    [GamepadKey.LEFT]: ['D-Pad Left', PrompFont.LEFT],
+    [GamepadKey.RIGHT]: ['D-Pad Right', PrompFont.RIGHT],
+
+    [GamepadKey.L3]: ['L3', PrompFont.L3],
+    [GamepadKey.LS_UP]: ['Left Stick Up', PrompFont.LS_UP],
+    [GamepadKey.LS_DOWN]: ['Left Stick Down', PrompFont.LS_DOWN],
+    [GamepadKey.LS_LEFT]: ['Left Stick Left', PrompFont.LS_LEFT],
+    [GamepadKey.LS_RIGHT]: ['Left Stick Right', PrompFont.LS_RIGHT],
+
+    [GamepadKey.R3]: ['R3', PrompFont.R3],
+    [GamepadKey.RS_UP]: ['Right Stick Up', PrompFont.RS_UP],
+    [GamepadKey.RS_DOWN]: ['Right Stick Down', PrompFont.RS_DOWN],
+    [GamepadKey.RS_LEFT]: ['Right Stick Left', PrompFont.RS_LEFT],
+    [GamepadKey.RS_RIGHT]: ['Right Stick Right', PrompFont.RS_RIGHT],
+};
+
+
+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/prompt-font.ts

@@ -0,0 +1,32 @@
+export enum PrompFont {
+    A = '⇓',
+    B = '⇒',
+    X = '⇐',
+    Y = '⇑',
+
+    LB = '↘',
+    RB = '↙',
+    LT = '↖',
+    RT = '↗',
+
+    SELECT = '⇺',
+    START = '⇻',
+    HOME = '',
+
+    UP = '≻',
+    DOWN = '≽',
+    LEFT = '≺',
+    RIGHT = '≼',
+
+    L3 = '↺',
+    LS_UP = '↾',
+    LS_DOWN = '⇂',
+    LS_LEFT = '↼',
+    LS_RIGHT = '⇀',
+
+    R3 = '↻',
+    RS_UP = '↿',
+    RS_DOWN = '⇃',
+    RS_LEFT = '↽',
+    RS_RIGHT = '⇁',
+}

src/enums/stream-player.ts

@@ -0,0 +1,9 @@
+export enum StreamPlayerType {
+    VIDEO = 'default',
+    WEBGL2 = 'webgl2',
+}
+
+export enum StreamVideoProcessing {
+    USM = 'usm',
+    CAS = 'cas',
+}

src/enums/ui-sections.ts

@@ -0,0 +1,6 @@
+export enum UiSection {
+    NEWS = 'news',
+    FRIENDS = 'friends',
+    MOST_POPULAR = 'most-popular',
+    ALL_GAMES = 'all-games',
+}

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

@@ -6,37 +6,52 @@ 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 { setupBxUi, updateVideoPlayerCss } from "@modules/ui/ui";
+import { setupStreamUi } from "@modules/ui/ui";
 import { PrefKey, getPref } from "@utils/preferences";
 import { LoadingScreen } from "@modules/loading-screen";
 import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
 import { TouchController } from "@modules/touch-controller";
-import { watchHeader } from "@modules/ui/header";
 import { checkForUpdate, disablePwa } from "@utils/utils";
 import { Patcher } from "@modules/patcher";
 import { RemotePlay } from "@modules/remote-play";
 import { onHistoryChanged, patchHistoryMethod } from "@utils/history";
 import { VibrationManager } from "@modules/vibration-manager";
-import { PreloadedState } from "@utils/titles-info";
-import { patchAudioContext, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
-import { STATES } from "@utils/global";
+import { overridePreloadState } from "@utils/preload-state";
+import { patchAudioContext, patchCanvasContext, patchMeControl, patchPointerLockApi, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
+import { AppInterface, STATES } from "@utils/global";
 import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
 import { BxLogger } from "@utils/bx-logger";
+import { GameBar } from "./modules/game-bar/game-bar";
+import { Screenshot } from "./utils/screenshot";
+import { NativeMkbHandler } from "./modules/mkb/native-mkb-handler";
+import { GuideMenu, GuideMenuTab } from "./modules/ui/guide-menu";
+import { StreamSettings } from "./modules/stream/stream-settings";
+import { updateVideoPlayer } from "./modules/stream/stream-settings-utils";
+import { UiSection } from "./enums/ui-sections";
+import { HeaderSection } from "./modules/ui/header";
+import { GameTile } from "./modules/ui/game-tile";
+
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
-    window.addEventListener('load', e => {
-            window.location.search.includes('loggedIn') && window.setTimeout(() => {
-                const location = window.location;
+    const nativePushState = window.history['pushState'];
+    window.history['pushState'] = function(...args: any[]) {
+        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);
-            }, 2000);
-        });
+        return nativePushState.apply(this, arguments);
+    }
     // Stop processing the script
     throw new Error('[Better xCloud] Refreshing the page after logging in');
 }
@@ -77,8 +92,8 @@ if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     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
@@ -89,6 +104,28 @@ 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
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) && BX_FLAGS.PreloadRemotePlay && RemotePlay.preload();
+    } else {
+        // Show Settings button in the header when not signed
+        HeaderSection.watchHeader();
+    }
+
+    // Hide "Play with Friends" skeleton section
+    if (getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS)) {
+        const $parent = document.querySelector('div[class*=PlayWithFriendsSkeleton]')?.closest('div[class*=HomePage-module]') as HTMLElement;
+        $parent && ($parent.style.display = 'none');
+    }
+})
+
 window.BX_EXPOSED = BxExposed;
 
 // Hide Settings UI when navigate to another page
@@ -100,13 +137,13 @@ window.addEventListener('popstate', onHistoryChanged);
 window.history.pushState = patchHistoryMethod('pushState');
 window.history.replaceState = patchHistoryMethod('replaceState');
 
+window.addEventListener(BxEvent.XCLOUD_SERVERS_UNAVAILABLE, e => {
+    STATES.supportedRegion = false;
+    window.setTimeout(HeaderSection.watchHeader, 2000);
+});
+
 window.addEventListener(BxEvent.XCLOUD_SERVERS_READY, e => {
-    // Start rendering UI
-    if (document.querySelector('div[class^=UnsupportedMarketPage]')) {
-        window.setTimeout(watchHeader, 2000);
-    } else {
-        watchHeader();
-    }
+    HeaderSection.watchHeader();
 });
 
 window.addEventListener(BxEvent.STREAM_LOADING, e => {
@@ -123,9 +160,7 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
     }
 
     // Setup UI
-    setupBxUi();
-
-
+    setupStreamUi();
 });
 
 // Setup loading screen
@@ -143,84 +178,137 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 });
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    const $video = (e as any).$video;
-    STATES.currentStream.$video = $video;
-
     STATES.isPlaying = true;
     injectStreamMenuButtons();
-    /*
-    if (getPref(Preferences.CONTROLLER_ENABLE_SHORTCUTS)) {
-        GamepadHandler.startPolling();
-    }
-    */
 
-    const PREF_SCREENSHOT_BUTTON_POSITION = getPref(PrefKey.SCREENSHOT_BUTTON_POSITION);
-    STATES.currentStream.$screenshotCanvas!.width = $video.videoWidth;
-    STATES.currentStream.$screenshotCanvas!.height = $video.videoHeight;
-    updateVideoPlayerCss();
-
-    // Setup screenshot button
-    if (PREF_SCREENSHOT_BUTTON_POSITION !== 'none') {
-        const $btn = document.querySelector('.bx-screenshot-button')! as HTMLElement;
-        $btn.classList.remove('bx-gone');
-        $btn.style.display = 'block';
-
-        if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') {
-            $btn.style.right = '0';
-        } else {
-            $btn.style.left = '0';
-        }
+    if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
+        const gameBar = GameBar.getInstance();
+        gameBar.reset();
+        gameBar.enable();
+        gameBar.showBar();
     }
 
-    const $touchControllerBar = document.getElementById('bx-touch-controller-bar');
-    $touchControllerBar && $touchControllerBar.classList.remove('bx-gone');
+    const $video = (e as any).$video as HTMLVideoElement;
+    Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+
+    updateVideoPlayer();
 });
 
 window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
     BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
 });
 
-window.addEventListener(BxEvent.STREAM_STOPPED, e => {
+function unload() {
     if (!STATES.isPlaying) {
         return;
     }
 
-    STATES.isPlaying = false;
-
     // Stop MKB listeners
-    getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();
+    EmulatedMkbHandler.getInstance().destroy();
+    NativeMkbHandler.getInstance().destroy();
 
-    const $quickBar = document.querySelector('.bx-quick-settings-bar');
-    if ($quickBar) {
-        $quickBar.classList.add('bx-gone');
-    }
+    // Destroy StreamPlayer
+    STATES.currentStream.streamPlayer?.destroy();
 
-    STATES.currentStream.audioGainNode = null;
-    STATES.currentStream.$video = null;
-    StreamStats.onStoppedPlaying();
+    STATES.isPlaying = false;
+    STATES.currentStream = {};
+    window.BX_EXPOSED.shouldShowSensorControls = false;
+    window.BX_EXPOSED.stopTakRendering = false;
 
-    const $screenshotBtn = document.querySelector('.bx-screenshot-button');
-    if ($screenshotBtn) {
-        $screenshotBtn.removeAttribute('style');
-    }
+    StreamSettings.getInstance().hide();
+    StreamStats.getInstance().onStoppedPlaying();
 
     MouseCursorHider.stop();
     TouchController.reset();
+    GameBar.getInstance().disable();
+}
+
+window.addEventListener(BxEvent.STREAM_STOPPED, unload);
+window.addEventListener('pagehide', e => {
+    BxEvent.dispatch(window, BxEvent.STREAM_STOPPED);
+});
+
+window.addEventListener(BxEvent.CAPTURE_SCREENSHOT, e => {
+    Screenshot.takeScreenshot();
 });
 
 
+function observeRootDialog($root: HTMLElement) {
+    let currentShown = false;
+
+    const observer = new MutationObserver(mutationList => {
+        for (const mutation of mutationList) {
+            if (mutation.type !== 'childList') {
+                continue;
+            }
+
+            if (mutation.addedNodes.length === 1) {
+                const $addedElm = mutation.addedNodes[0];
+                if ($addedElm instanceof HTMLElement && $addedElm.className) {
+                    if ($addedElm.className.startsWith('NavigationAnimation') || $addedElm.className.startsWith('DialogRoutes') || $addedElm.className.startsWith('Dialog-module__container')) {
+                        // Make sure it's Guide dialog
+                        if (document.querySelector('#gamepass-dialog-root div[class*=GuideDialog]')) {
+                            // Find navigation bar
+                            const $selectedTab = $addedElm.querySelector('div[class^=NavigationMenu] button[aria-selected=true');
+                            if ($selectedTab) {
+                                let $elm: Element | null = $selectedTab;
+                                let index;
+                                for (index = 0; ($elm = $elm?.previousElementSibling); index++);
+
+                                if (index === 0) {
+                                    BxEvent.dispatch(window, BxEvent.XCLOUD_GUIDE_MENU_SHOWN, {where: GuideMenuTab.HOME});
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            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() {
+    const observer = new MutationObserver(mutationList => {
+        for (const mutation of mutationList) {
+            if (mutation.type !== 'childList') {
+                continue;
+            }
+
+            const $target = mutation.target as HTMLElement;
+            if ($target.id && $target.id === 'gamepass-dialog-root') {
+                observer.disconnect();
+                observeRootDialog($target);
+                break;
+            }
+        };
+    });
+    observer.observe(document.documentElement, {subtree: true, childList: true});
+}
+
+
 function main() {
+    waitForRootDialog();
+
     // Monkey patches
     patchRtcPeerConnection();
     patchRtcCodecs();
     interceptHttpRequests();
     patchVideoApi();
+    patchCanvasContext();
+    AppInterface && patchPointerLockApi();
 
-    if (getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL)) {
-        patchAudioContext();
-    }
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
+    getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
 
-    PreloadedState.override();
+    STATES.userAgent.capabilities.touch && TouchController.updateCustomList();
+    overridePreloadState();
 
     VibrationManager.initialSetup();
 
@@ -229,20 +317,26 @@ function main() {
 
     // Setup UI
     addCss();
+    preloadFonts();
     Toast.setup();
-    BX_FLAGS.PreloadUi && setupBxUi();
+    (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
+    BX_FLAGS.PreloadUi && setupStreamUi();
+    Screenshot.setup();
 
+    GuideMenu.observe();
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
-    MkbHandler.setupEvents();
+    EmulatedMkbHandler.setupEvents();
 
     Patcher.init();
 
     disablePwa();
 
     // Show a toast when connecting/disconecting controller
+    if (getPref(PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS)) {
         window.addEventListener('gamepadconnected', e => showGamepadToast(e.gamepad));
         window.addEventListener('gamepaddisconnected', e => showGamepadToast(e.gamepad));
+    }
 
     // Preload Remote Play
     if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
@@ -252,6 +346,15 @@ function main() {
     if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all') {
         TouchController.setup();
     }
+
+    // Start PointerProviderServer
+    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();
 }
 
 main();

src/macros/build.ts

@@ -4,6 +4,7 @@ import cssStr from "@assets/css/styles.styl" with { type: "text" };
 
 const generatedCss = await (stylus(cssStr, {})
 	.set('filename', 'styles.css')
+	.set('compress', true)
 	.include('src/assets/css/'))
 	.render();
 

src/modules/controller-shortcut.ts

@@ -0,0 +1,385 @@
+import { Screenshot } from "@utils/screenshot";
+import { GamepadKey } from "@enums/mkb";
+import { PrompFont } from "@enums/prompt-font";
+import { CE } from "@utils/html";
+import { t } from "@utils/translation";
+import { EmulatedMkbHandler } from "./mkb/mkb-handler";
+import { StreamStats } from "./stream/stream-stats";
+import { MicrophoneShortcut } from "./shortcuts/shortcut-microphone";
+import { StreamUiShortcut } from "./shortcuts/shortcut-stream-ui";
+import { PrefKey, getPref } from "@utils/preferences";
+import { SoundShortcut } from "./shortcuts/shortcut-sound";
+import { BxEvent } from "@/utils/bx-event";
+import { AppInterface } from "@/utils/global";
+import { BxSelectElement } from "@/web-components/bx-select";
+
+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';
+
+    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.#buttonsStatus[index] = [];
+    }
+
+    static handle(gamepad: Gamepad): boolean {
+        const gamepadIndex = gamepad.index;
+        const actions = ControllerShortcut.#ACTIONS[gamepad.id];
+        if (!actions) {
+            return false;
+        }
+
+        // Move the buttons status from the previous frame to the cache
+        ControllerShortcut.#buttonsCache[gamepadIndex] = ControllerShortcut.#buttonsStatus[gamepadIndex].slice(0);
+        // Clear the buttons status
+        ControllerShortcut.#buttonsStatus[gamepadIndex] = [];
+
+        const pressed: boolean[] = [];
+        let otherButtonPressed = false;
+
+        gamepad.buttons.forEach((button, index) => {
+            // 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]) {
+                    setTimeout(() => ControllerShortcut.#runAction(actions[index]!), 0);
+                }
+            }
+        });
+
+        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.getInstance().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 === EmulatedMkbHandler.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() {
+        const PREF_CONTROLLER_FRIENDLY_UI = getPref(PrefKey.UI_CONTROLLER_FRIENDLY);
+
+        // 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;
+        const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
+
+        const $container = CE('div', {'data-has-gamepad': 'false'},
+            CE('div', {},
+                CE('p', {class: 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')),
+            ),
+
+            $remap = CE('div', {},
+                PREF_CONTROLLER_FRIENDLY_UI ? CE('div', {'data-focus-container': 'true'}, BxSelectElement.wrap($selectProfile)) : $selectProfile,
+                CE('p', {class: 'bx-shortcut-note'},
+                    CE('span', {class: 'bx-prompt'}, PrompFont.HOME),
+                    ': ' + t('controller-shortcuts-xbox-note'),
+                ),
+            ),
+        );
+
+        $selectProfile.addEventListener('input', 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;
+
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
+                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',
+                'data-focus-container': 'true',
+            });
+
+            const $label = CE('label', {class: 'bx-prompt'}, `${PrompFont.HOME} + ${prompt}`);
+
+            const $div = CE('div', {class: 'bx-shortcut-actions'});
+
+            if (!PREF_CONTROLLER_FRIENDLY_UI) {
+                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('input', onActionChanged);
+
+            ControllerShortcut.#$selectActions[button] = $select;
+
+            if (PREF_CONTROLLER_FRIENDLY_UI) {
+                $div.appendChild(BxSelectElement.wrap($select));
+            } else {
+                $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/dialog.ts

@@ -55,7 +55,7 @@ export class Dialog {
                             }),
                     ),
                 this.$content = CE('div', {'class': 'bx-dialog-content'}, content),
-                !hideCloseButton && ($close = CE('button', {}, t('close'))),
+                !hideCloseButton && ($close = CE('button', {type: 'button'}, t('close'))),
             );
 
         $close && $close.addEventListener('click', e => {

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

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

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

@@ -0,0 +1,66 @@
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { t } from "@utils/translation";
+import { BaseGameBarAction } from "./action-base";
+import { MicrophoneShortcut, MicrophoneState } from "../shortcuts/shortcut-microphone";
+
+
+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: onClick,
+            classes: ['bx-activated'],
+        });
+
+        const $btnMuted = createButton({
+            style: ButtonStyle.GHOST,
+            icon: BxIcon.MICROPHONE_MUTED,
+            title: t('hide-touch-controller'),
+            onClick: onClick,
+        });
+
+        this.$content = CE('div', {},
+            $btnDefault,
+            $btnMuted,
+        );
+
+        this.reset();
+
+        window.addEventListener(BxEvent.MICROPHONE_STATE_CHANGED, e => {
+            const microphoneState = (e as any).microphoneState;
+            const enabled = microphoneState === MicrophoneState.ENABLED;
+
+            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 {
+        return this.$content;
+    }
+
+    reset(): void {
+        this.visible = false;
+        this.$content.classList.add('bx-gone');
+        this.$content.setAttribute('data-enabled', 'false');
+    }
+}

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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,54 @@
+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/game-bar.ts

@@ -0,0 +1,148 @@
+import { CE, createSvgIcon } from "@utils/html";
+import { ScreenshotAction } from "./action-screenshot";
+import { TouchControlAction } from "./action-touch-control";
+import { BxEvent } from "@utils/bx-event";
+import { BxIcon } from "@utils/bx-icon";
+import type { BaseGameBarAction } from "./action-base";
+import { STATES } from "@utils/global";
+import { PrefKey, getPref } from "@utils/preferences";
+import { MicrophoneAction } from "./action-microphone";
+
+
+export class GameBar {
+    private static instance: GameBar;
+
+    public static getInstance(): GameBar {
+        if (!GameBar.instance) {
+            GameBar.instance = new GameBar();
+        }
+
+        return GameBar.instance;
+    }
+
+    private static readonly VISIBLE_DURATION = 2000;
+
+    private $gameBar: HTMLElement;
+    private $container: HTMLElement;
+
+    private timeout: number | null = null;
+
+    private actions: BaseGameBarAction[] = [];
+
+    private constructor() {
+        let $container;
+
+        const position = getPref(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'}),
+                createSvgIcon(position === 'bottom-left' ? BxIcon.CARET_RIGHT : BxIcon.CARET_LEFT),
+            );
+
+        this.actions = [
+            new ScreenshotAction(),
+            ...(STATES.userAgent.capabilities.touch && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off') ? [new TouchControlAction()] : []),
+            new MicrophoneAction(),
+        ];
+
+        // Reverse the action list if Game Bar's position is on the right side
+        if (position === 'bottom-right') {
+            this.actions.reverse();
+        }
+
+        // Render actions
+        for (const action of this.actions) {
+            $container.appendChild(action.render());
+        }
+
+        // Toggle game bar when clicking on the game bar box
+        $gameBar.addEventListener('click', e => {
+            if (e.target !== $gameBar) {
+                return;
+            }
+
+            $container.classList.contains('bx-show') ? this.hideBar() : this.showBar();
+        });
+
+        // Hide game bar after clicking on an action
+        window.addEventListener(BxEvent.GAME_BAR_ACTION_ACTIVATED, this.hideBar.bind(this));
+
+        $container.addEventListener('pointerover', this.clearHideTimeout.bind(this));
+        $container.addEventListener('pointerout', this.beginHideTimeout.bind(this));
+
+        // Add animation when hiding game bar
+        $container.addEventListener('transitionend', e => {
+            const classList = $container.classList;
+            if (classList.contains('bx-hide')) {
+                classList.remove('bx-offscreen', 'bx-hide');
+                classList.add('bx-offscreen');
+            }
+        });
+
+        document.documentElement.appendChild($gameBar);
+        this.$gameBar = $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) => {
+            if (!STATES.isPlaying) {
+                this.disable();
+                return;
+            }
+
+            // Toggle Game bar
+            const mode = (e as any).mode;
+            mode !== 'None' ? this.disable() : this.enable();
+        }).bind(this));
+    }
+
+    private beginHideTimeout() {
+        this.clearHideTimeout();
+
+        this.timeout = window.setTimeout(() => {
+                this.timeout = null;
+                this.hideBar();
+            }, GameBar.VISIBLE_DURATION);
+    }
+
+    private clearHideTimeout() {
+        this.timeout && clearTimeout(this.timeout);
+        this.timeout = null;
+    }
+
+    enable() {
+        this.$gameBar && this.$gameBar.classList.remove('bx-gone');
+    }
+
+    disable() {
+        this.hideBar();
+        this.$gameBar && this.$gameBar.classList.add('bx-gone');
+    }
+
+    showBar() {
+        if (!this.$container) {
+            return;
+        }
+
+        this.$container.classList.remove('bx-offscreen', 'bx-hide');
+        this.$container.classList.add('bx-show');
+
+        this.beginHideTimeout();
+    }
+
+    hideBar() {
+        if (!this.$container) {
+            return;
+        }
+
+        this.$container.classList.remove('bx-show');
+        this.$container.classList.add('bx-hide');
+    }
+
+    // Reset all states
+    reset() {
+        for (const action of this.actions) {
+            action.reset();
+        }
+    }
+}

src/modules/loading-screen.ts

@@ -46,6 +46,10 @@ export class LoadingScreen {
 #game-stream div[class*=RocketAnimation-module__container] > svg {
     display: none;
 }
+
+#game-stream video[class*=RocketAnimationVideo-module__video] {
+    display: none;
+}
 `;
         $bgStyle.textContent += css;
     }
@@ -105,7 +109,7 @@ export class LoadingScreen {
 
         let $waitTimeBox = LoadingScreen.#$waitTimeBox;
         if (!$waitTimeBox) {
-            $waitTimeBox = CE<HTMLElement>('div', {'class': 'bx-wait-time-box'},
+            $waitTimeBox = CE('div', {'class': 'bx-wait-time-box'},
                                     CE('label', {}, t('server')),
                                     CE('span', {}, getPreferredServerRegion()),
                                     CE('label', {}, t('wait-time-estimated')),
@@ -159,13 +163,13 @@ export class LoadingScreen {
 `;
         }
 
-        LoadingScreen.reset();
+        setTimeout(LoadingScreen.reset, 2000);
     }
 
     static reset() {
-        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
         LoadingScreen.#$bgStyle && (LoadingScreen.#$bgStyle.textContent = '');
 
+        LoadingScreen.#$waitTimeBox && LoadingScreen.#$waitTimeBox.classList.add('bx-gone');
         LoadingScreen.#waitTimeInterval && clearInterval(LoadingScreen.#waitTimeInterval);
         LoadingScreen.#waitTimeInterval = null;
     }

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

@@ -0,0 +1,23 @@
+export abstract class MouseDataProvider {
+    protected mkbHandler: MkbHandler;
+    constructor(handler: MkbHandler) {
+        this.mkbHandler = handler;
+    }
+
+    abstract init(): void;
+    abstract start(): void;
+    abstract stop(): void;
+    abstract destroy(): void;
+}
+
+export abstract class MkbHandler {
+    abstract init(): void;
+    abstract start(): void;
+    abstract stop(): void;
+    abstract destroy(): void;
+    abstract handleMouseMove(data: MkbMouseMove): void;
+    abstract handleMouseClick(data: MkbMouseClick): void;
+    abstract handleMouseWheel(data: MkbMouseWheel): boolean;
+    abstract waitForMouseData(enabled: boolean): void;
+    abstract isEnabled(): boolean;
+}

src/modules/mkb/definitions.ts

@@ -1,103 +0,0 @@
-import type { GamepadKeyNameType } from "@/types/mkb";
-
-export enum GamepadKey {
-    A = 0,
-    B = 1,
-    X = 2,
-    Y = 3,
-    LB = 4,
-    RB = 5,
-    LT = 6,
-    RT = 7,
-    SELECT = 8,
-    START = 9,
-    L3 = 10,
-    R3 = 11,
-    UP = 12,
-    DOWN = 13,
-    LEFT = 14,
-    RIGHT = 15,
-    HOME = 16,
-
-    LS_UP = 100,
-    LS_DOWN = 101,
-    LS_LEFT = 102,
-    LS_RIGHT = 103,
-
-    RS_UP = 200,
-    RS_DOWN = 201,
-    RS_LEFT = 202,
-    RS_RIGHT = 203,
-};
-
-
-export const GamepadKeyName: GamepadKeyNameType = {
-    [GamepadKey.A]: ['A', '⇓'],
-    [GamepadKey.B]: ['B', '⇒'],
-    [GamepadKey.X]: ['X', '⇐'],
-    [GamepadKey.Y]: ['Y', '⇑'],
-
-    [GamepadKey.LB]: ['LB', '↘'],
-    [GamepadKey.RB]: ['RB', '↙'],
-    [GamepadKey.LT]: ['LT', '↖'],
-    [GamepadKey.RT]: ['RT', '↗'],
-
-    [GamepadKey.SELECT]: ['Select', '⇺'],
-    [GamepadKey.START]: ['Start', '⇻'],
-    [GamepadKey.HOME]: ['Home', ''],
-
-    [GamepadKey.UP]: ['D-Pad Up', '≻'],
-    [GamepadKey.DOWN]: ['D-Pad Down', '≽'],
-    [GamepadKey.LEFT]: ['D-Pad Left', '≺'],
-    [GamepadKey.RIGHT]: ['D-Pad Right', '≼'],
-
-    [GamepadKey.L3]: ['L3', '↺'],
-    [GamepadKey.LS_UP]: ['Left Stick Up', '↾'],
-    [GamepadKey.LS_DOWN]: ['Left Stick Down', '⇂'],
-    [GamepadKey.LS_LEFT]: ['Left Stick Left', '↼'],
-    [GamepadKey.LS_RIGHT]: ['Left Stick Right', '⇀'],
-
-    [GamepadKey.R3]: ['R3', '↻'],
-    [GamepadKey.RS_UP]: ['Right Stick Up', '↿'],
-    [GamepadKey.RS_DOWN]: ['Right Stick Down', '⇃'],
-    [GamepadKey.RS_LEFT]: ['Right Stick Left', '↽'],
-    [GamepadKey.RS_RIGHT]: ['Right Stick Right', '⇁'],
-};
-
-
-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',
-
-    MOUSE_STICK_DECAY_STRENGTH = 'stick_decay_strength',
-    MOUSE_STICK_DECAY_MIN = 'stick_decay_min',
-}

src/modules/mkb/key-helper.ts

@@ -1,4 +1,4 @@
-import { MouseButtonCode, WheelCode } from "./definitions";
+import { MouseButtonCode, WheelCode } from "@enums/mkb";
 
 export class KeyHelper {
     static #NON_PRINTABLE_KEYS = {
@@ -20,7 +20,7 @@ export class KeyHelper {
         let name;
 
         if (e instanceof KeyboardEvent) {
-            code = e.code;
+            code = e.code || e.key;
         } else if (e instanceof WheelEvent) {
             if (e.deltaY < 0) {
                 code = WheelCode.SCROLL_UP;
@@ -28,7 +28,7 @@ export class KeyHelper {
                 code = WheelCode.SCROLL_DOWN;
             } else if (e.deltaX < 0) {
                 code = WheelCode.SCROLL_LEFT;
-            } else {
+            } else if (e.deltaX > 0) {
                 code = WheelCode.SCROLL_RIGHT;
             }
         } else if (e instanceof MouseEvent) {

src/modules/mkb/mkb-handler.ts

@@ -1,5 +1,5 @@
 import { MkbPreset } from "./mkb-preset";
-import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo } from "./definitions";
+import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo, WheelCode } from "@enums/mkb";
 import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BxEvent } from "@utils/bx-event";
 import { PrefKey, getPref } from "@utils/preferences";
@@ -8,39 +8,136 @@ import { t } from "@utils/translation";
 import { LocalDb } from "@utils/local-db";
 import { KeyHelper } from "./key-helper";
 import type { MkbStoredPreset } from "@/types/mkb";
-import { showStreamSettings } from "@modules/stream/stream-ui";
-import { STATES } from "@utils/global";
+import { AppInterface, STATES } from "@utils/global";
 import { UserAgent } from "@utils/user-agent";
 import { BxLogger } from "@utils/bx-logger";
-import { BxIcon } from "@utils/bx-icon";
+import { PointerClient } from "./pointer-client";
+import { NativeMkbHandler } from "./native-mkb-handler";
+import { MkbHandler, MouseDataProvider } from "./base-mkb-handler";
+import { StreamSettings } from "../stream/stream-settings";
 
 const LOG_TAG = 'MkbHandler';
 
+const PointerToMouseButton = {
+    1: 0,
+    2: 2,
+    4: 1,
+}
+
+
+class WebSocketMouseDataProvider extends MouseDataProvider {
+    #pointerClient: PointerClient | undefined
+    #connected = false
+
+    init(): void {
+        this.#pointerClient = PointerClient.getInstance();
+        this.#connected = false;
+        try {
+            this.#pointerClient.start(STATES.pointerServerPort, this.mkbHandler);
+            this.#connected = true;
+        } catch (e) {
+            Toast.show('Cannot enable Mouse & Keyboard feature');
+        }
+    }
+
+    start(): void {
+        this.#connected && AppInterface.requestPointerCapture();
+    }
+
+    stop(): void {
+        this.#connected && AppInterface.releasePointerCapture();
+    }
+
+    destroy(): void {
+        this.#connected && this.#pointerClient?.stop();
+    }
+}
+
+class PointerLockMouseDataProvider extends MouseDataProvider {
+    init(): void {}
+
+    start(): void {
+        window.addEventListener('mousemove', this.#onMouseMoveEvent);
+        window.addEventListener('mousedown', this.#onMouseEvent);
+        window.addEventListener('mouseup', this.#onMouseEvent);
+        window.addEventListener('wheel', this.#onWheelEvent, {passive: false});
+        window.addEventListener('contextmenu', this.#disableContextMenu);
+    }
+
+    stop(): void {
+        document.pointerLockElement && document.exitPointerLock();
+
+        window.removeEventListener('mousemove', this.#onMouseMoveEvent);
+        window.removeEventListener('mousedown', this.#onMouseEvent);
+        window.removeEventListener('mouseup', this.#onMouseEvent);
+        window.removeEventListener('wheel', this.#onWheelEvent);
+        window.removeEventListener('contextmenu', this.#disableContextMenu);
+    }
+
+    destroy(): void {}
+
+    #onMouseMoveEvent = (e: MouseEvent) => {
+        this.mkbHandler.handleMouseMove({
+            movementX: e.movementX,
+            movementY: e.movementY,
+        });
+    }
+
+    #onMouseEvent = (e: MouseEvent) => {
+        e.preventDefault();
+
+        const isMouseDown = e.type === 'mousedown';
+        const data: MkbMouseClick = {
+            mouseButton: e.button,
+            pressed: isMouseDown,
+        };
+
+        this.mkbHandler.handleMouseClick(data);
+    }
+
+    #onWheelEvent = (e: WheelEvent) => {
+        const key = KeyHelper.getKeyFromEvent(e);
+        if (!key) {
+            return;
+        }
+
+        const data: MkbMouseWheel = {
+            vertical: e.deltaY,
+            horizontal: e.deltaX,
+        };
+
+        if (this.mkbHandler.handleMouseWheel(data)) {
+            e.preventDefault();
+        }
+    }
+
+    #disableContextMenu = (e: Event) => e.preventDefault();
+}
+
 /*
 This class uses some code from Yuzu emulator to handle mouse's movements
 Source: https://github.com/yuzu-emu/yuzu-mainline/blob/master/src/input_common/drivers/mouse.cpp
 */
-export class MkbHandler {
-    static #instance: MkbHandler;
-    static get INSTANCE() {
-        if (!MkbHandler.#instance) {
-            MkbHandler.#instance = new MkbHandler();
+export class EmulatedMkbHandler extends MkbHandler {
+    static #instance: EmulatedMkbHandler;
+    public static getInstance(): EmulatedMkbHandler {
+        if (!EmulatedMkbHandler.#instance) {
+            EmulatedMkbHandler.#instance = new EmulatedMkbHandler();
         }
 
-        return MkbHandler.#instance;
+        return EmulatedMkbHandler.#instance;
     }
 
     #CURRENT_PRESET_DATA = MkbPreset.convert(MkbPreset.DEFAULT_PRESET);
 
     static readonly DEFAULT_PANNING_SENSITIVITY = 0.0010;
-    static readonly DEFAULT_STICK_SENSITIVITY = 0.0006;
     static readonly DEFAULT_DEADZONE_COUNTERWEIGHT = 0.01;
     static readonly MAXIMUM_STICK_RANGE = 1.1;
 
     static VIRTUAL_GAMEPAD_ID = 'Xbox 360 Controller';
 
     #VIRTUAL_GAMEPAD = {
-            id: MkbHandler.VIRTUAL_GAMEPAD_ID,
+            id: EmulatedMkbHandler.VIRTUAL_GAMEPAD_ID,
             index: 3,
             connected: false,
             hapticActuators: null,
@@ -55,16 +152,18 @@ export class MkbHandler {
     #nativeGetGamepads = window.navigator.getGamepads.bind(window.navigator);
 
     #enabled = false;
+    #mouseDataProvider: MouseDataProvider | undefined;
     #isPolling = false;
 
     #prevWheelCode = null;
     #wheelStoppedTimeout?: number | null;
 
     #detectMouseStoppedTimeout?: number | null;
-    #allowStickDecaying = false;
 
     #$message?: HTMLElement;
 
+    #escKeyDownTime: number = -1;
+
     #STICK_MAP: {[key in GamepadKey]?: [GamepadKey[], number, number]};
     #LEFT_STICK_X: GamepadKey[] = [];
     #LEFT_STICK_Y: GamepadKey[] = [];
@@ -72,6 +171,8 @@ export class MkbHandler {
     #RIGHT_STICK_Y: GamepadKey[] = [];
 
     constructor() {
+        super();
+
         this.#STICK_MAP = {
             [GamepadKey.LS_LEFT]: [this.#LEFT_STICK_X, 0, -1],
             [GamepadKey.LS_RIGHT]: [this.#LEFT_STICK_X, 0, 1],
@@ -85,6 +186,8 @@ export class MkbHandler {
         };
     }
 
+    isEnabled = () => this.#enabled;
+
     #patchedGetGamepads = () => {
         const gamepads = this.#nativeGetGamepads() || [];
         (gamepads as any)[this.#VIRTUAL_GAMEPAD.index] = this.#VIRTUAL_GAMEPAD;
@@ -102,6 +205,7 @@ export class MkbHandler {
         virtualGamepad.timestamp = performance.now();
     }
 
+    /*
     #getStickAxes(stick: GamepadStick) {
         const virtualGamepad = this.#getVirtualGamepad();
         return {
@@ -109,11 +213,10 @@ export class MkbHandler {
             y: virtualGamepad.axes[stick * 2 + 1],
         };
     }
+    */
 
     #vectorLength = (x: number, y: number): number => Math.sqrt(x ** 2 + y ** 2);
 
-    #disableContextMenu = (e: Event) => e.preventDefault();
-
     #resetGamepad = () => {
         const gamepad = this.#getVirtualGamepad();
 
@@ -167,19 +270,37 @@ export class MkbHandler {
         const isKeyDown = e.type === 'keydown';
 
         // Toggle MKB feature
-        if (isKeyDown) {
         if (e.code === 'F8') {
+            if (!isKeyDown) {
                 e.preventDefault();
                 this.toggle();
+            }
+
+            return;
+        }
+
+        // Hijack the Esc button
+        if (e.code === 'Escape') {
+            e.preventDefault();
+
+            // Hold the Esc for 1 second to disable MKB
+            if (this.#enabled && isKeyDown) {
+                if (this.#escKeyDownTime === -1) {
+                    this.#escKeyDownTime = performance.now();
+                } else if (performance.now() - this.#escKeyDownTime >= 1000) {
+                    this.stop();
+                }
+            } else {
+                this.#escKeyDownTime = -1;
+            }
             return;
         }
 
         if (!this.#isPolling) {
             return;
         }
-        }
 
-        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[e.code]!;
+        const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[e.code || e.key]!;
         if (typeof buttonIndex === 'undefined') {
             return;
         }
@@ -193,10 +314,30 @@ export class MkbHandler {
         this.#pressButton(buttonIndex, isKeyDown);
     }
 
-    #onMouseEvent = (e: MouseEvent) => {
-        const isMouseDown = e.type === 'mousedown';
-        const key = KeyHelper.getKeyFromEvent(e);
-        if (!key) {
+    #onMouseStopped = () => {
+        // Reset stick position
+        this.#detectMouseStoppedTimeout = null;
+
+        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
+        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
+        this.#updateStick(analog, 0, 0);
+    }
+
+    handleMouseClick = (data: MkbMouseClick) => {
+        let mouseButton;
+        if (typeof data.mouseButton !== 'undefined') {
+            mouseButton = data.mouseButton;
+        } else if (typeof data.pointerButton !== 'undefined') {
+            mouseButton = PointerToMouseButton[data.pointerButton as keyof typeof PointerToMouseButton];
+        }
+
+        const keyCode = 'Mouse' + mouseButton;
+        const key = {
+            code: keyCode,
+            name: KeyHelper.codeToKeyName(keyCode),
+        };
+
+        if (!key.name) {
             return;
         }
 
@@ -205,23 +346,64 @@ export class MkbHandler {
             return;
         }
 
-        e.preventDefault();
-        this.#pressButton(buttonIndex, isMouseDown);
+        this.#pressButton(buttonIndex, data.pressed);
     }
 
-    #onWheelEvent = (e: WheelEvent) => {
-        const key = KeyHelper.getKeyFromEvent(e);
-        if (!key) {
+    handleMouseMove = (data: MkbMouseMove) => {
+        // TODO: optimize this
+        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
+        if (mouseMapTo === MouseMapTo.OFF) {
+            // Ignore mouse movements
             return;
         }
 
+        this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
+        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 50);
+
+        const deadzoneCounterweight = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT];
+
+        let x = data.movementX * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_X];
+        let y = data.movementY * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y];
+
+        let length = this.#vectorLength(x, y);
+        if (length !== 0 && length < deadzoneCounterweight) {
+            x *= deadzoneCounterweight / length;
+            y *= deadzoneCounterweight / length;
+        } else if (length > EmulatedMkbHandler.MAXIMUM_STICK_RANGE) {
+            x *= EmulatedMkbHandler.MAXIMUM_STICK_RANGE / length;
+            y *= EmulatedMkbHandler.MAXIMUM_STICK_RANGE / length;
+        }
+
+        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
+        this.#updateStick(analog, x, y);
+    }
+
+    handleMouseWheel = (data: MkbMouseWheel): boolean => {
+        let code = '';
+        if (data.vertical < 0) {
+            code = WheelCode.SCROLL_UP;
+        } else if (data.vertical > 0) {
+            code = WheelCode.SCROLL_DOWN;
+        } else if (data.horizontal < 0) {
+            code = WheelCode.SCROLL_LEFT;
+        } else if (data.horizontal > 0) {
+            code = WheelCode.SCROLL_RIGHT;
+        }
+
+        if (!code) {
+            return false;
+        }
+
+        const key = {
+            code: code,
+            name: KeyHelper.codeToKeyName(code),
+        };
+
         const buttonIndex = this.#CURRENT_PRESET_DATA.mapping[key.code]!;
         if (typeof buttonIndex === 'undefined') {
-            return;
+            return false;
         }
 
-        e.preventDefault();
-
         if (this.#prevWheelCode === null || this.#prevWheelCode === key.code) {
             this.#wheelStoppedTimeout && clearTimeout(this.#wheelStoppedTimeout);
             this.#pressButton(buttonIndex, true);
@@ -231,93 +413,20 @@ export class MkbHandler {
             this.#prevWheelCode = null;
             this.#pressButton(buttonIndex, false);
         }, 20);
+
+        return true;
     }
 
-    #decayStick = () => {
-        if (!this.#allowStickDecaying) {
-            return;
-        }
-
-        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
-        if (mouseMapTo === MouseMapTo.OFF) {
-            return;
-        }
-
-        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
-
-        let { x, y } = this.#getStickAxes(analog);
-        const length = this.#vectorLength(x, y);
-
-        const clampedLength = Math.min(1.0, length);
-        const decayStrength = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH];
-        const decay = 1 - clampedLength * clampedLength * decayStrength;
-        const minDecay = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_STICK_DECAY_MIN];
-        const clampedDecay = Math.min(1 - minDecay, decay);
-
-        x *= clampedDecay;
-        y *= clampedDecay;
-
-        const deadzoneCounterweight = 20 * MkbHandler.DEFAULT_DEADZONE_COUNTERWEIGHT;
-        if (Math.abs(x) <= deadzoneCounterweight && Math.abs(y) <= deadzoneCounterweight) {
-            x = 0;
-            y = 0;
-        }
-
-        if (this.#allowStickDecaying) {
-            this.#updateStick(analog, x, y);
-
-            (x !== 0 || y !== 0) && requestAnimationFrame(this.#decayStick);
-        }
-    }
-
-    #onMouseStopped = () => {
-        this.#allowStickDecaying = true;
-        requestAnimationFrame(this.#decayStick);
-    }
-
-    #onMouseMoveEvent = (e: MouseEvent) => {
-        // TODO: optimize this
-        const mouseMapTo = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_MAP_TO];
-        if (mouseMapTo === MouseMapTo.OFF) {
-            // Ignore mouse movements
-            return;
-        }
-
-        this.#allowStickDecaying = false;
-        this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
-        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 100);
-
-        const deltaX = e.movementX;
-        const deltaY = e.movementY;
-
-        const deadzoneCounterweight = this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT];
-
-        let x = deltaX * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_X];
-        let y = deltaY * this.#CURRENT_PRESET_DATA.mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y];
-
-        let length = this.#vectorLength(x, y);
-        if (length !== 0 && length < deadzoneCounterweight) {
-            x *= deadzoneCounterweight / length;
-            y *= deadzoneCounterweight / length;
-        } else if (length > MkbHandler.MAXIMUM_STICK_RANGE) {
-            x *= MkbHandler.MAXIMUM_STICK_RANGE / length;
-            y *= MkbHandler.MAXIMUM_STICK_RANGE / length;
-        }
-
-        const analog = mouseMapTo === MouseMapTo.LS ? GamepadStick.LEFT : GamepadStick.RIGHT;
-        this.#updateStick(analog, x, y);
-    }
-
-    toggle = () => {
+    toggle = (force?: boolean) => {
+        if (typeof force !== 'undefined') {
+            this.#enabled = force;
+        } else {
             this.#enabled = !this.#enabled;
-        this.#enabled ? document.pointerLockElement && this.start() : this.stop();
-
-        Toast.show(t('mouse-and-keyboard'), t(this.#enabled ? 'enabled' : 'disabled'), {instant: true});
+        }
 
         if (this.#enabled) {
-            !document.pointerLockElement && this.#waitForPointerLock(true);
+            document.body.requestPointerLock();
         } else {
-            this.#waitForPointerLock(false);
             document.pointerLockElement && document.exitPointerLock();
         }
     }
@@ -338,10 +447,84 @@ export class MkbHandler {
         });
     }
 
+    waitForMouseData = (wait: boolean) => {
+        this.#$message && this.#$message.classList.toggle('bx-gone', !wait);
+    }
+
+    #onPollingModeChanged = (e: Event) => {
+        if (!this.#$message) {
+            return;
+        }
+
+        const mode = (e as any).mode;
+        if (mode === 'None') {
+            this.#$message.classList.remove('bx-offscreen');
+        } else {
+            this.#$message.classList.add('bx-offscreen');
+        }
+    }
+
+    #onDialogShown = () => {
+        document.pointerLockElement && document.exitPointerLock();
+    }
+
+    #initMessage = () => {
+        if (!this.#$message) {
+            this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
+                CE('div', {},
+                    CE('p', {}, t('virtual-controller')),
+                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
+                ),
+
+                CE('div', {'data-type': 'virtual'},
+                    createButton({
+                        style: ButtonStyle.PRIMARY | ButtonStyle.TALL | ButtonStyle.FULL_WIDTH,
+                        label: t('activate'),
+                        onClick: ((e: Event) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.toggle(true);
+                        }).bind(this),
+                    }),
+
+                    CE('div', {},
+                        createButton({
+                            label: t('ignore'),
+                            style: ButtonStyle.GHOST,
+                            onClick: e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                this.toggle(false);
+                                this.waitForMouseData(false);
+                            },
+                        }),
+
+                        createButton({
+                            label: t('edit'),
+                            onClick: e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                StreamSettings.getInstance().show('mkb');
+                            },
+                        }),
+                    ),
+                ),
+            );
+        }
+
+        if (!this.#$message.isConnected) {
+            document.documentElement.appendChild(this.#$message);
+        }
+    }
+
     #onPointerLockChange = () => {
-        if (this.#enabled && !document.pointerLockElement) {
+        if (document.pointerLockElement) {
+            this.start();
+        } else {
             this.stop();
-            this.#waitForPointerLock(true);
         }
     }
 
@@ -350,60 +533,60 @@ export class MkbHandler {
         this.stop();
     }
 
-    #onActivatePointerLock = () => {
-        if (!document.pointerLockElement) {
-            document.body.requestPointerLock();
-        }
-
-        this.#waitForPointerLock(false);
+    #onPointerLockRequested = () => {
         this.start();
     }
 
-    #waitForPointerLock = (wait: boolean) => {
-        this.#$message && this.#$message.classList.toggle('bx-gone', !wait);
+    #onPointerLockExited = () => {
+        this.#mouseDataProvider?.stop();
     }
 
-    #onStreamMenuShown = () => {
-        this.#enabled && this.#waitForPointerLock(false);
+    handleEvent(event: Event) {
+        switch (event.type) {
+            case BxEvent.POINTER_LOCK_REQUESTED:
+                this.#onPointerLockRequested();
+                break;
+            case BxEvent.POINTER_LOCK_EXITED:
+                this.#onPointerLockExited();
+                break;
         }
-
-    #onStreamMenuHidden = () => {
-        this.#enabled && this.#waitForPointerLock(true);
     }
 
     init = () => {
         this.refreshPresetData();
-        this.#enabled = true;
+        this.#enabled = false;
+
+        if (AppInterface) {
+            this.#mouseDataProvider = new WebSocketMouseDataProvider(this);
+        } else {
+            this.#mouseDataProvider = new PointerLockMouseDataProvider(this);
+        }
+        this.#mouseDataProvider.init();
 
         window.addEventListener('keydown', this.#onKeyboardEvent);
+        window.addEventListener('keyup', this.#onKeyboardEvent);
 
+        window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
+        window.addEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this.#onDialogShown);
+
+        if (AppInterface) {
+            // Android app doesn't support PointerLock API so we need to use a different method
+            window.addEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+            window.addEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        } else {
             document.addEventListener('pointerlockchange', this.#onPointerLockChange);
             document.addEventListener('pointerlockerror', this.#onPointerLockError);
+        }
 
-        this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
-                createButton({
-                    icon: BxIcon.MOUSE_SETTINGS,
-                    style: ButtonStyle.PRIMARY,
-                    onClick: e => {
-                        e.preventDefault();
-                        e.stopPropagation();
+        this.#initMessage();
+        this.#$message?.classList.add('bx-gone');
 
-                        showStreamSettings('mkb');
-                    },
-                }),
-                CE('div', {},
-                    CE('p', {}, t('mkb-click-to-activate')),
-                    CE('p', {}, t<any>('press-key-to-toggle-mkb')({key: 'F8'})),
-                ),
-            );
-
-        this.#$message.addEventListener('click', this.#onActivatePointerLock);
-        document.documentElement.appendChild(this.#$message);
-
-        window.addEventListener(BxEvent.STREAM_MENU_SHOWN, this.#onStreamMenuShown);
-        window.addEventListener(BxEvent.STREAM_MENU_HIDDEN, this.#onStreamMenuHidden);
-
-        this.#waitForPointerLock(true);
+        if (AppInterface) {
+            Toast.show(t('press-key-to-toggle-mkb', {key: `<b>F8</b>`}), t('virtual-controller'), {html: true});
+            this.waitForMouseData(false);
+        } else {
+            this.waitForMouseData(true);
+        }
     }
 
     destroy = () => {
@@ -411,31 +594,43 @@ export class MkbHandler {
         this.#enabled = false;
         this.stop();
 
-        this.#waitForPointerLock(false);
+        this.waitForMouseData(false);
         document.pointerLockElement && document.exitPointerLock();
 
         window.removeEventListener('keydown', this.#onKeyboardEvent);
+        window.removeEventListener('keyup', this.#onKeyboardEvent);
 
+        if (AppInterface) {
+            window.removeEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+            window.removeEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        } else {
             document.removeEventListener('pointerlockchange', this.#onPointerLockChange);
             document.removeEventListener('pointerlockerror', this.#onPointerLockError);
+        }
 
-        window.removeEventListener(BxEvent.STREAM_MENU_SHOWN, this.#onStreamMenuShown);
-        window.removeEventListener(BxEvent.STREAM_MENU_HIDDEN, this.#onStreamMenuHidden);
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
+        window.removeEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this.#onDialogShown);
+
+        this.#mouseDataProvider?.destroy();
+
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this.#onPollingModeChanged);
     }
 
     start = () => {
+        if (!this.#enabled) {
+            this.#enabled = true;
+            Toast.show(t('virtual-controller'), t('enabled'), {instant: true});
+        }
+
         this.#isPolling = true;
-        window.navigator.getGamepads = this.#patchedGetGamepads;
+        this.#escKeyDownTime = -1;
 
         this.#resetGamepad();
+        window.navigator.getGamepads = this.#patchedGetGamepads;
 
-        window.addEventListener('keyup', this.#onKeyboardEvent);
+        this.waitForMouseData(false);
 
-        window.addEventListener('mousemove', this.#onMouseMoveEvent);
-        window.addEventListener('mousedown', this.#onMouseEvent);
-        window.addEventListener('mouseup', this.#onMouseEvent);
-        window.addEventListener('wheel', this.#onWheelEvent);
-        window.addEventListener('contextmenu', this.#disableContextMenu);
+        this.#mouseDataProvider?.start();
 
         // Dispatch "gamepadconnected" event
         const virtualGamepad = this.#getVirtualGamepad();
@@ -445,13 +640,22 @@ export class MkbHandler {
         BxEvent.dispatch(window, 'gamepadconnected', {
                 gamepad: virtualGamepad,
             });
+
+        window.BX_EXPOSED.stopTakRendering = true;
+
+        Toast.show(t('virtual-controller'), t('enabled'), {instant: true});
     }
 
     stop = () => {
+        this.#enabled = false;
         this.#isPolling = false;
+        this.#escKeyDownTime = -1;
 
-        // Dispatch "gamepaddisconnected" event
         const virtualGamepad = this.#getVirtualGamepad();
+        if (virtualGamepad.connected) {
+            // Dispatch "gamepaddisconnected" event
+            this.#resetGamepad();
+
             virtualGamepad.connected = false;
             virtualGamepad.timestamp = performance.now();
 
@@ -460,24 +664,24 @@ export class MkbHandler {
                 });
 
             window.navigator.getGamepads = this.#nativeGetGamepads;
+        }
 
-        this.#resetGamepad();
+        this.waitForMouseData(true);
+        this.#mouseDataProvider?.stop();
 
-        window.removeEventListener('keyup', this.#onKeyboardEvent);
-
-        window.removeEventListener('mousemove', this.#onMouseMoveEvent);
-        window.removeEventListener('mousedown', this.#onMouseEvent);
-        window.removeEventListener('mouseup', this.#onMouseEvent);
-        window.removeEventListener('wheel', this.#onWheelEvent);
-        window.removeEventListener('contextmenu', this.#disableContextMenu);
+        // Toast.show(t('virtual-controller'), t('disabled'), {instant: true});
     }
 
     static setupEvents() {
-        getPref(PrefKey.MKB_ENABLED) && !UserAgent.isMobile() && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
-            // Enable MKB
-            if (!STATES.currentStream.titleInfo?.details.hasMkbSupport) {
+        window.addEventListener(BxEvent.STREAM_PLAYING, () => {
+            if (STATES.currentStream.titleInfo?.details.hasMkbSupport) {
+                // Enable native MKB in Android app
+                if (AppInterface && getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on') {
+                    AppInterface && NativeMkbHandler.getInstance().init();
+                }
+            } else if (getPref(PrefKey.MKB_ENABLED) && (AppInterface || !UserAgent.isMobile())) {
                     BxLogger.info(LOG_TAG, 'Emulate MKB');
-                MkbHandler.INSTANCE.init();
+                    EmulatedMkbHandler.getInstance().init();
             }
         });
     }

src/modules/mkb/mkb-preset.ts

@@ -1,7 +1,7 @@
 import { t } from "@utils/translation";
 import { SettingElementType } from "@utils/settings";
-import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "./definitions";
-import { MkbHandler } from "./mkb-handler";
+import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "@enums/mkb";
+import { EmulatedMkbHandler } from "./mkb-handler";
 import type { MkbPresetData, MkbConvertedPresetData } from "@/types/mkb";
 import type { PreferenceSettings } from "@/types/preferences";
 
@@ -24,11 +24,11 @@ export class MkbPreset {
             type: SettingElementType.NUMBER_STEPPER,
             default: 50,
             min: 1,
-            max: 200,
+            max: 300,
 
             params: {
                 suffix: '%',
-                exactTicks: 20,
+                exactTicks: 50,
             },
         },
 
@@ -37,11 +37,11 @@ export class MkbPreset {
             type: SettingElementType.NUMBER_STEPPER,
             default: 50,
             min: 1,
-            max: 200,
+            max: 300,
 
             params: {
                 suffix: '%',
-                exactTicks: 20,
+                exactTicks: 50,
             },
         },
 
@@ -50,38 +50,13 @@ export class MkbPreset {
             type: SettingElementType.NUMBER_STEPPER,
             default: 20,
             min: 1,
-            max: 100,
+            max: 50,
 
             params: {
                 suffix: '%',
                 exactTicks: 10,
             },
         },
-
-        [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: {
-            label: t('stick-decay-strength'),
-            type: SettingElementType.NUMBER_STEPPER,
-            default: 100,
-            min: 10,
-            max: 100,
-
-            params: {
-                suffix: '%',
-                exactTicks: 10,
-            },
-        },
-
-        [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: {
-            label: t('stick-decay-minimum'),
-            type: SettingElementType.NUMBER_STEPPER,
-            default: 10,
-            min: 1,
-            max: 10,
-
-            params: {
-                suffix: '%',
-            },
-        },
     };
 
     static DEFAULT_PRESET: MkbPresetData = {
@@ -124,11 +99,9 @@ export class MkbPreset {
 
         'mouse': {
             [MkbPresetKey.MOUSE_MAP_TO]: MouseMapTo[MouseMapTo.RS],
-            [MkbPresetKey.MOUSE_SENSITIVITY_X]: 50,
-            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 50,
+            [MkbPresetKey.MOUSE_SENSITIVITY_X]: 100,
+            [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 100,
             [MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT]: 20,
-            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 18,
-            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 6,
         },
     };
 
@@ -146,11 +119,9 @@ export class MkbPreset {
 
         // Pre-calculate mouse's sensitivities
         const mouse = obj.mouse;
-        mouse[MkbPresetKey.MOUSE_SENSITIVITY_X] *= MkbHandler.DEFAULT_PANNING_SENSITIVITY;
-        mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y] *= MkbHandler.DEFAULT_PANNING_SENSITIVITY;
-        mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT] *= MkbHandler.DEFAULT_DEADZONE_COUNTERWEIGHT;
-        mouse[MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH] *= 0.01;
-        mouse[MkbPresetKey.MOUSE_STICK_DECAY_MIN] *= 0.01;
+        mouse[MkbPresetKey.MOUSE_SENSITIVITY_X] *= EmulatedMkbHandler.DEFAULT_PANNING_SENSITIVITY;
+        mouse[MkbPresetKey.MOUSE_SENSITIVITY_Y] *= EmulatedMkbHandler.DEFAULT_PANNING_SENSITIVITY;
+        mouse[MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT] *= EmulatedMkbHandler.DEFAULT_DEADZONE_COUNTERWEIGHT;
 
         const mouseMapTo = MouseMapTo[mouse[MkbPresetKey.MOUSE_MAP_TO]!];
         if (typeof mouseMapTo !== 'undefined') {

src/modules/mkb/mkb-remapper.ts

@@ -1,16 +1,16 @@
-import { GamepadKey } from "./definitions";
 import { CE, createButton, ButtonStyle } from "@utils/html";
 import { t } from "@utils/translation";
 import { Dialog } from "@modules/dialog";
 import { getPref, setPref, PrefKey } from "@utils/preferences";
-import { MkbPresetKey, GamepadKeyName } from "./definitions";
 import { KeyHelper } from "./key-helper";
 import { MkbPreset } from "./mkb-preset";
-import { MkbHandler } from "./mkb-handler";
+import { EmulatedMkbHandler } from "./mkb-handler";
 import { LocalDb } from "@utils/local-db";
 import { BxIcon } from "@utils/bx-icon";
 import { SettingElement } from "@utils/settings";
 import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb";
+import { MkbPresetKey, GamepadKey, GamepadKeyName } from "@enums/mkb";
+import { deepClone } from "@utils/global";
 
 
 type MkbRemapperElements = {
@@ -258,7 +258,7 @@ export class MkbRemapper {
 
                 defaultPresetId = this.#STATE.currentPresetId;
                 setPref(PrefKey.MKB_DEFAULT_PRESET_ID, defaultPresetId);
-                MkbHandler.INSTANCE.refreshPresetData();
+                EmulatedMkbHandler.getInstance().refreshPresetData();
             } else {
                 defaultPresetId = getPref(PrefKey.MKB_DEFAULT_PRESET_ID);
             }
@@ -292,7 +292,7 @@ export class MkbRemapper {
         this.#$.wrapper!.classList.toggle('bx-editing', this.#STATE.isEditing);
 
         if (this.#STATE.isEditing) {
-            this.#STATE.editingPresetData = structuredClone(this.#getCurrentPreset().data);
+            this.#STATE.editingPresetData = deepClone(this.#getCurrentPreset().data);
         } else {
             this.#STATE.editingPresetData = null;
         }
@@ -426,6 +426,7 @@ export class MkbRemapper {
             const $fragment = document.createDocumentFragment();
             for (let i = 0; i < keysPerButton; i++) {
                 $elm = CE('button', {
+                        type: 'button',
                         'data-prompt': buttonPrompt,
                         'data-button-index': buttonIndex,
                         'data-key-slot': i,
@@ -459,7 +460,7 @@ export class MkbRemapper {
             const onChange = (e: Event, value: any) => {
                 (this.#STATE.editingPresetData!.mouse as any)[key] = value;
             };
-            const $row = CE('div', {'class': 'bx-quick-settings-row'},
+            const $row = CE('div', {'class': 'bx-stream-settings-row'},
                     CE('label', {'for': `bx_setting_${key}`}, setting.label),
                     $elm = SettingElement.render(setting.type, key, setting, value, onChange, setting.params),
                 );
@@ -486,7 +487,7 @@ export class MkbRemapper {
                            style: ButtonStyle.PRIMARY,
                            onClick: e => {
                                setPref(PrefKey.MKB_DEFAULT_PRESET_ID, this.#STATE.currentPresetId);
-                               MkbHandler.INSTANCE.refreshPresetData();
+                               EmulatedMkbHandler.getInstance().refreshPresetData();
 
                                this.#refresh();
                            },
@@ -510,13 +511,13 @@ export class MkbRemapper {
                            label: t('save'),
                            style: ButtonStyle.PRIMARY,
                            onClick: e => {
-                               const updatedPreset = structuredClone(this.#getCurrentPreset());
+                               const updatedPreset = deepClone(this.#getCurrentPreset());
                                updatedPreset.data = this.#STATE.editingPresetData as MkbPresetData;
 
                                LocalDb.INSTANCE.updatePreset(updatedPreset).then(id => {
                                    // If this is the default preset => refresh preset data
                                    if (id === getPref(PrefKey.MKB_DEFAULT_PRESET_ID)) {
-                                       MkbHandler.INSTANCE.refreshPresetData();
+                                       EmulatedMkbHandler.getInstance().refreshPresetData();
                                    }
 
                                    this.#toggleEditing(false);

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

@@ -0,0 +1,319 @@
+import { Toast } from "@/utils/toast";
+import { PointerClient } from "./pointer-client";
+import { AppInterface, STATES } from "@/utils/global";
+import { MkbHandler } from "./base-mkb-handler";
+import { t } from "@/utils/translation";
+import { BxEvent } from "@/utils/bx-event";
+import { ButtonStyle, CE, createButton } from "@/utils/html";
+import { PrefKey, getPref } from "@/utils/preferences";
+
+type NativeMouseData = {
+    X: number,
+    Y: number,
+    Buttons: number,
+    WheelX: number,
+    WheelY: number,
+    Type? : 0,  // 0: Relative, 1: Absolute
+}
+
+type XcloudInputSink = {
+    onMouseInput: (data: NativeMouseData) => void;
+}
+
+export class NativeMkbHandler extends MkbHandler {
+    private static instance: NativeMkbHandler;
+    #pointerClient: PointerClient | undefined;
+    #enabled: boolean = false;
+
+    #mouseButtonsPressed = 0;
+    #mouseWheelX = 0;
+    #mouseWheelY = 0;
+
+    #mouseVerticalMultiply = 0;
+    #mouseHorizontalMultiply = 0;
+
+    #inputSink: XcloudInputSink | undefined;
+
+    #$message?: HTMLElement;
+
+    public static getInstance(): NativeMkbHandler {
+        if (!NativeMkbHandler.instance) {
+            NativeMkbHandler.instance = new NativeMkbHandler();
+        }
+
+        return NativeMkbHandler.instance;
+    }
+
+    #onKeyboardEvent(e: KeyboardEvent) {
+        if (e.type === 'keyup' && e.code === 'F8') {
+            e.preventDefault();
+            this.toggle();
+            return;
+        }
+    }
+
+    #onPointerLockRequested(e: Event) {
+        AppInterface.requestPointerCapture();
+        this.start();
+    }
+
+    #onPointerLockExited(e: Event) {
+        AppInterface.releasePointerCapture();
+        this.stop();
+    }
+
+    #onPollingModeChanged = (e: Event) => {
+        if (!this.#$message) {
+            return;
+        }
+
+        const mode = (e as any).mode;
+        if (mode === 'None') {
+            this.#$message.classList.remove('bx-offscreen');
+        } else {
+            this.#$message.classList.add('bx-offscreen');
+        }
+    }
+
+    #onDialogShown = () => {
+        document.pointerLockElement && document.exitPointerLock();
+    }
+
+    #initMessage() {
+        if (!this.#$message) {
+            this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg'},
+                CE('div', {},
+                    CE('p', {}, t('native-mkb')),
+                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
+                ),
+
+                CE('div', {'data-type': 'native'},
+                    createButton({
+                        style: ButtonStyle.PRIMARY | ButtonStyle.FULL_WIDTH | ButtonStyle.TALL,
+                        label: t('activate'),
+                        onClick: ((e: Event) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.toggle(true);
+                        }).bind(this),
+                    }),
+
+                    createButton({
+                        style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH,
+                        label: t('ignore'),
+                        onClick: e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            this.#$message?.classList.add('bx-gone');
+                        },
+                    }),
+                ),
+            );
+        }
+
+        if (!this.#$message.isConnected) {
+            document.documentElement.appendChild(this.#$message);
+        }
+    }
+
+    handleEvent(event: Event) {
+        switch (event.type) {
+            case 'keyup':
+                this.#onKeyboardEvent(event as KeyboardEvent);
+                break;
+
+            case BxEvent.XCLOUD_DIALOG_SHOWN:
+                this.#onDialogShown();
+                break;
+
+            case BxEvent.POINTER_LOCK_REQUESTED:
+                this.#onPointerLockRequested(event);
+                break;
+            case BxEvent.POINTER_LOCK_EXITED:
+                this.#onPointerLockExited(event);
+                break;
+
+            case BxEvent.XCLOUD_POLLING_MODE_CHANGED:
+                this.#onPollingModeChanged(event);
+                break;
+        }
+    }
+
+    init() {
+        this.#pointerClient = PointerClient.getInstance();
+        this.#inputSink = window.BX_EXPOSED.inputSink;
+
+        // Stop keyboard input at startup
+        this.#updateInputConfigurationAsync(false);
+
+        try {
+            this.#pointerClient.start(STATES.pointerServerPort, this);
+        } catch (e) {
+            Toast.show('Cannot enable Mouse & Keyboard feature');
+        }
+
+        this.#mouseVerticalMultiply = getPref(PrefKey.NATIVE_MKB_SCROLL_VERTICAL_SENSITIVITY);
+        this.#mouseHorizontalMultiply = getPref(PrefKey.NATIVE_MKB_SCROLL_HORIZONTAL_SENSITIVITY);
+
+        window.addEventListener('keyup', this);
+
+        window.addEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this);
+        window.addEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+        window.addEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        window.addEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this);
+
+        this.#initMessage();
+
+        if (AppInterface) {
+            Toast.show(t('press-key-to-toggle-mkb', {key: `<b>F8</b>`}), t('native-mkb'), {html: true});
+            this.#$message?.classList.add('bx-gone');
+        } else {
+            this.#$message?.classList.remove('bx-gone');
+        }
+    }
+
+    toggle(force?: boolean) {
+        let setEnable: boolean;
+        if (typeof force !== 'undefined') {
+            setEnable = force;
+        } else {
+            setEnable = !this.#enabled;
+        }
+
+        if (setEnable) {
+            document.documentElement.requestPointerLock();
+        } else {
+            document.exitPointerLock();
+        }
+    }
+
+    #updateInputConfigurationAsync(enabled: boolean) {
+        window.BX_EXPOSED.streamSession.updateInputConfigurationAsync({
+            enableKeyboardInput: enabled,
+            enableMouseInput: enabled,
+            enableAbsoluteMouse: false,
+            enableTouchInput: false,
+        });
+    }
+
+    start() {
+        this.#resetMouseInput();
+        this.#enabled = true;
+
+        this.#updateInputConfigurationAsync(true);
+
+        window.BX_EXPOSED.stopTakRendering = true;
+        this.#$message?.classList.add('bx-gone');
+
+        Toast.show(t('native-mkb'), t('enabled'), {instant: true});
+    }
+
+    stop() {
+        this.#resetMouseInput();
+        this.#enabled = false;
+        this.#updateInputConfigurationAsync(false);
+
+        this.#$message?.classList.remove('bx-gone');
+    }
+
+    destroy(): void {
+        this.#pointerClient?.stop();
+        window.removeEventListener('keyup', this);
+
+        window.removeEventListener(BxEvent.XCLOUD_DIALOG_SHOWN, this);
+        window.removeEventListener(BxEvent.POINTER_LOCK_REQUESTED, this);
+        window.removeEventListener(BxEvent.POINTER_LOCK_EXITED, this);
+        window.removeEventListener(BxEvent.XCLOUD_POLLING_MODE_CHANGED, this);
+
+        this.#$message?.classList.add('bx-gone');
+    }
+
+    handleMouseMove(data: MkbMouseMove): void {
+        this.#sendMouseInput({
+            X: data.movementX,
+            Y: data.movementY,
+            Buttons: this.#mouseButtonsPressed,
+            WheelX: this.#mouseWheelX,
+            WheelY: this.#mouseWheelY,
+        });
+    }
+
+    handleMouseClick(data: MkbMouseClick): void {
+        const { pointerButton, pressed } = data;
+
+        if (pressed) {
+            this.#mouseButtonsPressed |= pointerButton!;
+        } else {
+            this.#mouseButtonsPressed ^= pointerButton!;
+        }
+        this.#mouseButtonsPressed = Math.max(0, this.#mouseButtonsPressed);
+
+        this.#sendMouseInput({
+            X: 0,
+            Y: 0,
+            Buttons: this.#mouseButtonsPressed,
+            WheelX: this.#mouseWheelX,
+            WheelY: this.#mouseWheelY,
+        });
+    }
+
+    handleMouseWheel(data: MkbMouseWheel): boolean {
+        const { vertical, horizontal } = data;
+
+        this.#mouseWheelX = horizontal;
+        if (this.#mouseHorizontalMultiply && this.#mouseHorizontalMultiply !== 1) {
+            this.#mouseWheelX *= this.#mouseHorizontalMultiply;
+        }
+
+        this.#mouseWheelY = vertical;
+        if (this.#mouseVerticalMultiply && this.#mouseVerticalMultiply !== 1) {
+            this.#mouseWheelY *= this.#mouseVerticalMultiply;
+        }
+
+        this.#sendMouseInput({
+            X: 0,
+            Y: 0,
+            Buttons: this.#mouseButtonsPressed,
+            WheelX: this.#mouseWheelX,
+            WheelY: this.#mouseWheelY,
+        });
+
+        return true;
+    }
+
+    setVerticalScrollMultiplier(vertical: number) {
+        this.#mouseVerticalMultiply = vertical;
+    }
+
+    setHorizontalScrollMultiplier(horizontal: number) {
+        this.#mouseHorizontalMultiply = horizontal;
+    }
+
+    waitForMouseData(enabled: boolean): void {
+    }
+
+    isEnabled(): boolean {
+        return this.#enabled;
+    }
+
+    #sendMouseInput(data: NativeMouseData) {
+        data.Type = 0;  // Relative
+        this.#inputSink?.onMouseInput(data);
+    }
+
+    #resetMouseInput() {
+        this.#mouseButtonsPressed = 0;
+        this.#mouseWheelX = 0;
+        this.#mouseWheelY = 0;
+
+        this.#sendMouseInput({
+            X: 0,
+            Y: 0,
+            Buttons: 0,
+            WheelX: 0,
+            WheelY: 0,
+        });
+    }
+}

src/modules/mkb/pointer-client.ts

@@ -0,0 +1,130 @@
+import { BxLogger } from "@/utils/bx-logger";
+import { Toast } from "@/utils/toast";
+import type { MkbHandler } from "./base-mkb-handler";
+
+const LOG_TAG = 'PointerClient';
+
+enum PointerAction {
+    MOVE = 1,
+    BUTTON_PRESS = 2,
+    BUTTON_RELEASE = 3,
+    SCROLL = 4,
+    POINTER_CAPTURE_CHANGED = 5,
+}
+
+
+export class PointerClient {
+    private static instance: PointerClient;
+    public static getInstance(): PointerClient {
+        if (!PointerClient.instance) {
+            PointerClient.instance = new PointerClient();
+        }
+
+        return PointerClient.instance;
+    }
+
+    #socket: WebSocket | undefined | null;
+    #mkbHandler: MkbHandler | undefined;
+
+    start(port: number, mkbHandler: MkbHandler) {
+        if (!port) {
+            throw new Error('PointerServer port is 0');
+        }
+
+        this.#mkbHandler = mkbHandler;
+
+        // Create WebSocket connection.
+        this.#socket = new WebSocket(`ws://localhost:${port}`);
+        this.#socket.binaryType = 'arraybuffer';
+
+        // Connection opened
+        this.#socket.addEventListener('open', (event) => {
+            BxLogger.info(LOG_TAG, 'connected')
+        });
+
+        // Error
+        this.#socket.addEventListener('error', (event) => {
+            BxLogger.error(LOG_TAG, event);
+            Toast.show('Cannot setup mouse: ' + event);
+        });
+
+        this.#socket.addEventListener('close', (event) => {
+            this.#socket = null;
+        });
+
+        // Listen for messages
+        this.#socket.addEventListener('message', (event) => {
+            const dataView = new DataView(event.data);
+
+            let messageType = dataView.getInt8(0);
+            let offset = Int8Array.BYTES_PER_ELEMENT;
+            switch (messageType) {
+                case PointerAction.MOVE:
+                    this.onMove(dataView, offset);
+                    break;
+
+                case PointerAction.BUTTON_PRESS:
+                case PointerAction.BUTTON_RELEASE:
+                    this.onPress(messageType, dataView, offset);
+                    break;
+
+                case PointerAction.SCROLL:
+                    this.onScroll(dataView, offset);
+                    break;
+
+                case PointerAction.POINTER_CAPTURE_CHANGED:
+                    this.onPointerCaptureChanged(dataView, offset);
+            }
+        });
+    }
+
+    onMove(dataView: DataView, offset: number) {
+        // [X, Y]
+        const x = dataView.getInt16(offset);
+        offset += Int16Array.BYTES_PER_ELEMENT;
+        const y = dataView.getInt16(offset);
+
+        this.#mkbHandler?.handleMouseMove({
+            movementX: x,
+            movementY: y,
+        });
+        // BxLogger.info(LOG_TAG, 'move', x, y);
+    }
+
+    onPress(messageType: PointerAction, dataView: DataView, offset: number) {
+        const button = dataView.getUint8(offset);
+
+        this.#mkbHandler?.handleMouseClick({
+            pointerButton: button,
+            pressed: messageType === PointerAction.BUTTON_PRESS,
+        });
+
+        // BxLogger.info(LOG_TAG, 'press', buttonIndex);
+    }
+
+    onScroll(dataView: DataView, offset: number) {
+        // [V_SCROLL, H_SCROLL]
+        const vScroll = dataView.getInt16(offset);
+        offset += Int16Array.BYTES_PER_ELEMENT;
+        const hScroll = dataView.getInt16(offset);
+
+        this.#mkbHandler?.handleMouseWheel({
+            vertical: vScroll,
+            horizontal: hScroll,
+        });
+
+        // BxLogger.info(LOG_TAG, 'scroll', vScroll, hScroll);
+    }
+
+    onPointerCaptureChanged(dataView: DataView, offset: number) {
+        const hasCapture = dataView.getInt8(offset) === 1;
+        !hasCapture && this.#mkbHandler?.stop();
+    }
+
+    stop() {
+        try {
+            this.#socket?.close();
+        } catch (e) {}
+        this.#socket = null;
+    }
+}

src/modules/patcher.ts

@@ -3,7 +3,18 @@ import { BX_FLAGS } from "@utils/bx-flags";
 import { getPref, PrefKey } from "@utils/preferences";
 import { VibrationManager } from "@modules/vibration-manager";
 import { BxLogger } from "@utils/bx-logger";
-import { hashCode } from "@/utils/utils";
+import { hashCode, renderString } from "@utils/utils";
+import { BxEvent } from "@/utils/bx-event";
+
+import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
+import codeExposeStreamSession from "./patches/expose-stream-session.js" with { type: "text" };
+import codeLocalCoOpEnable from "./patches/local-co-op-enable.js" with { type: "text" };
+import codeSetCurrentlyFocusedInteractable from "./patches/set-currently-focused-interactable.js" with { type: "text" };
+import codeRemotePlayEnable from "./patches/remote-play-enable.js" with { type: "text" };
+import codeRemotePlayKeepAlive from "./patches/remote-play-keep-alive.js" with { type: "text" };
+import codeVibrationAdjust from "./patches/vibration-adjust.js" with { type: "text" };
+import { FeatureGates } from "@/utils/feature-gates.js";
+import { UiSection } from "@/enums/ui-sections.js";
 
 type PatchArray = (keyof typeof PATCHES)[];
 
@@ -59,22 +70,25 @@ const PATCHES = {
 
     // Disable IndexDB logging
     disableIndexDbLogging(str: string) {
-        const text = 'async addLog(e,t=1e4){';
+        const text = ',this.logsDb=new';
         if (!str.includes(text)) {
             return false;
         }
 
-        return str.replace(text, text + 'return;');
+        // Replace log() with an empty function
+        let newCode = ',this.log=()=>{}';
+        return str.replace(text, newCode + text);
     },
 
-    // Set TV layout
-    tvLayout(str: string) {
+    // Set custom website layout
+    websiteLayout(str: string) {
         const text = '?"tv":"default"';
         if (!str.includes(text)) {
             return false;
         }
 
-        return str.replace(text, '?"tv":"tv"');
+        const layout = getPref(PrefKey.UI_LAYOUT) === 'tv' ? 'tv' : 'default';
+        return str.replace(text, `?"${layout}":"${layout}"`);
     },
 
     // Replace "/direct-connect" with "/play"
@@ -88,31 +102,24 @@ const PATCHES = {
     },
 
     remotePlayKeepAlive(str: string) {
-        if (!str.includes('onServerDisconnectMessage(e){')) {
+        const text = 'onServerDisconnectMessage(e){';
+        if (!str.includes(text)) {
             return false;
         }
 
-        str = str.replace('onServerDisconnectMessage(e){', `onServerDisconnectMessage(e) {
-            const msg = JSON.parse(e);
-            if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
-                try {
-                    this.sendKeepAlive();
-                    return;
-                } catch (ex) { console.log(ex); }
-            }
-        `);
+        str = str.replace(text, text + codeRemotePlayKeepAlive);
 
         return str;
     },
 
     // Enable Remote Play feature
     remotePlayConnectMode(str: string) {
-        const text = 'connectMode:"cloud-connect"';
+        const text = 'connectMode:"cloud-connect",';
         if (!str.includes(text)) {
             return false;
         }
 
-        return str.replace(text, `connectMode:window.BX_REMOTE_PLAY_CONFIG?"xhome-connect":"cloud-connect",remotePlayServerId:(window.BX_REMOTE_PLAY_CONFIG&&window.BX_REMOTE_PLAY_CONFIG.serverId)||''`);
+        return str.replace(text, codeRemotePlayEnable);
     },
 
     // Disable achievement toast in Remote Play
@@ -151,24 +158,51 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
         return str.replace(text, 'this.shouldCollectStats=!1');
     },
 
-    blockGamepadStatsCollector(str: string) {
-        const text = 'this.inputPollingIntervalStats.addValue';
-        if (!str.includes(text)) {
+    patchPollGamepads(str: string) {
+        const index = str.indexOf('},this.pollGamepads=()=>{');
+        if (index === -1) {
             return false;
         }
 
-        str = str.replace('this.inputPollingIntervalStats.addValue', '');
-        str = str.replace('this.inputPollingDurationStats.addValue', '');
-        return str;
+        const nextIndex = str.indexOf('setTimeout(this.pollGamepads', index);
+        if (nextIndex === -1) {
+            return false;
+        }
+
+        let codeBlock = str.substring(index, nextIndex);
+
+        // Block gamepad stats collecting
+        if (getPref(PrefKey.BLOCK_TRACKING)) {
+            codeBlock = codeBlock.replaceAll('this.inputPollingIntervalStats.addValue', '');
+        }
+
+        // Map the Share button on Xbox Series controller with the capturing screenshot feature
+        const match = codeBlock.match(/this\.gamepadTimestamps\.set\((\w+)\.index/);
+        if (match) {
+            const gamepadVar = match[1];
+            const newCode = renderString(codeControllerShortcuts, {
+                    gamepadVar,
+                });
+
+            codeBlock = codeBlock.replace('this.gamepadTimestamps.set', newCode + 'this.gamepadTimestamps.set');
+        }
+
+        return str.substring(0, index) + codeBlock + str.substring(nextIndex);
     },
 
     enableXcloudLogger(str: string) {
-        const text = 'this.telemetryProvider=e}log(e,t,i){';
+        const text = 'this.telemetryProvider=e}log(e,t,r){';
         if (!str.includes(text)) {
             return false;
         }
 
-        str = str.replaceAll(text, text + 'console.log(Array.from(arguments));');
+        const newCode = `
+const [logTag, logLevel, logMessage] = Array.from(arguments);
+const logFunc = [console.debug, console.log, console.warn, console.error][logLevel];
+logFunc(logTag, '//', logMessage);
+`;
+
+        str = str.replaceAll(text, text + newCode);
         return str;
     },
 
@@ -189,20 +223,8 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
             return false;
         }
 
-        const newCode = `
-if (!window.BX_ENABLE_CONTROLLER_VIBRATION) {
-    return void(0);
-}
-if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
-    e.leftMotorPercent = e.leftMotorPercent * window.BX_VIBRATION_INTENSITY;
-    e.rightMotorPercent = e.rightMotorPercent * window.BX_VIBRATION_INTENSITY;
-    e.leftTriggerMotorPercent = e.leftTriggerMotorPercent * window.BX_VIBRATION_INTENSITY;
-    e.rightTriggerMotorPercent = e.rightTriggerMotorPercent * window.BX_VIBRATION_INTENSITY;
-}
-`;
-
         VibrationManager.updateGlobalVars();
-        str = str.replaceAll(text, text + newCode);
+        str = str.replaceAll(text, text + codeVibrationAdjust);
         return str;
     },
 
@@ -216,12 +238,10 @@ if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
         // Find the next "},"
         const endIndex = str.indexOf('},', index);
 
-        const newSettings = [
-            // 'EnableStreamGate: false',
-            'PwaPrompt: false',
-        ];
+        let newSettings = JSON.stringify(FeatureGates);
+        newSettings = newSettings.substring(1, newSettings.length - 1);
 
-        const newCode = newSettings.join(',');
+        const newCode = newSettings;
 
         str = str.substring(0, endIndex) + ',' + newCode + str.substring(endIndex);
         return str;
@@ -282,7 +302,44 @@ if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
             return false;
         }
 
-        str = str.replace(text, 'window.BX_EXPOSED["touch_layout_manager"] = this,' + text);
+        const newCode = `
+true;
+window.BX_EXPOSED["touchLayoutManager"] = this;
+window.dispatchEvent(new Event("${BxEvent.TOUCH_LAYOUT_MANAGER_READY}"));
+`;
+
+        str = str.replace(text, newCode + text);
+        return str;
+    },
+
+
+    patchBabylonRendererClass(str: string) {
+        // ()=>{a.current.render(),h.current=window.requestAnimationFrame(l)
+        let index = str.indexOf('.current.render(),');
+        if (index === -1) {
+            return false;
+        }
+
+        // Move back a character
+        index -= 1;
+
+        // Get variable of the "BabylonRendererClass" object
+        const rendererVar = str[index];
+
+        const newCode = `
+if (window.BX_EXPOSED.stopTakRendering) {
+    try {
+        document.getElementById('BabylonCanvasContainer-main')?.parentElement.classList.add('bx-offscreen');
+
+        ${rendererVar}.current.dispose();
+    } catch (e) {}
+
+    window.BX_EXPOSED.stopTakRendering = false;
+    return;
+}
+`;
+
+        str = str.substring(0, index) + newCode + str.substring(index);
         return str;
     },
 
@@ -292,27 +349,7 @@ if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
             return false;
         }
 
-        let patchstr = `
-let match;
-let onGamepadChangedStr = this.onGamepadChanged.toString();
-
-onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
-eval(\`this.onGamepadChanged = function \${onGamepadChangedStr}\`);
-
-let onGamepadInputStr = this.onGamepadInput.toString();
-
-match = onGamepadInputStr.match(/(\\w+\\.GamepadIndex)/);
-if (match) {
-    const gamepadIndexVar = match[0];
-    onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', \`this.gamepadStates.get(\${gamepadIndexVar},\`);
-    eval(\`this.onGamepadInput = function \${onGamepadInputStr}\`);
-    BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
-} else {
-    BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
-}
-`;
-
-        const newCode = `true; ${patchstr}; true,`;
+        const newCode = `true; ${codeLocalCoOpEnable}; true,`;
 
         str = str.replace(text, text + newCode);
         return str;
@@ -386,13 +423,19 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
             return false;
         }
 
+        let newCode = `
+// Expose onShowStreamMenu
+window.BX_EXPOSED.showStreamMenu = e.onShowStreamMenu;
 // Restore the "..." button
-        str = str.replace(text, 'e.guideUI = null;' + text);
+e.guideUI = null;
+`;
 
         // Remove the TAK Edit button when the touch controller is disabled
         if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off') {
-            str = str.replace(text, 'e.canShowTakHUD = false;' + text);
+            newCode += 'e.canShowTakHUD = false;';
         }
+
+        str = str.replace(text, newCode + text);
         return str;
     },
 
@@ -403,12 +446,23 @@ if (!!window.BX_REMOTE_PLAY_CONFIG) {
         }
 
         const newCode = `
-window.BX_EXPOSED.onPollingModeChanged && window.BX_EXPOSED.onPollingModeChanged(e);
+BxEvent.dispatch(window, BxEvent.XCLOUD_POLLING_MODE_CHANGED, {mode: e});
 `;
         str = str.replace(text, text + newCode);
         return str;
     },
 
+    patchGamepadPolling(str: string) {
+        let index = str.indexOf('.shouldHandleGamepadInput)())return void');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('{', index - 20) + 1;
+        str = str.substring(0, index) + 'if (window.BX_EXPOSED.disableGamepadPolling) return;' + str.substring(index);
+        return str;
+    },
+
     patchXcloudTitleInfo(str: string) {
         const text = 'async cloudConnect';
         let index = str.indexOf(text);
@@ -458,17 +512,325 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
         return str;
 
     },
+
+    patchAudioMediaStream(str: string) {
+        const text = '.srcObject=this.audioMediaStream,';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `window.BX_EXPOSED.setupGainNode(arguments[1], this.audioMediaStream),`;
+
+        str = str.replace(text, text + newCode);
+        return str;
+    },
+
+    patchCombinedAudioVideoMediaStream(str: string) {
+        const text = '.srcObject=this.combinedAudioVideoStream';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `,window.BX_EXPOSED.setupGainNode(arguments[0], this.combinedAudioVideoStream)`;
+        str = str.replace(text, text + newCode);
+        return str;
+    },
+
+    patchTouchControlDefaultOpacity(str: string) {
+        const text = 'opacityMultiplier:1';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const opacity = (getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) / 100).toFixed(1);
+        const newCode = `opacityMultiplier: ${opacity}`;
+        str = str.replace(text, newCode);
+        return str;
+    },
+
+    patchShowSensorControls(str: string) {
+        const text = '{shouldShowSensorControls:';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `{shouldShowSensorControls: (window.BX_EXPOSED && window.BX_EXPOSED.shouldShowSensorControls) ||`;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+
+    /*
+    exposeEventTarget(str: string) {
+        const text ='this._eventTarget=new EventTarget';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `
+window.BX_EXPOSED.eventTarget = ${text},
+window.dispatchEvent(new Event('${BxEvent.STREAM_EVENT_TARGET_READY}'))
+`;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+    //*/
+
+    // Class with: connectAsync(), doConnectAsync(), setPlayClient()
+    exposeStreamSession(str: string) {
+        const text =',this._connectionType=';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `;
+${codeExposeStreamSession}
+true` + text;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+
+    skipFeedbackDialog(str: string) {
+        const text = '&&this.shouldTransitionToFeedback(';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        str = str.replace(text, '&& false ' + text);
+        return str;
+    },
+
+    enableNativeMkb(str: string) {
+        const text = 'e.mouseSupported&&e.keyboardSupported&&e.fullscreenSupported;';
+        if ((!str.includes(text))) {
+            return false;
+        }
+
+        str = str.replace(text, text + 'return true;');
+        return str;
+    },
+
+    patchMouseAndKeyboardEnabled(str: string) {
+        const text = 'get mouseAndKeyboardEnabled(){';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        str = str.replace(text, text + 'return true;');
+        return str;
+    },
+
+    exposeInputSink(str: string) {
+        const text = 'this.controlChannel=null,this.inputChannel=null';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = 'window.BX_EXPOSED.inputSink = this;';
+
+        str = str.replace(text, newCode + text);
+        return str;
+    },
+
+    disableNativeRequestPointerLock(str: string) {
+        const text = 'async requestPointerLock(){';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        str = str.replace(text, text + 'return;');
+        return str;
+    },
+
+    // Fix crashing when RequestInfo.origin is empty
+    patchRequestInfoCrash(str: string) {
+        const text = 'if(!e)throw new Error("RequestInfo.origin is falsy");';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        str = str.replace(text, 'if (!e) e = "https://www.xbox.com";');
+        return str;
+    },
+
+    exposeDialogRoutes(str: string) {
+        const text = 'return{goBack:function(){';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        str = str.replace(text, 'return window.BX_EXPOSED.dialogRoutes = {goBack:function(){');
+        return str;
+    },
+
+    /*
+    (x.AW, {
+        path: V.LoginDeviceCode.path,
+        exact: !0,
+        render: () => (0, n.jsx)(qe, {
+            children: (0, n.jsx)(Et.R, {})
+        })
+    }, V.LoginDeviceCode.name),
+
+    const qe = e => {
+        let {
+            children: t
+        } = e;
+        const {
+            isTV: a,
+            isSupportedTVBrowser: r
+        } = (0, T.d)();
+        return a && r ? (0, n.jsx)(n.Fragment, {
+            children: t
+        }) : (0, n.jsx)(x.l_, {
+            to: V.Home.getLink()
+        })
+    };
+    */
+    enableTvRoutes(str: string) {
+        let index = str.indexOf('.LoginDeviceCode.path,');
+        if (index < 0) {
+            return false;
+        }
+
+        // Find *qe* name
+        const match = /render:.*?jsx\)\(([^,]+),/.exec(str.substring(index, index + 100));
+        if (!match) {
+            return false;
+        }
+
+        const funcName = match[1];
+
+        // Replace *qe*'s return value
+        // `return a && r ?` => `return a && r || true ?`
+        index = str.indexOf(`const ${funcName}=e=>{`);
+        index > -1 && (index = str.indexOf('return ', index));
+        index > -1 && (index = str.indexOf('?', index));
+
+        if (index === -1) {
+            return false;
+        }
+
+        str = str.substring(0, index) + '|| true' + str.substring(index);
+        return str;
+    },
+
+    // Don't render "Play With Friends" sections
+    ignorePlayWithFriendsSection(str: string) {
+        let index = str.indexOf('location:"PlayWithFriendsRow",');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('return', index - 50);
+        if (index === -1) {
+            return false;
+        }
+
+        str = str.substring(0, index) + 'return null;' + str.substring(index + 6);
+        return str;
+    },
+
+    // Don't render "All Games" sections
+    ignoreAllGamesSection(str: string) {
+        let index = str.indexOf('className:"AllGamesRow-module__allGamesRowContainer');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('grid:!0,', index);
+        index > -1 && (index = str.indexOf('(0,', index - 70));
+
+        if (index === -1) {
+            return false;
+        }
+
+        str = str.substring(0, index) + 'true ? null :' + str.substring(index);
+        return str;
+    },
+
+    // Override Storage.getSettings()
+    overrideStorageGetSettings(str: string) {
+        const text = '}getSetting(e){';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `
+// console.log('setting', this.baseStorageKey, e);
+if (this.baseStorageKey in window.BX_EXPOSED.overrideSettings) {
+    const settings = window.BX_EXPOSED.overrideSettings[this.baseStorageKey];
+    if (e in settings) {
+        return settings[e];
+    }
+}
+`;
+        str = str.replace(text, text + newCode);
+        return str;
+    },
+
+    // game-stream.js   24.16.4
+    alwaysShowStreamHud(str: string) {
+        let index = str.indexOf(',{onShowStreamMenu:');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('&&(0,', index - 100);
+        if (index === -1) {
+            return false;
+        }
+
+        const commaIndex = str.indexOf(',', index - 10);
+        str = str.substring(0, commaIndex) + ',true' + str.substring(index);
+        return str;
+    },
+
+    // 24225.js#4127, 24.17.11
+    patchSetCurrentlyFocusedInteractable(str: string) {
+        let index = str.indexOf('.setCurrentlyFocusedInteractable=(');
+        if (index === -1) {
+            return false;
+        }
+
+        index = str.indexOf('{', index) + 1;
+        str = str.substring(0, index) + codeSetCurrentlyFocusedInteractable + str.substring(index);
+        return str;
+    },
 };
 
 let PATCH_ORDERS: PatchArray = [
+    ...(getPref(PrefKey.NATIVE_MKB_ENABLED) === 'on' ? [
+        'enableNativeMkb',
+        'patchMouseAndKeyboardEnabled',
+        'disableNativeRequestPointerLock',
+        'exposeInputSink',
+    ] : []),
+
+    'patchRequestInfoCrash',
+
     'disableStreamGate',
     'overrideSettings',
     'broadcastPollingMode',
+    'patchGamepadPolling',
 
-    getPref(PrefKey.UI_LAYOUT) === 'tv' && 'tvLayout',
+    'exposeStreamSession',
+    'exposeDialogRoutes',
+
+    'enableTvRoutes',
+
+    'overrideStorageGetSettings',
+    getPref(PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME) && 'patchSetCurrentlyFocusedInteractable',
+
+    getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
     getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
     getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
 
+    getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.FRIENDS) && 'ignorePlayWithFriendsSection',
+    getPref(PrefKey.UI_HIDE_SECTIONS).includes(UiSection.ALL_GAMES) && 'ignoreAllGamesSection',
+
     ...(getPref(PrefKey.BLOCK_TRACKING) ? [
         'disableAiTrack',
         'disableTelemetry',
@@ -484,7 +846,7 @@ let PATCH_ORDERS: PatchArray = [
         'remotePlayKeepAlive',
         'remotePlayDirectConnectUrl',
         'remotePlayDisableAchievementToast',
-        STATES.hasTouchSupport && 'patchUpdateInputConfigurationAsync',
+        STATES.userAgent.capabilities.touch && 'patchUpdateInputConfigurationAsync',
     ] : []),
 
     ...(BX_FLAGS.EnableXcloudLogging ? [
@@ -500,12 +862,29 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
     'patchStreamHud',
     'playVibration',
 
-    STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
-    STATES.hasTouchSupport && (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) && 'disableTakRenderer',
+    'alwaysShowStreamHud',
+
+    // 'exposeEventTarget',
+
+    // Patch volume control for normal stream
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && !getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchAudioMediaStream',
+    // Patch volume control for combined audio+video stream
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchCombinedAudioVideoMediaStream',
+
+    // Skip feedback dialog
+    getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG) && 'skipFeedbackDialog',
+
+    ...(STATES.userAgent.capabilities.touch ? [
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'exposeTouchLayoutManager',
+        (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'off' || getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF) || !STATES.userAgent.capabilities.touch) && 'disableTakRenderer',
+        getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
+        'patchBabylonRendererClass',
+    ] : []),
 
     BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',
 
-    getPref(PrefKey.BLOCK_TRACKING) && 'blockGamepadStatsCollector',
+    'patchPollGamepads',
 
     getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'streamCombineSources',
 
@@ -522,6 +901,12 @@ export class Patcher {
         const nativeBind = Function.prototype.bind;
         Function.prototype.bind = function() {
             let valid = false;
+
+            // Looking for these criteria:
+            // - Variable name <= 2 characters
+            // - Has 2 params:
+            //     - The first one is null
+            //     - The second one is either 0 or a function
             if (this.name.length <= 2 && arguments.length === 2 && arguments[0] === null) {
                 if (arguments[1] === 0 || (typeof arguments[1] === 'function')) {
                     valid = true;
@@ -533,6 +918,8 @@ export class Patcher {
                 return nativeBind.apply(this, arguments);
             }
 
+            PatcherCache.init();
+
             if (typeof arguments[1] === 'function') {
                 BxLogger.info(LOG_TAG, 'Restored Function.prototype.bind()');
                 Function.prototype.bind = nativeBind;
@@ -549,23 +936,23 @@ export class Patcher {
         };
     }
 
-    static length() { return PATCH_ORDERS.length; };
-
     static patch(item: [[number], { [key: string]: () => {} }]) {
+        // !!! Use "caches" as variable name will break touch controller???
         // console.log('patch', '-----');
         let patchesToCheck: PatchArray;
-        let appliedPatches;
-        const caches: { [key: string]: string[] } = {};
+        let appliedPatches: PatchArray;
+
+        const patchesMap: Record<string, PatchArray> = {};
 
         for (let id in item[1]) {
             appliedPatches = [];
 
             const cachedPatches = PatcherCache.getPatches(id);
             if (cachedPatches) {
-                patchesToCheck = cachedPatches;
+                patchesToCheck = cachedPatches.slice(0);
                 patchesToCheck.push(...PATCH_ORDERS);
             } else {
-                patchesToCheck = PATCH_ORDERS;
+                patchesToCheck = PATCH_ORDERS.slice(0);
             }
 
             // Empty patch list
@@ -573,20 +960,21 @@ export class Patcher {
                 continue;
             }
 
-            // console.log(patchesToCheck);
             const func = item[1][id];
             let str = func.toString();
 
-            // console.log(id, str);
-
-            for (let groupIndex = 0; groupIndex < patchesToCheck.length; groupIndex++) {
-                const patchName = patchesToCheck[groupIndex];
             let modified = false;
 
+            for (let patchIndex = 0; patchIndex < patchesToCheck.length; patchIndex++) {
+                const patchName = patchesToCheck[patchIndex];
                 if (appliedPatches.indexOf(patchName) > -1) {
                     continue;
                 }
 
+                if (!PATCHES[patchName]) {
+                    continue;
+                }
+
                 // Check function against patch
                 const patchedStr = PATCHES[patchName].call(null, str);
 
@@ -598,28 +986,28 @@ export class Patcher {
                 modified = true;
                 str = patchedStr;
 
-                BxLogger.info(LOG_TAG, `Applied "${patchName}" patch`);
+                BxLogger.info(LOG_TAG, `✅ ${patchName}`);
                 appliedPatches.push(patchName);
 
                 // Remove patch
-                patchesToCheck.splice(groupIndex, 1);
-                groupIndex--;
+                patchesToCheck.splice(patchIndex, 1);
+                patchIndex--;
                 PATCH_ORDERS = PATCH_ORDERS.filter(item => item != patchName);
+            }
 
             // Apply patched functions
             if (modified) {
                 item[1][id] = eval(str);
             }
-            }
 
             // Save to cache
             if (appliedPatches.length) {
-                caches[id] = appliedPatches;
+                patchesMap[id] = appliedPatches;
             }
         }
 
-        if (Object.keys(caches).length) {
-            PatcherCache.saveToCache(caches);
+        if (Object.keys(patchesMap).length) {
+            PatcherCache.saveToCache(patchesMap);
         }
     }
 
@@ -628,12 +1016,14 @@ export class Patcher {
     }
 }
 
-class PatcherCache {
+export class PatcherCache {
     static #KEY_CACHE = 'better_xcloud_patches_cache';
     static #KEY_SIGNATURE = 'better_xcloud_patches_cache_signature';
 
     static #CACHE: any;
 
+    static #isInitialized = false;
+
     /**
      * Get patch's signature
      */
@@ -647,18 +1037,22 @@ class PatcherCache {
         return sig;
     }
 
+    static clear() {
+        // Clear cache
+        window.localStorage.removeItem(PatcherCache.#KEY_CACHE);
+        PatcherCache.#CACHE = {};
+    }
+
     static checkSignature() {
         const storedSig = window.localStorage.getItem(PatcherCache.#KEY_SIGNATURE) || 0;
         const currentSig = PatcherCache.#getSignature();
 
         if (currentSig !== parseInt(storedSig as string)) {
-            BxLogger.warning(LOG_TAG, 'Signature changed');
-
-            // Clear cache
-            window.localStorage.setItem(PatcherCache.#KEY_CACHE, '{}');
-
             // Save new signature
+            BxLogger.warning(LOG_TAG, 'Signature changed');
             window.localStorage.setItem(PatcherCache.#KEY_SIGNATURE, currentSig.toString());
+
+            PatcherCache.clear();
         } else {
             BxLogger.info(LOG_TAG, 'Signature unchanged');
         }
@@ -682,7 +1076,7 @@ class PatcherCache {
         return PatcherCache.#CACHE[id];
     }
 
-    static saveToCache(subCache: { [key: string]: string[] }) {
+    static saveToCache(subCache: Record<string, PatchArray>) {
         for (const id in subCache) {
             const patchNames = subCache[id];
 
@@ -703,6 +1097,13 @@ class PatcherCache {
     }
 
     static init() {
+        if (PatcherCache.#isInitialized) {
+            return;
+        }
+        PatcherCache.#isInitialized = true;
+
+        PatcherCache.checkSignature();
+
         // Read cache from storage
         PatcherCache.#CACHE = JSON.parse(window.localStorage.getItem(PatcherCache.#KEY_CACHE) || '{}');
         BxLogger.info(LOG_TAG, PatcherCache.#CACHE);
@@ -721,11 +1122,3 @@ class PatcherCache {
         BxLogger.info(LOG_TAG, PLAYING_PATCH_ORDERS.slice(0));
     }
 }
-
-document.addEventListener('readystatechange', e => {
-    if (document.readyState === 'interactive') {
-        PatcherCache.checkSignature();
-    }
-});
-
-PatcherCache.init();

src/modules/patches/controller-shortcuts.js

@@ -0,0 +1,99 @@
+if (window.BX_EXPOSED.disableGamepadPolling) {
+    this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(50) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, 50);
+    return;
+}
+
+const currentGamepad = ${gamepadVar};
+
+// Share button on XS controller
+if (currentGamepad.buttons[17] && currentGamepad.buttons[17].pressed) {
+    window.dispatchEvent(new Event(BxEvent.CAPTURE_SCREENSHOT));
+}
+
+const btnHome = currentGamepad.buttons[16];
+if (btnHome) {
+    if (!this.bxHomeStates) {
+        this.bxHomeStates = {};
+    }
+
+    let intervalMs = 0;
+    let hijack = false;
+
+    if (btnHome.pressed) {
+        hijack = true;
+        intervalMs = 16;
+        this.gamepadIsIdle.set(currentGamepad.index, false);
+
+        if (this.bxHomeStates[currentGamepad.index]) {
+            const lastTimestamp = this.bxHomeStates[currentGamepad.index].timestamp;
+
+            if (currentGamepad.timestamp !== lastTimestamp) {
+                this.bxHomeStates[currentGamepad.index].timestamp = currentGamepad.timestamp;
+
+                const handled = window.BX_EXPOSED.handleControllerShortcut(currentGamepad);
+                if (handled) {
+                    this.bxHomeStates[currentGamepad.index].shortcutPressed += 1;
+                }
+            }
+        } else {
+            // First time pressing > save current timestamp
+            window.BX_EXPOSED.resetControllerShortcut(currentGamepad.index);
+            this.bxHomeStates[currentGamepad.index] = {
+                shortcutPressed: 0,
+                timestamp: currentGamepad.timestamp,
+            };
+        }
+    } else if (this.bxHomeStates[currentGamepad.index]) {
+        hijack = true;
+        const info = structuredClone(this.bxHomeStates[currentGamepad.index]);
+
+        // Home button released
+        this.bxHomeStates[currentGamepad.index] = null;
+
+        if (info.shortcutPressed === 0) {
+            const fakeGamepadMappings = [{
+                GamepadIndex: currentGamepad.index,
+                A: 0,
+                B: 0,
+                X: 0,
+                Y: 0,
+                LeftShoulder: 0,
+                RightShoulder: 0,
+                LeftTrigger: 0,
+                RightTrigger: 0,
+                View: 0,
+                Menu: 0,
+                LeftThumb: 0,
+                RightThumb: 0,
+                DPadUp: 0,
+                DPadDown: 0,
+                DPadLeft: 0,
+                DPadRight: 0,
+                Nexus: 1,
+                LeftThumbXAxis: 0,
+                LeftThumbYAxis: 0,
+                RightThumbXAxis: 0,
+                RightThumbYAxis: 0,
+                PhysicalPhysicality: 0,
+                VirtualPhysicality: 0,
+                Dirty: true,
+                Virtual: false,
+            }];
+
+            const isLongPress = (currentGamepad.timestamp - info.timestamp) >= 500;
+            intervalMs = isLongPress ? 500 : 100;
+
+            this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
+        } else {
+            intervalMs = 4;
+        }
+    }
+
+    if (hijack && intervalMs) {
+        // Listen to next button press
+        this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
+
+        // Hijack this button
+        return;
+    }
+}

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

@@ -0,0 +1,29 @@
+window.BX_EXPOSED.streamSession = this;
+
+const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
+this.setMicrophoneState = state => {
+    orgSetMicrophoneState(state);
+
+    const evt = new Event(BxEvent.MICROPHONE_STATE_CHANGED);
+    evt.microphoneState = state;
+
+    window.dispatchEvent(evt);
+};
+
+window.dispatchEvent(new Event(BxEvent.STREAM_SESSION_READY));
+
+// Patch updateDimensions() to make native touch work correctly with WebGL2
+let updateDimensionsStr = this.updateDimensions.toString();
+
+// if(r){
+const renderTargetVar = updateDimensionsStr.match(/if\((\w+)\){/)[1];
+
+updateDimensionsStr = updateDimensionsStr.replaceAll(renderTargetVar + '.scroll', 'scroll');
+
+updateDimensionsStr = updateDimensionsStr.replace(`if(${renderTargetVar}){`, `
+if (${renderTargetVar}) {
+    const scrollWidth = ${renderTargetVar}.dataset.width ? parseInt(${renderTargetVar}.dataset.width) : ${renderTargetVar}.scrollWidth;
+    const scrollHeight = ${renderTargetVar}.dataset.height ? parseInt(${renderTargetVar}.dataset.height) : ${renderTargetVar}.scrollHeight;
+`);
+
+eval(`this.updateDimensions = function ${updateDimensionsStr}`);

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

@@ -0,0 +1,17 @@
+let match;
+let onGamepadChangedStr = this.onGamepadChanged.toString();
+
+onGamepadChangedStr = onGamepadChangedStr.replaceAll('0', 'arguments[1]');
+eval(`this.onGamepadChanged = function ${onGamepadChangedStr}`);
+
+let onGamepadInputStr = this.onGamepadInput.toString();
+
+match = onGamepadInputStr.match(/(\w+\.GamepadIndex)/);
+if (match) {
+    const gamepadIndexVar = match[0];
+    onGamepadInputStr = onGamepadInputStr.replace('this.gamepadStates.get(', `this.gamepadStates.get(${gamepadIndexVar},`);
+    eval(`this.onGamepadInput = function ${onGamepadInputStr}`);
+    BxLogger.info('supportLocalCoOp', '✅ Successfully patched local co-op support');
+} else {
+    BxLogger.error('supportLocalCoOp', '❌ Unable to patch local co-op support');
+}

src/modules/patches/remote-play-enable.js

@@ -0,0 +1,2 @@
+connectMode: window.BX_REMOTE_PLAY_CONFIG ? "xhome-connect" : "cloud-connect",
+remotePlayServerId: (window.BX_REMOTE_PLAY_CONFIG && window.BX_REMOTE_PLAY_CONFIG.serverId) || '',

src/modules/patches/remote-play-keep-alive.js

@@ -0,0 +1,7 @@
+const msg = JSON.parse(e);
+if (msg.reason === 'WarningForBeingIdle' && !window.location.pathname.includes('/launch/')) {
+    try {
+        this.sendKeepAlive();
+        return;
+    } catch (ex) { console.log(ex); }
+}

src/modules/patches/set-currently-focused-interactable.js

@@ -0,0 +1 @@
+e && BxEvent.dispatch(window, BxEvent.NAVIGATION_FOCUS_CHANGED, {element: e});

src/modules/patches/vibration-adjust.js

@@ -0,0 +1,15 @@
+if (!window.BX_ENABLE_CONTROLLER_VIBRATION) {
+    return void(0);
+}
+
+const intensity = window.BX_VIBRATION_INTENSITY;
+if (intensity === 0) {
+    return void(0);
+}
+
+if (intensity < 1) {
+    e.leftMotorPercent *= intensity;
+    e.rightMotorPercent *= intensity;
+    e.leftTriggerMotorPercent *= intensity;
+    e.rightTriggerMotorPercent *= intensity;
+}

src/modules/player/shaders/clarity_boost.fs

@@ -0,0 +1,121 @@
+const int FILTER_UNSHARP_MASKING = 1;
+const int FILTER_CAS = 2;
+
+precision highp float;
+uniform sampler2D data;
+uniform vec2 iResolution;
+
+uniform int filterId;
+uniform float sharpenFactor;
+uniform float brightness;
+uniform float contrast;
+uniform float saturation;
+
+vec3 textureAt(sampler2D tex, vec2 coord) {
+    return texture2D(tex, coord / iResolution.xy).rgb;
+}
+
+vec3 clarityBoost(sampler2D tex, vec2 coord)
+{
+    // Load a collection of samples in a 3x3 neighorhood, where e is the current pixel.
+    // a b c
+    // d e f
+    // g h i
+    vec3 a = textureAt(tex, coord + vec2(-1, 1));
+    vec3 b = textureAt(tex, coord + vec2(0, 1));
+    vec3 c = textureAt(tex, coord + vec2(1, 1));
+
+    vec3 d = textureAt(tex, coord + vec2(-1, 0));
+    vec3 e = textureAt(tex, coord);
+    vec3 f = textureAt(tex, coord + vec2(1, 0));
+
+    vec3 g = textureAt(tex, coord + vec2(-1, -1));
+    vec3 h = textureAt(tex, coord + vec2(0, -1));
+    vec3 i = textureAt(tex, coord + vec2(1, -1));
+
+    if (filterId == FILTER_CAS) {
+        // Soft min and max.
+        //  a b c             b
+        //  d e f * 0.5  +  d e f * 0.5
+        //  g h i             h
+        // These are 2.0x bigger (factored out the extra multiply).
+        vec3 minRgb = min(min(min(d, e), min(f, b)), h);
+        vec3 minRgb2 = min(min(a, c), min(g, i));
+        minRgb += min(minRgb, minRgb2);
+
+        vec3 maxRgb = max(max(max(d, e), max(f, b)), h);
+        vec3 maxRgb2 = max(max(a, c), max(g, i));
+        maxRgb += max(maxRgb, maxRgb2);
+
+        // Smooth minimum distance to signal limit divided by smooth max.
+        vec3 reciprocalMaxRgb = 1.0 / maxRgb;
+        vec3 amplifyRgb = clamp(min(minRgb, 2.0 - maxRgb) * reciprocalMaxRgb, 0.0, 1.0);
+
+        // Shaping amount of sharpening.
+        amplifyRgb = inversesqrt(amplifyRgb);
+
+        float contrast = 0.8;
+        float peak = -3.0 * contrast + 8.0;
+        vec3 weightRgb = -(1.0 / (amplifyRgb * peak));
+
+        vec3 reciprocalWeightRgb = 1.0 / (4.0 * weightRgb + 1.0);
+
+        //                0 w 0
+        // Filter shape:  w 1 w
+        //                0 w 0
+        vec3 window = (b + d) + (f + h);
+        vec3 outColor = clamp((window * weightRgb + e) * reciprocalWeightRgb, 0.0, 1.0);
+
+        outColor = mix(e, outColor, sharpenFactor / 2.0);
+
+        return outColor;
+    } else if (filterId == FILTER_UNSHARP_MASKING) {
+        vec3 gaussianBlur = (a * 1.0 + b * 2.0 + c * 1.0 +
+            d * 2.0 + e * 4.0 + f * 2.0 +
+            g * 1.0 + h * 2.0 + i * 1.0) / 16.0;
+
+        // Return edge detection
+        return e + (e - gaussianBlur) * sharpenFactor / 3.0;
+    }
+
+    return e;
+}
+
+vec3 adjustBrightness(vec3 color) {
+    return (1.0 + brightness) * color;
+}
+
+vec3 adjustContrast(vec3 color) {
+    return 0.5 + (1.0 + contrast) * (color - 0.5);
+}
+
+vec3 adjustSaturation(vec3 color) {
+    const vec3 luminosityFactor = vec3(0.2126, 0.7152, 0.0722);
+    vec3 grayscale = vec3(dot(color, luminosityFactor));
+
+    return mix(grayscale, color, 1.0 + saturation);
+}
+
+void main() {
+    vec3 color;
+
+    if (sharpenFactor > 0.0) {
+        color = clarityBoost(data, gl_FragCoord.xy);
+    } else {
+        color = textureAt(data, gl_FragCoord.xy);
+    }
+
+    if (saturation != 0.0) {
+        color = adjustSaturation(color);
+    }
+
+    if (contrast != 0.0) {
+        color = adjustContrast(color);
+    }
+
+    if (brightness != 0.0) {
+        color = adjustBrightness(color);
+    }
+
+    gl_FragColor = vec4(color, 1.0);
+}

src/modules/player/shaders/clarity_boost.vert

@@ -0,0 +1,5 @@
+attribute vec2 position;
+
+void main() {
+    gl_Position = vec4(position, 0, 1);
+}

src/modules/player/webgl2-player.ts

@@ -0,0 +1,250 @@
+import vertClarityBoost from "./shaders/clarity_boost.vert" with { type: "text" };
+import fsClarityBoost from "./shaders/clarity_boost.fs" with { type: "text" };
+import { BxLogger } from "@/utils/bx-logger";
+
+
+const LOG_TAG = 'WebGL2Player';
+
+export class WebGL2Player {
+    #$video: HTMLVideoElement;
+    #$canvas: HTMLCanvasElement;
+
+    #gl: WebGL2RenderingContext | null = null;
+    #resources: Array<any> = [];
+    #program: WebGLProgram | null = null;
+
+    #stopped: boolean = false;
+
+    #options = {
+        filterId: 1,
+        sharpenFactor: 0,
+        brightness: 0.0,
+        contrast: 0.0,
+        saturation: 0.0,
+    };
+
+    #animFrameId: number | null = null;
+
+    constructor($video: HTMLVideoElement) {
+        BxLogger.info(LOG_TAG, 'Initialize');
+        this.#$video = $video;
+
+        const $canvas = document.createElement('canvas');
+        $canvas.width = $video.videoWidth;
+        $canvas.height = $video.videoHeight;
+        this.#$canvas = $canvas;
+
+        this.#setupShaders();
+        this.#setupRendering();
+
+        $video.insertAdjacentElement('afterend', $canvas);
+    }
+
+    setFilter(filterId: number, update = true) {
+        this.#options.filterId = filterId;
+        update && this.updateCanvas();
+    }
+
+    setSharpness(sharpness: number, update = true) {
+        this.#options.sharpenFactor = sharpness;
+        update && this.updateCanvas();
+    }
+
+    setBrightness(brightness: number, update = true) {
+        this.#options.brightness = (brightness - 100) / 100;
+        update && this.updateCanvas();
+    }
+
+    setContrast(contrast: number, update = true) {
+        this.#options.contrast = (contrast - 100) / 100;
+        update && this.updateCanvas();
+    }
+
+    setSaturation(saturation: number, update = true) {
+        this.#options.saturation = (saturation - 100) / 100;
+        update && this.updateCanvas();
+    }
+
+    getCanvas() {
+        return this.#$canvas;
+    }
+
+    updateCanvas() {
+        const gl = this.#gl!;
+        const program = this.#program!;
+
+        gl.uniform2f(gl.getUniformLocation(program, 'iResolution'), this.#$canvas.width, this.#$canvas.height);
+
+        gl.uniform1i(gl.getUniformLocation(program, 'filterId'), this.#options.filterId);
+        gl.uniform1f(gl.getUniformLocation(program, 'sharpenFactor'), this.#options.sharpenFactor);
+        gl.uniform1f(gl.getUniformLocation(program, 'brightness'), this.#options.brightness);
+        gl.uniform1f(gl.getUniformLocation(program, 'contrast'), this.#options.contrast);
+        gl.uniform1f(gl.getUniformLocation(program, 'saturation'), this.#options.saturation);
+    }
+
+    drawFrame() {
+        const gl = this.#gl!;
+        const $video = this.#$video;
+
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, $video);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+
+    #setupRendering() {
+        let animate: any;
+
+        if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+            const $video = this.#$video;
+            animate = () => {
+                if (this.#stopped) {
+                    return;
+                }
+
+                this.drawFrame();
+                this.#animFrameId = $video.requestVideoFrameCallback(animate);
+            }
+
+            this.#animFrameId = $video.requestVideoFrameCallback(animate);
+        } else {
+            animate = () => {
+                if (this.#stopped) {
+                    return;
+                }
+
+                this.drawFrame();
+                this.#animFrameId = requestAnimationFrame(animate);
+            }
+
+            this.#animFrameId = requestAnimationFrame(animate);
+        }
+    }
+
+    #setupShaders() {
+        const gl = this.#$canvas.getContext('webgl2', {
+            isBx: true,
+            antialias: true,
+            alpha: false,
+            powerPreference: 'high-performance',
+        }) as WebGL2RenderingContext;
+        this.#gl = gl;
+
+        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferWidth);
+
+        // Vertex shader: Identity map
+        const vShader = gl.createShader(gl.VERTEX_SHADER)!;
+        gl.shaderSource(vShader, vertClarityBoost);
+        gl.compileShader(vShader);
+
+        const fShader = gl.createShader(gl.FRAGMENT_SHADER)!;
+        gl.shaderSource(fShader, fsClarityBoost);
+        gl.compileShader(fShader);
+
+        // Create and link program
+        const program = gl.createProgram()!;
+        this.#program = program;
+
+        gl.attachShader(program, vShader);
+        gl.attachShader(program, fShader);
+        gl.linkProgram(program);
+        gl.useProgram(program);
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            console.error(`Link failed: ${gl.getProgramInfoLog(program)}`);
+            console.error(`vs info-log: ${gl.getShaderInfoLog(vShader)}`);
+            console.error(`fs info-log: ${gl.getShaderInfoLog(fShader)}`);
+        }
+
+        this.updateCanvas();
+
+        // Vertices: A screen-filling quad made from two triangles
+        const buffer = gl.createBuffer();
+        this.#resources.push(buffer);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+            -1, -1,
+            1, -1,
+            -1,  1,
+            -1,  1,
+            1, -1,
+            1,  1,
+        ]), gl.STATIC_DRAW);
+
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+
+        // Texture to contain the video data
+        const texture = gl.createTexture();
+        this.#resources.push(texture);
+
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+        // Bind texture to the "data" argument to the fragment shader
+        gl.uniform1i(gl.getUniformLocation(program, 'data'), 0);
+
+        gl.activeTexture(gl.TEXTURE0);
+        // gl.bindTexture(gl.TEXTURE_2D, texture);
+    }
+
+    resume() {
+        this.stop();
+        this.#stopped = false;
+        BxLogger.info(LOG_TAG, 'Resume');
+
+        this.#$canvas.classList.remove('bx-gone');
+        this.#setupRendering();
+    }
+
+    stop() {
+        BxLogger.info(LOG_TAG, 'Stop');
+        this.#$canvas.classList.add('bx-gone');
+
+        this.#stopped = true;
+        if (this.#animFrameId) {
+            if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+                this.#$video.cancelVideoFrameCallback(this.#animFrameId);
+            } else {
+                cancelAnimationFrame(this.#animFrameId);
+            }
+
+            this.#animFrameId = null;
+        }
+    }
+
+    destroy() {
+        BxLogger.info(LOG_TAG, 'Destroy');
+        this.stop();
+
+        const gl = this.#gl;
+        if (gl) {
+            gl.getExtension('WEBGL_lose_context')?.loseContext();
+
+            for (const resource of this.#resources) {
+                if (resource instanceof WebGLProgram) {
+                    gl.useProgram(null);
+                    gl.deleteProgram(resource);
+                } else if (resource instanceof WebGLShader) {
+                    gl.deleteShader(resource);
+                } else if (resource instanceof WebGLTexture) {
+                    gl.deleteTexture(resource);
+                } else if (resource instanceof WebGLBuffer) {
+                    gl.deleteBuffer(resource);
+                }
+            }
+
+            this.#gl = null;
+        }
+
+        if (this.#$canvas.isConnected) {
+            this.#$canvas.parentElement?.removeChild(this.#$canvas);
+        }
+
+        this.#$canvas.width = 1;
+        this.#$canvas.height = 1;
+    }
+}

src/modules/remote-play.ts

@@ -7,6 +7,7 @@ import { getPref, PrefKey, setPref } from "@utils/preferences";
 import { t } from "@utils/translation";
 import { localRedirect } from "@modules/ui/ui";
 import { BxLogger } from "@utils/bx-logger";
+import { HeaderSection } from "./ui/header";
 
 const LOG_TAG = 'RemotePlay';
 
@@ -97,6 +98,10 @@ export class RemotePlay {
         RemotePlay.#getXhomeToken(() => {
             RemotePlay.#getConsolesList(() => {
                 BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES);
+                if (RemotePlay.#CONSOLES && RemotePlay.#CONSOLES.length > 0) {
+                    STATES.supportedRegion && HeaderSection.showRemotePlayButton();
+                }
+
                 RemotePlay.#renderConsoles();
                 BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
             });

src/modules/screenshot.ts

@@ -1,97 +0,0 @@
-import { STATES, AppInterface } from "@utils/global";
-import { CE } from "@utils/html";
-
-export function takeScreenshot(callback: any) {
-    const currentStream = STATES.currentStream!;
-    const $video = currentStream.$video;
-    const $canvas = currentStream.$screenshotCanvas;
-    if (!$video || !$canvas) {
-        return;
-    }
-
-    const $canvasContext = $canvas.getContext('2d')!;
-
-    $canvasContext.drawImage($video, 0, 0, $canvas.width, $canvas.height);
-
-    // Get data URL and pass to parent app
-    if (AppInterface) {
-        const data = $canvas.toDataURL('image/png').split(';base64,')[1];
-        AppInterface.saveScreenshot(currentStream.titleId, data);
-
-        // Free screenshot from memory
-        $canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
-
-        callback && callback();
-        return;
-    }
-
-    $canvas && $canvas.toBlob(blob => {
-        // Download screenshot
-        const now = +new Date;
-        const $anchor = CE<HTMLAnchorElement>('a', {
-            'download': `${currentStream.titleId}-${now}.png`,
-            'href': URL.createObjectURL(blob!),
-        });
-        $anchor.click();
-
-        // Free screenshot from memory
-        URL.revokeObjectURL($anchor.href);
-        $canvasContext.clearRect(0, 0, $canvas.width, $canvas.height);
-
-        callback && callback();
-    }, 'image/png');
-}
-
-
-export function setupScreenshotButton() {
-    const currentStream = STATES.currentStream!
-    currentStream.$screenshotCanvas = CE('canvas', {'class': 'bx-screenshot-canvas'});
-    document.documentElement.appendChild(currentStream.$screenshotCanvas!);
-
-    const delay = 2000;
-    const $btn = CE('div', {'class': 'bx-screenshot-button', 'data-showing': false});
-
-    let timeout: number | null;
-    const detectDbClick = (e: MouseEvent) => {
-        if (!currentStream.$video) {
-            timeout = null;
-            $btn.style.display = 'none';
-            return;
-        }
-
-        if (timeout) {
-            clearTimeout(timeout);
-            timeout = null;
-            $btn.setAttribute('data-capturing', 'true');
-
-            takeScreenshot(() => {
-                // Hide button
-                $btn.setAttribute('data-showing', 'false');
-                window.setTimeout(() => {
-                    if (!timeout) {
-                        $btn.setAttribute('data-capturing', 'false');
-                    }
-                }, 100);
-            });
-
-            return;
-        }
-
-        const isShowing = $btn.getAttribute('data-showing') === 'true';
-        if (!isShowing) {
-            // Show button
-            $btn.setAttribute('data-showing', 'true');
-            $btn.setAttribute('data-capturing', 'false');
-
-            timeout && clearTimeout(timeout);
-            timeout = window.setTimeout(() => {
-                timeout = null;
-                $btn.setAttribute('data-showing', 'false');
-                $btn.setAttribute('data-capturing', 'false');
-            }, delay);
-        }
-    }
-
-    $btn.addEventListener('mousedown', detectDbClick);
-    document.documentElement.appendChild($btn);
-}

src/modules/shortcuts/shortcut-microphone.ts

@@ -0,0 +1,33 @@
+import { t } from "@utils/translation";
+import { Toast } from "@utils/toast";
+
+
+export enum MicrophoneState {
+    REQUESTED = 'Requested',
+    ENABLED = 'Enabled',
+    MUTED = 'Muted',
+    NOT_ALLOWED = 'NotAllowed',
+    NOT_FOUND = 'NotFound',
+}
+
+export class MicrophoneShortcut {
+    static toggle(showToast: boolean = true): boolean {
+        if (!window.BX_EXPOSED.streamSession) {
+            return false;
+        }
+
+        const state = window.BX_EXPOSED.streamSession._microphoneState;
+        const enableMic = state === MicrophoneState.ENABLED ? false : true;
+
+        try {
+            window.BX_EXPOSED.streamSession.tryEnableChatAsync(enableMic);
+            showToast && Toast.show(t('microphone'), t(enableMic ? 'unmuted': 'muted'), {instant: true});
+
+            return enableMic;
+        } catch (e) {
+            console.log(e);
+        }
+
+        return false;
+    }
+}

src/modules/shortcuts/shortcut-sound.ts

@@ -0,0 +1,90 @@
+import { t } from "@utils/translation";
+import { STATES } from "@utils/global";
+import { PrefKey, getPref, setPref } from "@utils/preferences";
+import { Toast } from "@utils/toast";
+import { BxEvent } from "@/utils/bx-event";
+import { ceilToNearest, floorToNearest } from "@/utils/utils";
+
+export class SoundShortcut {
+    static adjustGainNodeVolume(amount: number): number {
+        if (!getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL)) {
+            return 0;
+        }
+
+        const currentValue = getPref(PrefKey.AUDIO_VOLUME);
+        let nearestValue: number;
+
+        if (amount > 0) {  // Increase
+            nearestValue = ceilToNearest(currentValue, amount);
+        } else {  // Decrease
+            nearestValue = floorToNearest(currentValue, -1 * amount);
+        }
+
+        let newValue: number;
+        if (currentValue !== nearestValue) {
+            newValue = nearestValue;
+        } else {
+            newValue = currentValue + amount;
+        }
+
+        newValue = setPref(PrefKey.AUDIO_VOLUME, newValue);
+        SoundShortcut.setGainNodeVolume(newValue);
+
+        // Show toast
+        Toast.show(`${t('stream')} ❯ ${t('volume')}`, newValue + '%', {instant: true});
+        BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
+                volume: newValue,
+            });
+
+        return newValue;
+    }
+
+    static setGainNodeVolume(value: number) {
+        STATES.currentStream.audioGainNode && (STATES.currentStream.audioGainNode.gain.value = value / 100);
+    }
+
+    static muteUnmute() {
+        if (getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && STATES.currentStream.audioGainNode) {
+            const gainValue = STATES.currentStream.audioGainNode.gain.value;
+            const settingValue = getPref(PrefKey.AUDIO_VOLUME);
+
+            let targetValue: number;
+            if (settingValue === 0) {  // settingValue is 0 => set to 100
+                targetValue = 100;
+                setPref(PrefKey.AUDIO_VOLUME, targetValue);
+                BxEvent.dispatch(window, BxEvent.GAINNODE_VOLUME_CHANGED, {
+                        volume: targetValue,
+                    });
+            } else if (gainValue === 0) {  // is being muted => set to settingValue
+                targetValue = settingValue;
+            } else {  // not being muted => mute
+                targetValue = 0;
+            }
+
+            let status: string;
+            if (targetValue === 0) {
+                status = t('muted');
+            } else {
+                status = targetValue + '%';
+            }
+
+            SoundShortcut.setGainNodeVolume(targetValue);
+            Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+            return;
+        }
+
+        let $media: HTMLMediaElement;
+
+        $media = document.querySelector('div[data-testid=media-container] audio') as HTMLAudioElement;
+        if (!$media) {
+            $media = document.querySelector('div[data-testid=media-container] video') as HTMLAudioElement;
+        }
+
+        if ($media) {
+            $media.muted = !$media.muted;
+
+            const status = $media.muted ? t('muted') : t('unmuted');
+            Toast.show(`${t('stream')} ❯ ${t('volume')}`, status, {instant: true});
+        }
+    }
+}

src/modules/shortcuts/shortcut-stream-ui.ts

@@ -0,0 +1,6 @@
+export class StreamUiShortcut {
+    static showHideStreamMenu() {
+        // Show menu
+        window.BX_EXPOSED.showStreamMenu && window.BX_EXPOSED.showStreamMenu();
+    }
+}

src/modules/stream-player.ts

@@ -0,0 +1,268 @@
+import { CE } from "@/utils/html";
+import { WebGL2Player } from "./player/webgl2-player";
+import { getPref, PrefKey } from "@/utils/preferences";
+import { Screenshot } from "@/utils/screenshot";
+import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
+import { STATES } from "@/utils/global";
+
+export type StreamPlayerOptions = Partial<{
+    processing: string,
+    sharpness: number,
+    saturation: number,
+    contrast: number,
+    brightness: number,
+}>;
+
+export class StreamPlayer {
+    #$video: HTMLVideoElement;
+    #playerType: StreamPlayerType = StreamPlayerType.VIDEO;
+
+    #options: StreamPlayerOptions = {};
+
+    #webGL2Player: WebGL2Player | null = null;
+
+    #$videoCss: HTMLStyleElement | null = null;
+    #$usmMatrix: SVGFEConvolveMatrixElement | null = null;
+
+    constructor($video: HTMLVideoElement, type: StreamPlayerType, options: StreamPlayerOptions) {
+        this.#setupVideoElements();
+
+        this.#$video = $video;
+        this.#options = options || {};
+        this.setPlayerType(type);
+    }
+
+    #setupVideoElements() {
+        this.#$videoCss = document.getElementById('bx-video-css') as HTMLStyleElement;
+        if (this.#$videoCss) {
+            this.#$usmMatrix = this.#$videoCss.querySelector('#bx-filter-usm-matrix') as any;
+            return;
+        }
+
+        const $fragment = document.createDocumentFragment();
+
+        this.#$videoCss = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
+        $fragment.appendChild(this.#$videoCss);
+
+        // Setup SVG filters
+        const $svg = CE('svg', {
+            id: 'bx-video-filters',
+            xmlns: 'http://www.w3.org/2000/svg',
+            class: 'bx-gone',
+        }, CE('defs', {xmlns: 'http://www.w3.org/2000/svg'},
+            CE('filter', {
+                    id: 'bx-filter-usm',
+                    xmlns: 'http://www.w3.org/2000/svg',
+                }, this.#$usmMatrix = CE('feConvolveMatrix', {
+                    id: 'bx-filter-usm-matrix',
+                    order: '3',
+                    xmlns: 'http://www.w3.org/2000/svg',
+                })),
+            ),
+        );
+        $fragment.appendChild($svg);
+        document.documentElement.appendChild($fragment);
+    }
+
+    #getVideoPlayerFilterStyle() {
+        const filters = [];
+
+        const sharpness = this.#options.sharpness || 0;
+        if (this.#options.processing === StreamVideoProcessing.USM && sharpness != 0) {
+            const level = (7 - ((sharpness / 2) - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
+            const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
+            this.#$usmMatrix?.setAttributeNS(null, 'kernelMatrix', matrix);
+
+            filters.push(`url(#bx-filter-usm)`);
+        }
+
+        const saturation = this.#options.saturation || 100;
+        if (saturation != 100) {
+            filters.push(`saturate(${saturation}%)`);
+        }
+
+        const contrast =  this.#options.contrast || 100;
+        if (contrast != 100) {
+            filters.push(`contrast(${contrast}%)`);
+        }
+
+        const brightness = this.#options.brightness || 100;
+        if (brightness != 100) {
+            filters.push(`brightness(${brightness}%)`);
+        }
+
+        return filters.join(' ');
+    }
+
+    #resizePlayer() {
+        const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
+        const $video = this.#$video;
+        const isNativeTouchGame = STATES.currentStream.titleInfo?.details.hasNativeTouchSupport;
+
+        let $webGL2Canvas;
+        if (this.#playerType == StreamPlayerType.WEBGL2) {
+            $webGL2Canvas = this.#webGL2Player?.getCanvas()!;
+        }
+
+        let targetWidth;
+        let targetHeight;
+        let targetObjectFit;
+
+        if (PREF_RATIO.includes(':')) {
+            const tmp = PREF_RATIO.split(':');
+
+            // Get preferred ratio
+            const videoRatio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
+
+            let width = 0;
+            let height = 0;
+
+            // Get parent's ratio
+            const parentRect = $video.parentElement!.getBoundingClientRect();
+            const parentRatio = parentRect.width / parentRect.height;
+
+            // Get target width & height
+            if (parentRatio > videoRatio) {
+                height = parentRect.height;
+                width = height * videoRatio;
+            } else {
+                width = parentRect.width;
+                height = width / videoRatio;
+            }
+
+            // Prevent floating points
+            width = Math.ceil(Math.min(parentRect.width, width));
+            height = Math.ceil(Math.min(parentRect.height, height));
+
+            $video.dataset.width = width.toString();
+            $video.dataset.height = height.toString();
+
+            // Update size
+            targetWidth = `${width}px`;
+            targetHeight = `${height}px`;
+            targetObjectFit = PREF_RATIO === '16:9' ? 'contain' : 'fill';
+        } else {
+            targetWidth = '100%';
+            targetHeight = '100%';
+            targetObjectFit = PREF_RATIO;
+
+            $video.dataset.width = window.innerWidth.toString();
+            $video.dataset.height = window.innerHeight.toString();
+        }
+
+        $video.style.width = targetWidth;
+        $video.style.height = targetHeight;
+        $video.style.objectFit = targetObjectFit;
+
+        // $video.style.padding = padding;
+
+        if ($webGL2Canvas) {
+            $webGL2Canvas.style.width = targetWidth;
+            $webGL2Canvas.style.height = targetHeight;
+            $webGL2Canvas.style.objectFit = targetObjectFit;
+        }
+
+        // Update video dimensions
+        if (isNativeTouchGame && this.#playerType == StreamPlayerType.WEBGL2) {
+            window.BX_EXPOSED.streamSession.updateDimensions();
+        }
+    }
+
+    setPlayerType(type: StreamPlayerType, refreshPlayer: boolean = false) {
+        if (this.#playerType !== type) {
+            // Switch from Video -> WebGL2
+            if (type === StreamPlayerType.WEBGL2) {
+                // Initialize WebGL2 player
+                if (!this.#webGL2Player) {
+                    this.#webGL2Player = new WebGL2Player(this.#$video);
+                } else {
+                    this.#webGL2Player.resume();
+                }
+
+                this.#$videoCss!.textContent = '';
+
+                this.#$video.classList.add('bx-pixel');
+            } else {
+                // Cleanup WebGL2 Player
+                this.#webGL2Player?.stop();
+
+                this.#$video.classList.remove('bx-pixel');
+            }
+        }
+
+        this.#playerType = type;
+        refreshPlayer && this.refreshPlayer();
+    }
+
+    setOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
+        this.#options = options;
+        refreshPlayer && this.refreshPlayer();
+    }
+
+    updateOptions(options: StreamPlayerOptions, refreshPlayer: boolean = false) {
+        this.#options = Object.assign(this.#options, options);
+        refreshPlayer && this.refreshPlayer();
+    }
+
+    getPlayerElement(playerType?: StreamPlayerType) {
+        if (typeof playerType === 'undefined') {
+            playerType = this.#playerType;
+        }
+
+        if (playerType === StreamPlayerType.WEBGL2) {
+            return this.#webGL2Player?.getCanvas();
+        }
+
+        return this.#$video;
+    }
+
+    getWebGL2Player() {
+        return this.#webGL2Player;
+    }
+
+    refreshPlayer() {
+        if (this.#playerType === StreamPlayerType.WEBGL2) {
+            const options = this.#options;
+            const webGL2Player = this.#webGL2Player!;
+
+            if (options.processing === StreamVideoProcessing.USM) {
+                webGL2Player.setFilter(1);
+            } else {
+                webGL2Player.setFilter(2);
+            }
+
+            Screenshot.updateCanvasFilters('none');
+
+            webGL2Player.setSharpness(options.sharpness || 0);
+            webGL2Player.setSaturation(options.saturation || 100);
+            webGL2Player.setContrast(options.contrast || 100);
+            webGL2Player.setBrightness(options.brightness || 100);
+        } else {
+            let filters = this.#getVideoPlayerFilterStyle();
+            let videoCss = '';
+            if (filters) {
+                videoCss += `filter: ${filters} !important;`;
+            }
+
+            // Apply video filters to screenshots
+            if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
+                Screenshot.updateCanvasFilters(filters);
+            }
+
+            let css = '';
+            if (videoCss) {
+                css = `#game-stream video { ${videoCss} }`;
+            }
+
+            this.#$videoCss!.textContent = css;
+        }
+
+        this.#resizePlayer();
+    }
+
+    destroy() {
+         // Cleanup WebGL2 Player
+         this.#webGL2Player?.destroy();
+         this.#webGL2Player = null;
+    }
+}

src/modules/stream/stream-badges.ts

@@ -1,85 +1,105 @@
 import { t } from "@utils/translation";
 import { BxEvent } from "@utils/bx-event";
-import { CE } from "@utils/html";
+import { CE, createSvgIcon } from "@utils/html";
 import { STATES } from "@utils/global";
+import { BxLogger } from "@/utils/bx-logger";
+import { BxIcon } from "@/utils/bx-icon";
 
 enum StreamBadge {
     PLAYTIME = 'playtime',
     BATTERY = 'battery',
-    IN = 'in',
-    OUT = 'out',
+    DOWNLOAD = 'in',
+    UPLOAD = 'out',
 
     SERVER = 'server',
     VIDEO = 'video',
     AUDIO = 'audio',
+}
 
-    BREAK = 'break',
+const StreamBadgeIcon: Partial<{[key in StreamBadge]: any}> = {
+    [StreamBadge.PLAYTIME]: BxIcon.PLAYTIME,
+    [StreamBadge.VIDEO]: BxIcon.DISPLAY,
+    [StreamBadge.BATTERY]: BxIcon.BATTERY,
+    [StreamBadge.DOWNLOAD]: BxIcon.DOWNLOAD,
+    [StreamBadge.UPLOAD]: BxIcon.UPLOAD,
+    [StreamBadge.SERVER]: BxIcon.SERVER,
+    [StreamBadge.AUDIO]: BxIcon.AUDIO,
 }
 
 export class StreamBadges {
-    static ipv6 = false;
-    static resolution?: {width: number, height: number} | null = null;
-    static video?: {codec: string, profile?: string | null} | null = null;
-    static audio?: {codec: string, bitrate: number} | null = null;
-    static fps = 0;
-    static region = '';
-
-    static startBatteryLevel = 100;
-    static startTimestamp = 0;
-
-    static #cachedDoms: {[index: string]: HTMLElement} = {};
-
-    static #interval?: number | null;
-    static readonly #REFRESH_INTERVAL = 3000;
-
-    static #renderBadge(name: StreamBadge, value: string, color: string) {
-        if (name === StreamBadge.BREAK) {
-            return CE('div', {'style': 'display: block'});
+    private static instance: StreamBadges;
+    public static getInstance(): StreamBadges {
+        if (!StreamBadges.instance) {
+            StreamBadges.instance = new StreamBadges();
         }
 
+        return StreamBadges.instance;
+    }
+
+    #ipv6 = false;
+    #resolution?: {width: number, height: number} | null = null;
+    #video?: {codec: string, profile?: string | null} | null = null;
+    #audio?: {codec: string, bitrate: number} | null = null;
+    #region = '';
+
+    startBatteryLevel = 100;
+    startTimestamp = 0;
+
+    #$container: HTMLElement | undefined;
+    #cachedDoms: Partial<{[key in StreamBadge]: HTMLElement}> = {};
+
+    #interval?: number | null;
+    readonly #REFRESH_INTERVAL = 3000;
+
+    setRegion(region: string) {
+        this.#region = region;
+    }
+
+    #renderBadge(name: StreamBadge, value: string, color: string) {
         let $badge;
-        if (StreamBadges.#cachedDoms[name]) {
-            $badge = StreamBadges.#cachedDoms[name];
+        if (this.#cachedDoms[name]) {
+            $badge = this.#cachedDoms[name]!;
             $badge.lastElementChild!.textContent = value;
             return $badge;
         }
 
-        $badge = CE('div', {'class': 'bx-badge'},
-                    CE('span', {'class': 'bx-badge-name'}, t(`badge-${name}`)),
-                    CE('span', {'class': 'bx-badge-value', 'style': `background-color: ${color}`}, value));
+        $badge = CE('div', {'class': 'bx-badge', 'title': t(`badge-${name}`)},
+            CE('span', {'class': 'bx-badge-name'}, createSvgIcon(StreamBadgeIcon[name])),
+            CE('span', {'class': 'bx-badge-value', 'style': `background-color: ${color}`}, value),
+        );
 
         if (name === StreamBadge.BATTERY) {
             $badge.classList.add('bx-badge-battery');
         }
 
-        StreamBadges.#cachedDoms[name] = $badge;
+        this.#cachedDoms[name] = $badge;
         return $badge;
     }
 
-    static async #updateBadges(forceUpdate: boolean) {
-        if (!forceUpdate && !document.querySelector('.bx-badges')) {
-            StreamBadges.#stop();
+    async #updateBadges(forceUpdate = false) {
+        if (!this.#$container || (!forceUpdate && !this.#$container.isConnected)) {
+            this.#stop();
             return;
         }
 
         // Playtime
         let now = +new Date;
-        const diffSeconds = Math.ceil((now - StreamBadges.startTimestamp) / 1000);
-        const playtime = StreamBadges.#secondsToHm(diffSeconds);
+        const diffSeconds = Math.ceil((now - this.startTimestamp) / 1000);
+        const playtime = this.#secondsToHm(diffSeconds);
 
         // Battery
         let batteryLevel = '100%';
         let batteryLevelInt = 100;
         let isCharging = false;
-        if ('getBattery' in navigator) {
+        if (STATES.browser.capabilities.batteryApi) {
             try {
                 const bm = await (navigator as NavigatorBattery).getBattery();
                 isCharging = bm.charging;
                 batteryLevelInt = Math.round(bm.level * 100);
                 batteryLevel = `${batteryLevelInt}%`;
 
-                if (batteryLevelInt != StreamBadges.startBatteryLevel) {
-                    const diffLevel = Math.round(batteryLevelInt - StreamBadges.startBatteryLevel);
+                if (batteryLevelInt != this.startBatteryLevel) {
+                    const diffLevel = Math.round(batteryLevelInt - this.startBatteryLevel);
                     const sign = diffLevel > 0 ? '+' : '';
                     batteryLevel += ` (${sign}${diffLevel}%)`;
                 }
@@ -97,8 +117,8 @@ export class StreamBadges {
         });
 
         const badges = {
-            [StreamBadge.IN]: totalIn ? StreamBadges.#humanFileSize(totalIn) : null,
-            [StreamBadge.OUT]: totalOut ? StreamBadges.#humanFileSize(totalOut) : null,
+            [StreamBadge.DOWNLOAD]: totalIn ? this.#humanFileSize(totalIn) : null,
+            [StreamBadge.UPLOAD]: totalOut ? this.#humanFileSize(totalOut) : null,
             [StreamBadge.PLAYTIME]: playtime,
             [StreamBadge.BATTERY]: batteryLevel,
         };
@@ -110,56 +130,76 @@ export class StreamBadges {
                 continue;
             }
 
-            const $elm = StreamBadges.#cachedDoms[name];
+            const $elm = this.#cachedDoms[name]!;
             $elm && ($elm.lastElementChild!.textContent = value);
 
             if (name === StreamBadge.BATTERY) {
-                // Show charging status
-                $elm.setAttribute('data-charging', isCharging.toString());
-
-                if (StreamBadges.startBatteryLevel === 100 && batteryLevelInt === 100) {
-                    $elm.style.display = 'none';
+                if (this.startBatteryLevel === 100 && batteryLevelInt === 100) {
+                    // Hide battery badge when the battery is 100%
+                    $elm.classList.add('bx-gone');
                 } else {
-                    $elm.removeAttribute('style');
+                    // Show charging status
+                    $elm.dataset.charging = isCharging.toString()
+                    $elm.classList.remove('bx-gone');
                 }
             }
         }
     }
 
-    static #stop() {
-        StreamBadges.#interval && clearInterval(StreamBadges.#interval);
-        StreamBadges.#interval = null;
+    async #start() {
+        await this.#updateBadges(true);
+        this.#stop();
+        this.#interval = window.setInterval(this.#updateBadges.bind(this), this.#REFRESH_INTERVAL);
     }
 
-    static #secondsToHm(seconds: number) {
-        const h = Math.floor(seconds / 3600);
-        const m = Math.floor(seconds % 3600 / 60) + 1;
+    #stop() {
+        this.#interval && clearInterval(this.#interval);
+        this.#interval = null;
+    }
 
-        const hDisplay = h > 0 ? `${h}h`: '';
-        const mDisplay = m > 0 ? `${m}m`: '';
-        return hDisplay + mDisplay;
+    #secondsToHm(seconds: number) {
+        let h = Math.floor(seconds / 3600);
+        let m = Math.floor(seconds % 3600 / 60) + 1;
+
+        if (m === 60) {
+            h += 1;
+            m = 0;
+        }
+
+        const output = [];
+        h > 0 && output.push(`${h}h`);
+        m > 0 && output.push(`${m}m`);
+
+        return output.join(' ');
     }
 
     // https://stackoverflow.com/a/20732091
-    static #humanFileSize(size: number) {
-        const units = ['B', 'kB', 'MB', 'GB', 'TB'];
+    #humanFileSize(size: number) {
+        const units = ['B', 'KB', 'MB', 'GB', 'TB'];
 
-        let i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
+        const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
         return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
     }
 
-    static async render() {
-        // Video
-        let video = '';
-        if (StreamBadges.resolution) {
-            video = `${StreamBadges.resolution.height}p`;
+    async render() {
+        if (this.#$container) {
+            this.#start();
+            return this.#$container;
         }
 
-        if (StreamBadges.video) {
+        await this.#getServerStats();
+
+        // Video
+        let video = '';
+        if (this.#resolution) {
+            video = `${this.#resolution.height}p`;
+        }
+
+        if (this.#video) {
             video && (video += '/');
-            video += StreamBadges.video.codec;
-            if (StreamBadges.video.profile) {
-                const profile = StreamBadges.video.profile;
+            video += this.#video.codec;
+            if (this.#video.profile) {
+                const profile = this.#video.profile;
 
                 let quality = profile;
                 if (profile.startsWith('4d')) {
@@ -176,66 +216,152 @@ export class StreamBadges {
 
         // Audio
         let audio;
-        if (StreamBadges.audio) {
-            audio = StreamBadges.audio.codec;
-            const bitrate = StreamBadges.audio.bitrate / 1000;
+        if (this.#audio) {
+            audio = this.#audio.codec;
+            const bitrate = this.#audio.bitrate / 1000;
             audio += ` (${bitrate} kHz)`;
         }
 
         // Battery
         let batteryLevel = '';
-        if ('getBattery' in navigator) {
+        if (STATES.browser.capabilities.batteryApi) {
             batteryLevel = '100%';
         }
 
         // Server + Region
-        let server = StreamBadges.region;
-        server += '@' + (StreamBadges.ipv6 ? 'IPv6' : 'IPv4');
+        let server = this.#region;
+        server += '@' + (this.#ipv6 ? 'IPv6' : 'IPv4');
 
         const BADGES = [
             [StreamBadge.PLAYTIME, '1m', '#ff004d'],
             [StreamBadge.BATTERY, batteryLevel, '#00b543'],
-            [StreamBadge.IN, StreamBadges.#humanFileSize(0), '#29adff'],
-            [StreamBadge.OUT, StreamBadges.#humanFileSize(0), '#ff77a8'],
-            [StreamBadge.BREAK],
+            [StreamBadge.DOWNLOAD, this.#humanFileSize(0), '#29adff'],
+            [StreamBadge.UPLOAD, this.#humanFileSize(0), '#ff77a8'],
             [StreamBadge.SERVER, server, '#ff6c24'],
             video ? [StreamBadge.VIDEO, video, '#742f29'] : null,
             audio ? [StreamBadge.AUDIO, audio, '#5f574f'] : null,
         ];
 
-        const $wrapper = CE('div', {'class': 'bx-badges'});
+        const $container = CE('div', {'class': 'bx-badges'});
         BADGES.forEach(item => {
             if (!item) {
                 return;
             }
 
-            const $badge = StreamBadges.#renderBadge(...(item as [StreamBadge, string, string]));
-            $wrapper.appendChild($badge);
+            const $badge = this.#renderBadge(...(item as [StreamBadge, string, string]));
+            $container.appendChild($badge);
         });
 
-        await StreamBadges.#updateBadges(true);
-        StreamBadges.#stop();
-        StreamBadges.#interval = window.setInterval(StreamBadges.#updateBadges, StreamBadges.#REFRESH_INTERVAL);
+        this.#$container = $container;
+        await this.#start();
 
-        return $wrapper;
+        return $container;
+    }
+
+    async #getServerStats() {
+        const stats = await STATES.currentStream.peerConnection!.getStats();
+
+        const allVideoCodecs: {[index: string]: RTCBasicStat} = {};
+        let videoCodecId;
+
+        const allAudioCodecs: {[index: string]: RTCBasicStat} = {};
+        let audioCodecId;
+
+        const allCandidates: {[index: string]: string} = {};
+        let candidateId;
+
+        stats.forEach((stat: RTCBasicStat) => {
+            if (stat.type === 'codec') {
+                const mimeType = stat.mimeType.split('/')[0];
+                if (mimeType === 'video') {
+                    // Store all video stats
+                    allVideoCodecs[stat.id] = stat;
+                } else if (mimeType === 'audio') {
+                    // Store all audio stats
+                    allAudioCodecs[stat.id] = stat;
+                }
+            } else if (stat.type === 'inbound-rtp' && stat.packetsReceived > 0) {
+                // Get the codecId of the video/audio track currently being used
+                if (stat.kind === 'video') {
+                    videoCodecId = stat.codecId;
+                } else if (stat.kind === 'audio') {
+                    audioCodecId = stat.codecId;
+                }
+            } else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
+                candidateId = stat.remoteCandidateId;
+            } else if (stat.type === 'remote-candidate') {
+                allCandidates[stat.id] = stat.address;
+            }
+        });
+
+        // Get video codec from codecId
+        if (videoCodecId) {
+            const videoStat = allVideoCodecs[videoCodecId];
+            const video: any = {
+                codec: videoStat.mimeType.substring(6),
+            };
+
+            if (video.codec === 'H264') {
+                const match = /profile-level-id=([0-9a-f]{6})/.exec(videoStat.sdpFmtpLine);
+                video.profile = match ? match[1] : null;
+            }
+
+            this.#video = video;
+        }
+
+        // Get audio codec from codecId
+        if (audioCodecId) {
+            const audioStat = allAudioCodecs[audioCodecId];
+            this.#audio = {
+                codec: audioStat.mimeType.substring(6),
+                bitrate: audioStat.clockRate,
+            }
+        }
+
+        // Get server type
+        if (candidateId) {
+            BxLogger.info('candidate', candidateId, allCandidates);
+            this.#ipv6 = allCandidates[candidateId].includes(':');
+        }
     }
 
     static setupEvents() {
         window.addEventListener(BxEvent.STREAM_PLAYING, e => {
             const $video = (e as any).$video;
+            const streamBadges = StreamBadges.getInstance();
 
-            StreamBadges.resolution = {
+            streamBadges.#resolution = {
                 width: $video.videoWidth,
-                height: $video.videoHeight
+                height: $video.videoHeight,
             };
-            StreamBadges.startTimestamp = +new Date;
+            streamBadges.startTimestamp = +new Date;
 
             // Get battery level
             try {
-                'getBattery' in navigator && (navigator as NavigatorBattery).getBattery().then(bm => {
-                    StreamBadges.startBatteryLevel = Math.round(bm.level * 100);
+                STATES.browser.capabilities.batteryApi && (navigator as NavigatorBattery).getBattery().then(bm => {
+                    streamBadges.startBatteryLevel = Math.round(bm.level * 100);
                 });
             } catch(e) {}
         });
+
+        /*
+        Don't do this until xCloud remove the Stream Menu page
+
+        window.addEventListener(BxEvent.XCLOUD_GUIDE_SHOWN, async e => {
+            const where = (e as any).where as XcloudGuideWhere;
+
+            if (where !== XcloudGuideWhere.HOME || !STATES.isPlaying) {
+                return;
+            }
+
+            const $btnQuit = document.querySelector('#gamepass-dialog-root a[class*=QuitGameButton]');
+            if (!$btnQuit) {
+                return;
+            }
+
+            // Add badges
+            $btnQuit.insertAdjacentElement('beforebegin', await StreamBadges.getInstance().render());
+        });
+        */
     }
 }

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

@@ -0,0 +1,54 @@
+import { StreamPlayerType, StreamVideoProcessing } from "@enums/stream-player";
+import { STATES } from "@utils/global";
+import { getPref, PrefKey, setPref } from "@utils/preferences";
+import { UserAgent } from "@utils/user-agent";
+import type { StreamPlayerOptions } from "../stream-player";
+
+export function onChangeVideoPlayerType() {
+    const playerType = getPref(PrefKey.VIDEO_PLAYER_TYPE);
+    const $videoProcessing = document.getElementById('bx_setting_video_processing') as HTMLSelectElement;
+    const $videoSharpness = document.getElementById('bx_setting_video_sharpness') as HTMLElement;
+
+    let isDisabled = false;
+
+    if (playerType === StreamPlayerType.WEBGL2) {
+        ($videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement).disabled = false;
+    } else {
+        // Only allow USM when player type is Video
+        $videoProcessing.value = StreamVideoProcessing.USM;
+        setPref(PrefKey.VIDEO_PROCESSING, StreamVideoProcessing.USM);
+
+        ($videoProcessing.querySelector(`option[value=${StreamVideoProcessing.CAS}]`) as HTMLOptionElement).disabled = true;
+
+        if (UserAgent.isSafari()) {
+            isDisabled = true;
+        }
+    }
+
+    $videoProcessing.disabled = isDisabled;
+    $videoSharpness.dataset.disabled = isDisabled.toString();
+
+    updateVideoPlayer();
+}
+
+
+export function updateVideoPlayer() {
+    const streamPlayer = STATES.currentStream.streamPlayer;
+    if (!streamPlayer) {
+        return;
+    }
+
+    const options = {
+        processing: getPref(PrefKey.VIDEO_PROCESSING),
+        sharpness: getPref(PrefKey.VIDEO_SHARPNESS),
+        saturation: getPref(PrefKey.VIDEO_SATURATION),
+        contrast: getPref(PrefKey.VIDEO_CONTRAST),
+        brightness: getPref(PrefKey.VIDEO_BRIGHTNESS),
+    } satisfies StreamPlayerOptions;
+
+    streamPlayer.setPlayerType(getPref(PrefKey.VIDEO_PLAYER_TYPE));
+    streamPlayer.updateOptions(options);
+    streamPlayer.refreshPlayer();
+}
+
+window.addEventListener('resize', updateVideoPlayer);

src/modules/stream/stream-settings.ts

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

src/modules/stream/stream-stats.ts

@@ -1,11 +1,8 @@
-import { PrefKey } from "@utils/preferences"
+import { PrefKey, getPref } from "@utils/preferences"
 import { BxEvent } from "@utils/bx-event"
-import { getPref } from "@utils/preferences"
-import { StreamBadges } from "./stream-badges"
 import { CE } from "@utils/html"
 import { t } from "@utils/translation"
 import { STATES } from "@utils/global"
-import { BxLogger } from "@utils/bx-logger"
 
 export enum StreamStat {
     PING = 'ping',
@@ -17,272 +14,238 @@ export enum StreamStat {
 };
 
 export class StreamStats {
-    static #interval?: number | null;
-    static #updateInterval = 1000;
+    private static instance: StreamStats;
+    public static getInstance(): StreamStats {
+        if (!StreamStats.instance) {
+            StreamStats.instance = new StreamStats();
+        }
 
-    static #$container: HTMLElement;
-    static #$fps: HTMLElement;
-    static #$ping: HTMLElement;
-    static #$dt: HTMLElement;
-    static #$pl: HTMLElement;
-    static #$fl: HTMLElement;
-    static #$br: HTMLElement;
+        return StreamStats.instance;
+    }
 
-    static #lastStat?: RTCBasicStat | null;
+    #timeoutId?: number | null;
+    readonly #updateInterval = 1000;
 
-    static #quickGlanceObserver?: MutationObserver | null;
+    #$container: HTMLElement | undefined;
+    #$fps: HTMLElement | undefined;
+    #$ping: HTMLElement | undefined;
+    #$dt: HTMLElement | undefined;
+    #$pl: HTMLElement | undefined;
+    #$fl: HTMLElement | undefined;
+    #$br: HTMLElement | undefined;
 
-    static start(glancing=false) {
-        if (!StreamStats.isHidden() || (glancing && StreamStats.isGlancing())) {
+    #lastVideoStat?: RTCBasicStat | null;
+
+    #quickGlanceObserver?: MutationObserver | null;
+
+    constructor() {
+        this.#render();
+    }
+
+    start(glancing=false) {
+        if (!this.isHidden() || (glancing && this.isGlancing())) {
             return;
         }
 
-        StreamStats.#$container.classList.remove('bx-gone');
-        StreamStats.#$container.setAttribute('data-display', glancing ? 'glancing' : 'fixed');
-
-        StreamStats.#interval = window.setInterval(StreamStats.update, StreamStats.#updateInterval);
+        if (this.#$container) {
+            this.#$container.classList.remove('bx-gone');
+            this.#$container.dataset.display = glancing ? 'glancing' : 'fixed';
         }
 
-    static stop(glancing=false) {
-        if (glancing && !StreamStats.isGlancing()) {
+        this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval);
+    }
+
+    stop(glancing=false) {
+        if (glancing && !this.isGlancing()) {
             return;
         }
 
-        StreamStats.#interval && clearInterval(StreamStats.#interval);
-        StreamStats.#interval = null;
-        StreamStats.#lastStat = null;
+        this.#timeoutId && clearTimeout(this.#timeoutId);
+        this.#timeoutId = null;
+        this.#lastVideoStat = null;
 
-        if (StreamStats.#$container) {
-            StreamStats.#$container.removeAttribute('data-display');
-            StreamStats.#$container.classList.add('bx-gone');
+        if (this.#$container) {
+            this.#$container.removeAttribute('data-display');
+            this.#$container.classList.add('bx-gone');
         }
     }
 
-    static toggle() {
-        if (StreamStats.isGlancing()) {
-            StreamStats.#$container.setAttribute('data-display', 'fixed');
+    toggle() {
+        if (this.isGlancing()) {
+            this.#$container && (this.#$container.dataset.display = 'fixed');
         } else {
-            StreamStats.isHidden() ? StreamStats.start() : StreamStats.stop();
+            this.isHidden() ? this.start() : this.stop();
         }
     }
 
-    static onStoppedPlaying() {
-        StreamStats.stop();
-        StreamStats.quickGlanceStop();
-        StreamStats.hideSettingsUi();
+    onStoppedPlaying() {
+        this.stop();
+        this.quickGlanceStop();
+        this.hideSettingsUi();
     }
 
-    static isHidden = () => StreamStats.#$container && StreamStats.#$container.classList.contains('bx-gone');
-    static isGlancing = () => StreamStats.#$container && StreamStats.#$container.getAttribute('data-display') === 'glancing';
+    isHidden = () => this.#$container && this.#$container.classList.contains('bx-gone');
+    isGlancing = () => this.#$container && this.#$container.dataset.display === 'glancing';
 
-    static quickGlanceSetup() {
-        if (StreamStats.#quickGlanceObserver) {
+    quickGlanceSetup() {
+        if (!STATES.isPlaying || this.#quickGlanceObserver) {
             return;
         }
 
         const $uiContainer = document.querySelector('div[data-testid=ui-container]')!;
-        StreamStats.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
+        if (!$uiContainer) {
+            return;
+        }
+
+        this.#quickGlanceObserver = new MutationObserver((mutationList, observer) => {
             for (let record of mutationList) {
                 if (record.attributeName && record.attributeName === 'aria-expanded') {
                     const expanded = (record.target as HTMLElement).ariaExpanded;
                     if (expanded === 'true') {
-                        StreamStats.isHidden() && StreamStats.start(true);
+                        this.isHidden() && this.start(true);
                     } else {
-                        StreamStats.stop(true);
+                        this.stop(true);
                     }
                 }
             }
         });
 
-        StreamStats.#quickGlanceObserver.observe($uiContainer, {
+        this.#quickGlanceObserver.observe($uiContainer, {
             attributes: true,
             attributeFilter: ['aria-expanded'],
             subtree: true,
         });
     }
 
-    static quickGlanceStop() {
-        StreamStats.#quickGlanceObserver && StreamStats.#quickGlanceObserver.disconnect();
-        StreamStats.#quickGlanceObserver = null;
+    quickGlanceStop() {
+        this.#quickGlanceObserver && this.#quickGlanceObserver.disconnect();
+        this.#quickGlanceObserver = null;
     }
 
-    static update() {
-        if (StreamStats.isHidden() || !STATES.currentStream.peerConnection) {
-            StreamStats.onStoppedPlaying();
+    async #update() {
+        if (this.isHidden() || !STATES.currentStream.peerConnection) {
+            this.onStoppedPlaying();
             return;
         }
 
+        this.#timeoutId = null;
+        const startTime = performance.now();
+
         const PREF_STATS_CONDITIONAL_FORMATTING = getPref(PrefKey.STATS_CONDITIONAL_FORMATTING);
-        STATES.currentStream.peerConnection.getStats().then(stats => {
-            stats.forEach(stat => {
+
+        const stats = await STATES.currentStream.peerConnection.getStats();
         let grade = '';
+
+        stats.forEach(stat => {
             if (stat.type === 'inbound-rtp' && stat.kind === 'video') {
                 // FPS
-                    StreamStats.#$fps.textContent = stat.framesPerSecond || 0;
+                this.#$fps!.textContent = stat.framesPerSecond || 0;
 
                 // Packets Lost
-                    const packetsLost = stat.packetsLost;
+                const packetsLost = Math.max(0, stat.packetsLost);  // packetsLost can be negative, but we don't care about that
                 const packetsReceived = stat.packetsReceived;
                 const packetsLostPercentage = (packetsLost * 100 / ((packetsLost + packetsReceived) || 1)).toFixed(2);
-                    StreamStats.#$pl.textContent = packetsLostPercentage === '0.00' ? packetsLost : `${packetsLost} (${packetsLostPercentage}%)`;
+                this.#$pl!.textContent = packetsLostPercentage === '0.00' ? packetsLost.toString() : `${packetsLost} (${packetsLostPercentage}%)`;
 
-                    // Frames Dropped
+                // Frames dropped
                 const framesDropped = stat.framesDropped;
                 const framesReceived = stat.framesReceived;
                 const framesDroppedPercentage = (framesDropped * 100 / ((framesDropped + framesReceived) || 1)).toFixed(2);
-                    StreamStats.#$fl.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
+                this.#$fl!.textContent = framesDroppedPercentage === '0.00' ? framesDropped : `${framesDropped} (${framesDroppedPercentage}%)`;
 
-                    if (StreamStats.#lastStat) {
-                        const lastStat = StreamStats.#lastStat;
+                if (!this.#lastVideoStat) {
+                    this.#lastVideoStat = stat;
+                    return;
+                }
+
+                const lastStat = this.#lastVideoStat;
                 // Bitrate
                 const timeDiff = stat.timestamp - lastStat.timestamp;
                 const bitrate = 8 * (stat.bytesReceived - lastStat.bytesReceived) / timeDiff / 1000;
-                        StreamStats.#$br.textContent = `${bitrate.toFixed(2)} Mbps`;
+                this.#$br!.textContent = `${bitrate.toFixed(2)} Mbps`;
 
                 // Decode time
                 const totalDecodeTimeDiff = stat.totalDecodeTime - lastStat.totalDecodeTime;
                 const framesDecodedDiff = stat.framesDecoded - lastStat.framesDecoded;
                 const currentDecodeTime = totalDecodeTimeDiff / framesDecodedDiff * 1000;
-                        StreamStats.#$dt.textContent = `${currentDecodeTime.toFixed(2)}ms`;
+
+                if (isNaN(currentDecodeTime)) {
+                    this.#$dt!.textContent = '??ms';
+                } else {
+                    this.#$dt!.textContent = `${currentDecodeTime.toFixed(2)}ms`;
+                }
 
                 if (PREF_STATS_CONDITIONAL_FORMATTING) {
                     grade = (currentDecodeTime > 12) ? 'bad' : (currentDecodeTime > 9) ? 'ok' : (currentDecodeTime > 6) ? 'good' : '';
-                        }
-                        StreamStats.#$dt.setAttribute('data-grade', grade);
+                    this.#$dt!.dataset.grade = grade;
                 }
 
-                    StreamStats.#lastStat = stat;
+                this.#lastVideoStat = stat;
             } else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
                 // Round Trip Time
-                    const roundTripTime = typeof stat.currentRoundTripTime !== 'undefined' ? stat.currentRoundTripTime * 1000 : -1;
-                    StreamStats.#$ping.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
+                const roundTripTime = !!stat.currentRoundTripTime ? stat.currentRoundTripTime * 1000 : -1;
+                this.#$ping!.textContent = roundTripTime === -1 ? '???' : roundTripTime.toString();
 
                 if (PREF_STATS_CONDITIONAL_FORMATTING) {
                     grade = (roundTripTime > 100) ? 'bad' : (roundTripTime > 75) ? 'ok' : (roundTripTime > 40) ? 'good' : '';
+                    this.#$ping!.dataset.grade = grade;
                 }
-                    StreamStats.#$ping.setAttribute('data-grade', grade);
             }
         });
-        });
+
+        const lapsedTime = performance.now() - startTime;
+        this.#timeoutId = window.setTimeout(this.#update.bind(this), this.#updateInterval - lapsedTime);
     }
 
-    static refreshStyles() {
+    refreshStyles() {
         const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS);
         const PREF_POSITION = getPref(PrefKey.STATS_POSITION);
         const PREF_TRANSPARENT = getPref(PrefKey.STATS_TRANSPARENT);
         const PREF_OPACITY = getPref(PrefKey.STATS_OPACITY);
         const PREF_TEXT_SIZE = getPref(PrefKey.STATS_TEXT_SIZE);
 
-        const $container = StreamStats.#$container;
-        $container.setAttribute('data-stats', '[' + PREF_ITEMS.join('][') + ']');
-        $container.setAttribute('data-position', PREF_POSITION);
-        $container.setAttribute('data-transparent', PREF_TRANSPARENT);
+        const $container = this.#$container!;
+        $container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
+        $container.dataset.position = PREF_POSITION;
+        $container.dataset.transparent = PREF_TRANSPARENT;
         $container.style.opacity = PREF_OPACITY + '%';
         $container.style.fontSize = PREF_TEXT_SIZE;
     }
 
-    static hideSettingsUi() {
-        if (StreamStats.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE)) {
-            StreamStats.stop();
+    hideSettingsUi() {
+        if (this.isGlancing() && !getPref(PrefKey.STATS_QUICK_GLANCE)) {
+            this.stop();
         }
     }
 
-    static render() {
-        if (StreamStats.#$container) {
-            return;
-        }
-
-        const STATS = {
-            [StreamStat.PING]: [t('stat-ping'), StreamStats.#$ping = CE('span', {}, '0')],
-            [StreamStat.FPS]: [t('stat-fps'), StreamStats.#$fps = CE('span', {}, '0')],
-            [StreamStat.BITRATE]: [t('stat-bitrate'), StreamStats.#$br = CE('span', {}, '0 Mbps')],
-            [StreamStat.DECODE_TIME]: [t('stat-decode-time'), StreamStats.#$dt = CE('span', {}, '0ms')],
-            [StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), StreamStats.#$pl = CE('span', {}, '0')],
-            [StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), StreamStats.#$fl = CE('span', {}, '0')],
+    #render() {
+        const stats = {
+            [StreamStat.PING]: [t('stat-ping'), this.#$ping = CE('span', {}, '0')],
+            [StreamStat.FPS]: [t('stat-fps'), this.#$fps = CE('span', {}, '0')],
+            [StreamStat.BITRATE]: [t('stat-bitrate'), this.#$br = CE('span', {}, '0 Mbps')],
+            [StreamStat.DECODE_TIME]: [t('stat-decode-time'), this.#$dt = CE('span', {}, '0ms')],
+            [StreamStat.PACKETS_LOST]: [t('stat-packets-lost'), this.#$pl = CE('span', {}, '0')],
+            [StreamStat.FRAMES_LOST]: [t('stat-frames-lost'), this.#$fl = CE('span', {}, '0')],
         };
 
         const $barFragment = document.createDocumentFragment();
-        let statKey: keyof typeof STATS
-        for (statKey in STATS) {
-            const $div = CE('div', {'class': `bx-stat-${statKey}`, title: STATS[statKey][0]}, CE('label', {}, statKey.toUpperCase()), STATS[statKey][1]);
+        let statKey: keyof typeof stats;
+        for (statKey in stats) {
+            const $div = CE('div', {
+                    'class': `bx-stat-${statKey}`,
+                    title: stats[statKey][0]
+                },
+                CE('label', {}, statKey.toUpperCase()),
+                stats[statKey][1],
+            );
+
             $barFragment.appendChild($div);
         }
 
-        StreamStats.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
-        document.documentElement.appendChild(StreamStats.#$container);
+        this.#$container = CE('div', {'class': 'bx-stats-bar bx-gone'}, $barFragment);
+        this.refreshStyles();
 
-        StreamStats.refreshStyles();
-    }
-
-    static getServerStats() {
-        STATES.currentStream.peerConnection && STATES.currentStream.peerConnection.getStats().then(stats => {
-            const allVideoCodecs: {[index: string]: RTCBasicStat} = {};
-            let videoCodecId;
-
-            const allAudioCodecs: {[index: string]: RTCBasicStat} = {};
-            let audioCodecId;
-
-            const allCandidates: {[index: string]: string} = {};
-            let candidateId;
-
-            stats.forEach((stat: RTCBasicStat) => {
-                if (stat.type === 'codec') {
-                    const mimeType = stat.mimeType.split('/');
-                    if (mimeType[0] === 'video') {
-                        // Store all video stats
-                        allVideoCodecs[stat.id] = stat;
-                    } else if (mimeType[0] === 'audio') {
-                        // Store all audio stats
-                        allAudioCodecs[stat.id] = stat;
-                    }
-                } else if (stat.type === 'inbound-rtp' && stat.packetsReceived > 0) {
-                    // Get the codecId of the video/audio track currently being used
-                    if (stat.kind === 'video') {
-                        videoCodecId = stat.codecId;
-                    } else if (stat.kind === 'audio') {
-                        audioCodecId = stat.codecId;
-                    }
-                } else if (stat.type === 'candidate-pair' && stat.packetsReceived > 0 && stat.state === 'succeeded') {
-                    candidateId = stat.remoteCandidateId;
-                } else if (stat.type === 'remote-candidate') {
-                    allCandidates[stat.id] = stat.address;
-                }
-            });
-
-            // Get video codec from codecId
-            if (videoCodecId) {
-                const videoStat = allVideoCodecs[videoCodecId];
-                const video: typeof StreamBadges.video = {
-                    codec: videoStat.mimeType.substring(6),
-                };
-
-                if (video.codec === 'H264') {
-                    const match = /profile-level-id=([0-9a-f]{6})/.exec(videoStat.sdpFmtpLine);
-                    video.profile = match ? match[1] : null;
-                }
-
-                StreamBadges.video = video;
-            }
-
-            // Get audio codec from codecId
-            if (audioCodecId) {
-                const audioStat = allAudioCodecs[audioCodecId];
-                StreamBadges.audio = {
-                    codec: audioStat.mimeType.substring(6),
-                    bitrate: audioStat.clockRate,
-                }
-            }
-
-            // Get server type
-            if (candidateId) {
-                BxLogger.info('candidate', candidateId, allCandidates);
-                StreamBadges.ipv6 = allCandidates[candidateId].includes(':');
-            }
-
-            if (getPref(PrefKey.STATS_SHOW_WHEN_PLAYING)) {
-                StreamStats.start();
-            }
-        });
+        document.documentElement.appendChild(this.#$container!);
     }
 
     static setupEvents() {
@@ -290,13 +253,20 @@ export class StreamStats {
             const PREF_STATS_QUICK_GLANCE = getPref(PrefKey.STATS_QUICK_GLANCE);
             const PREF_STATS_SHOW_WHEN_PLAYING = getPref(PrefKey.STATS_SHOW_WHEN_PLAYING);
 
-            StreamStats.getServerStats();
+            const streamStats = StreamStats.getInstance();
             // Setup Stat's Quick Glance mode
-            if (PREF_STATS_QUICK_GLANCE) {
-                StreamStats.quickGlanceSetup();
+
+            if (PREF_STATS_SHOW_WHEN_PLAYING) {
+                streamStats.start();
+            } else if (PREF_STATS_QUICK_GLANCE) {
+                streamStats.quickGlanceSetup();
                 // Show stats bar
-                !PREF_STATS_SHOW_WHEN_PLAYING && StreamStats.start(true);
+                !PREF_STATS_SHOW_WHEN_PLAYING && streamStats.start(true);
             }
         });
     }
+
+    static refreshStyles() {
+        StreamStats.getInstance().refreshStyles();
+    }
 }

src/modules/stream/stream-ui.ts

@@ -2,69 +2,10 @@ import { STATES } from "@utils/global.ts";
 import { createSvgIcon } from "@utils/html.ts";
 import { BxIcon } from "@utils/bx-icon";
 import { BxEvent } from "@utils/bx-event.ts";
-import { PrefKey, getPref } from "@utils/preferences.ts";
 import { t } from "@utils/translation.ts";
 import { StreamBadges } from "./stream-badges.ts";
 import { StreamStats } from "./stream-stats.ts";
-
-
-class MouseHoldEvent {
-    #isHolding = false;
-    #timeout?: number | null;
-
-    #$elm;
-    #callback;
-    #duration;
-
-    #onMouseDown(e: MouseEvent | TouchEvent) {
-        const _this = this;
-        this.#isHolding = false;
-
-        this.#timeout && clearTimeout(this.#timeout);
-        this.#timeout = window.setTimeout(() => {
-            _this.#isHolding = true;
-            _this.#callback();
-        }, this.#duration);
-    };
-
-    #onMouseUp(e: MouseEvent | TouchEvent) {
-        this.#timeout && clearTimeout(this.#timeout);
-        this.#timeout = null;
-
-        if (this.#isHolding) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        this.#isHolding = false;
-    };
-
-    #addEventListeners = () => {
-        this.#$elm.addEventListener('mousedown', this.#onMouseDown.bind(this));
-        this.#$elm.addEventListener('click', this.#onMouseUp.bind(this));
-
-        this.#$elm.addEventListener('touchstart', this.#onMouseDown.bind(this));
-        this.#$elm.addEventListener('touchend', this.#onMouseUp.bind(this));
-    }
-
-    /*
-    #clearEventLiseners = () => {
-        this.#$elm.removeEventListener('mousedown', this.#onMouseDown);
-        this.#$elm.removeEventListener('click', this.#onMouseUp);
-
-        this.#$elm.removeEventListener('touchstart', this.#onMouseDown);
-        this.#$elm.removeEventListener('touchend', this.#onMouseUp);
-    }
-    */
-
-    constructor($elm: HTMLElement, callback: any, duration=1000) {
-        this.#$elm = $elm;
-        this.#callback = callback;
-        this.#duration = duration;
-
-        this.#addEventListeners();
-        // $elm.clearMouseHoldEventListeners = this.#clearEventLiseners;
-    }
-}
+import { StreamSettings } from "./stream-settings.ts";
 
 
 function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
@@ -94,7 +35,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
         }
     };
 
-    if (STATES.hasTouchSupport) {
+    if (STATES.browser.capabilities.touch) {
         $container.addEventListener('transitionstart', onTransitionStart);
         $container.addEventListener('transitionend', onTransitionEnd);
     }
@@ -113,6 +54,28 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
 }
 
 
+function cloneCloseButton($$btnOrg: HTMLElement, icon: typeof BxIcon, className: string, onChange: any) {
+    // Create button from the Close button
+    const $btn = $$btnOrg.cloneNode(true) as HTMLElement;
+
+    // Refresh SVG
+    const $svg = createSvgIcon(icon);
+    // Copy classes
+    $svg.setAttribute('class', $btn.firstElementChild!.getAttribute('class') || '');
+    $svg.style.fill = 'none';
+
+    $btn.classList.add(className);
+    // Remove icon
+    $btn.removeChild($btn.firstElementChild!);
+    // Add icon
+    $btn.appendChild($svg);
+    // Add "click" event listener
+    $btn.addEventListener('click', onChange);
+
+    return $btn;
+}
+
+
 export function injectStreamMenuButtons() {
     const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
     if (!$screen) {
@@ -125,53 +88,16 @@ export function injectStreamMenuButtons() {
 
     ($screen as any).xObserving = true;
 
-    const $quickBar = document.querySelector('.bx-quick-settings-bar')!;
-    const $parent = $screen.parentElement;
-    const hideQuickBarFunc = (e?: MouseEvent | TouchEvent) => {
-        if (e) {
-            const $target = e.target as HTMLElement;
-            e.stopPropagation();
-            if ($target != $parent && $target.id !== 'MultiTouchSurface' && !$target.querySelector('#BabylonCanvasContainer-main')) {
-                return;
-            }
-            if ($target.id === 'MultiTouchSurface') {
-                $target.removeEventListener('touchstart', hideQuickBarFunc);
-            }
-        }
-
-        // Hide Quick settings bar
-        $quickBar.classList.add('bx-gone');
-
-        $parent?.removeEventListener('click', hideQuickBarFunc);
-        // $parent.removeEventListener('touchstart', hideQuickBarFunc);
-    }
-
     let $btnStreamSettings: HTMLElement;
     let $btnStreamStats: HTMLElement;
+    const streamStats = StreamStats.getInstance();
 
-    const PREF_DISABLE_FEEDBACK_DIALOG = getPref(PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG);
     const observer = new MutationObserver(mutationList => {
         mutationList.forEach(item => {
             if (item.type !== 'childList') {
                 return;
             }
 
-            item.removedNodes.forEach($node => {
-                if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
-                    return;
-                }
-
-                if (!($node as HTMLElement).className || !($node as HTMLElement).className.startsWith) {
-                    return;
-                }
-
-                if (($node as HTMLElement).className.startsWith('StreamMenu')) {
-                    if (!document.querySelector('div[class^=PureInStreamConfirmationModal]')) {
-                        BxEvent.dispatch(window, BxEvent.STREAM_MENU_HIDDEN);
-                    }
-                }
-            });
-
             item.addedNodes.forEach(async $node => {
                 if (!$node || $node.nodeType !== Node.ELEMENT_NODE) {
                     return;
@@ -179,48 +105,50 @@ export function injectStreamMenuButtons() {
 
                 let $elm: HTMLElement | null = $node as HTMLElement;
 
+                // Ignore SVG elements
+                if ($elm instanceof SVGSVGElement) {
+                    return;
+                }
+
                 // Error Page: .PureErrorPage.ErrorScreen
-                if ($elm.className.includes('PureErrorPage')) {
+                if ($elm.className?.includes('PureErrorPage')) {
                     BxEvent.dispatch(window, BxEvent.STREAM_ERROR_PAGE);
                     return;
                 }
 
-                if (PREF_DISABLE_FEEDBACK_DIALOG && $elm.className.startsWith('PostStreamFeedbackScreen')) {
-                    const $btnClose = $elm.querySelector('button');
-                    $btnClose && $btnClose.click();
-                    return;
-                }
-
                 // Render badges
-                if ($elm.className.startsWith('StreamMenu')) {
-                    BxEvent.dispatch(window, BxEvent.STREAM_MENU_SHOWN);
-
-                    // Hide Quick bar when closing HUD
-                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
+                if ($elm.className?.startsWith('StreamMenu-module__container')) {
+                    const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]') as HTMLElement;
                     if (!$btnCloseHud) {
                         return;
                     }
 
-                    $btnCloseHud && $btnCloseHud.addEventListener('click', e => {
-                        $quickBar.classList.add('bx-gone');
+                    // Hide Stream Settings dialog when closing HUD
+                    $btnCloseHud.addEventListener('click', e => {
+                        StreamSettings.getInstance().hide();
                     });
 
-                    // Get "Quit game" button
-                    const $btnQuit = $elm.querySelector('div[class^=StreamMenu] > div > button:last-child') as HTMLElement;
-                    // Hold "Quit game" button to refresh the stream
-                    new MouseHoldEvent($btnQuit, () => {
+                    // Create Refresh button from the Close button
+                    const $btnRefresh = cloneCloseButton($btnCloseHud, BxIcon.REFRESH, 'bx-stream-refresh-button', () => {
                         confirm(t('confirm-reload-stream')) && window.location.reload();
-                    }, 1000);
+                    });
+
+                    const $btnHome = cloneCloseButton($btnCloseHud, BxIcon.HOME, 'bx-stream-home-button', () => {
+                        confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+                    });
+
+                    // Add to website
+                    $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
+                    $btnRefresh.insertAdjacentElement('afterend', $btnHome);
 
                     // Render stream badges
                     const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
-                    $menu?.appendChild(await StreamBadges.render());
+                    $menu?.appendChild(await StreamBadges.getInstance().render());
 
-                    hideQuickBarFunc();
                     return;
                 }
 
-                if ($elm.className.startsWith('Overlay-module_') || $elm.className.startsWith('InProgressScreen')) {
+                if ($elm.className?.startsWith('Overlay-module_') || $elm.className?.startsWith('InProgressScreen')) {
                     $elm = $elm.querySelector('#StreamHud');
                 }
 
@@ -250,38 +178,32 @@ export function injectStreamMenuButtons() {
 
                 // Create Stream Settings button
                 if (!$btnStreamSettings) {
-                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('menu-stream-settings'), BxIcon.STREAM_SETTINGS);
+                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('stream-settings'), BxIcon.STREAM_SETTINGS);
                     $btnStreamSettings.addEventListener('click', e => {
                         hideGripHandle();
                         e.preventDefault();
 
-                        // Show Quick settings bar
-                        $quickBar.classList.remove('bx-gone');
-
-                        $parent?.addEventListener('click', hideQuickBarFunc);
-                        //$parent.addEventListener('touchstart', hideQuickBarFunc);
-
-                        const $touchSurface = document.getElementById('MultiTouchSurface');
-                        $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideQuickBarFunc);
+                        // Show Stream Settings dialog
+                        StreamSettings.getInstance().show();
                     });
                 }
 
                 // Create Stream Stats button
                 if (!$btnStreamStats) {
-                    $btnStreamStats = cloneStreamHudButton($orgButton, t('menu-stream-stats'), BxIcon.STREAM_STATS);
+                    $btnStreamStats = cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
                     $btnStreamStats.addEventListener('click', e => {
                         hideGripHandle();
                         e.preventDefault();
 
                         // Toggle Stream Stats
-                        StreamStats.toggle();
+                        streamStats.toggle();
 
-                        const btnStreamStatsOn = (!StreamStats.isHidden() && !StreamStats.isGlancing());
+                        const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
                         $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
                     });
                 }
 
-                const btnStreamStatsOn = (!StreamStats.isHidden() && !StreamStats.isGlancing());
+                const btnStreamStatsOn = (!streamStats.isHidden() && !streamStats.isGlancing());
                 $btnStreamStats.classList.toggle('bx-stream-menu-button-on', btnStreamStatsOn);
 
                 if ($orgButton) {
@@ -300,37 +222,3 @@ export function injectStreamMenuButtons() {
     });
     observer.observe($screen, {subtree: true, childList: true});
 }
-
-
-export function showStreamSettings(tabId: string) {
-    const $wrapper = document.querySelector('.bx-quick-settings-bar');
-    if (!$wrapper) {
-        return;
-    }
-
-    // Select tab
-    if (tabId) {
-        const $tab = $wrapper.querySelector(`.bx-quick-settings-tabs svg[data-group=${tabId}]`);
-        $tab && $tab.dispatchEvent(new Event('click'));
-    }
-
-    $wrapper.classList.remove('bx-gone');
-
-    const $screen = document.querySelector('#PageContent section[class*=PureScreens]');
-    if ($screen && $screen.parentElement) {
-        const $parent = $screen.parentElement;
-        if (!$parent || ($parent as any).bxClick) {
-            return;
-        }
-
-        ($parent as any).bxClick = true;
-
-        const onClick = (e: Event) => {
-            $wrapper.classList.add('bx-gone');
-            ($parent as any).bxClick = false;
-            $parent.removeEventListener('click', onClick);
-        };
-
-        $parent.addEventListener('click', onClick);
-    }
-}

src/modules/touch-controller.ts

@@ -1,18 +1,21 @@
 import { STATES } from "@utils/global";
-import { CE } from "@utils/html";
+import { escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
-import { BX_FLAGS } from "@utils/bx-flags";
+import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
 import { getPref, PrefKey } from "@utils/preferences";
 import { t } from "@utils/translation";
-import { NATIVE_FETCH } from "@utils/network";
 import { BxLogger } from "@utils/bx-logger";
 
 const LOG_TAG = 'TouchController';
 
 export class TouchController {
     static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
-            data: '{"content":"{\\"layoutId\\":\\"\\"}","target":"/streaming/touchcontrols/showlayoutv2","type":"Message"}',
+            data: JSON.stringify({
+                content: '{"layoutId":""}',
+                target: '/streaming/touchcontrols/showlayoutv2',
+                type: 'Message',
+            }),
             origin: 'better-xcloud',
         });
 
@@ -23,17 +26,17 @@ export class TouchController {
         });
     */
 
-    static #$bar: HTMLElement;
     static #$style: HTMLStyleElement;
 
     static #enable = false;
-    static #showing = false;
     static #dataChannel: RTCDataChannel | null;
 
     static #customLayouts: {[index: string]: any} = {};
     static #baseCustomLayouts: {[index: string]: any} = {};
     static #currentLayoutId: string;
 
+    static #customList: string[];
+
     static enable() {
         TouchController.#enable = true;
     }
@@ -48,37 +51,28 @@ export class TouchController {
 
     static #showDefault() {
         TouchController.#dispatchMessage(TouchController.#EVENT_SHOW_DEFAULT_CONTROLLER);
-        TouchController.#showing = true;
     }
 
     static #show() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.remove('bx-offscreen');
-        TouchController.#showing = true;
     }
 
     static #hide() {
         document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.add('bx-offscreen');
-        TouchController.#showing = false;
     }
 
-    static #toggleVisibility() {
+    static toggleVisibility(status: boolean) {
         if (!TouchController.#dataChannel) {
             return;
         }
 
-        TouchController.#showing ? TouchController.#hide() : TouchController.#show();
-    }
-
-    static #toggleBar(value: boolean) {
-        TouchController.#$bar && TouchController.#$bar.setAttribute('data-showing', value.toString());
+        status ? TouchController.#hide() : TouchController.#show();
     }
 
     static reset() {
         TouchController.#enable = false;
-        TouchController.#showing = false;
         TouchController.#dataChannel = null;
 
-        TouchController.#$bar && TouchController.#$bar.removeAttribute('data-showing');
         TouchController.#$style && (TouchController.#$style.textContent = '');
     }
 
@@ -103,7 +97,7 @@ export class TouchController {
         retries = retries || 1;
         if (retries > 2) {
             TouchController.#customLayouts[xboxTitleId] = null;
-            // Wait for BX_EXPOSED.touch_layout_manager
+            // Wait for BX_EXPOSED.touchLayoutManager
             window.setTimeout(() => TouchController.#dispatchLayouts(null), 1000);
             return;
         }
@@ -139,7 +133,7 @@ export class TouchController {
             json.layouts = layouts;
             TouchController.#customLayouts[xboxTitleId] = json;
 
-            // Wait for BX_EXPOSED.touch_layout_manager
+            // Wait for BX_EXPOSED.touchLayoutManager
             window.setTimeout(() => TouchController.#dispatchLayouts(json), 1000);
         } catch (e) {
             // Retry
@@ -148,7 +142,16 @@ export class TouchController {
     }
 
     static loadCustomLayout(xboxTitleId: string, layoutId: string, delay: number=0) {
-        if (!window.BX_EXPOSED.touch_layout_manager) {
+        // TODO: fix this
+        if (!window.BX_EXPOSED.touchLayoutManager) {
+            const listener = (e: Event) => {
+                window.removeEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
+                if (TouchController.#enable) {
+                    TouchController.loadCustomLayout(xboxTitleId, layoutId, 0);
+                }
+            };
+            window.addEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
+
             return;
         }
 
@@ -168,69 +171,71 @@ export class TouchController {
         }
 
         // Show a toast with layout's name
-        layoutChanged && Toast.show(t('touch-control-layout'), layout.name);
+        let msg: string;
+        let html = false;
+        if (layout.author) {
+            const author = `<b>${escapeHtml(layout.author)}</b>`;
+            msg = t('touch-control-layout-by', {name: author});
+            html = true;
+        } else {
+            msg = t('touch-control-layout');
+        }
+
+        layoutChanged && Toast.show(msg, layout.name, {html: html});
 
         window.setTimeout(() => {
-            window.BX_EXPOSED.touch_layout_manager.changeLayoutForScope({
+            // Show gyroscope control in the "More options" dialog if this layout has gyroscope
+            window.BX_EXPOSED.shouldShowSensorControls = JSON.stringify(layout).includes('gyroscope');
+
+            window.BX_EXPOSED.touchLayoutManager.changeLayoutForScope({
                 type: 'showLayout',
                 scope: xboxTitleId,
                 subscope: 'base',
                 layout: {
                     id: 'System.Standard',
                     displayName: 'System',
-                    layoutFile: {
-                        content: layout.content,
-                    },
+                    layoutFile: layout,
                 }
             });
         }, delay);
     }
 
+    static updateCustomList() {
+        const key = 'better_xcloud_custom_touch_layouts';
+        TouchController.#customList = JSON.parse(window.localStorage.getItem(key) || '[]');
+
+        NATIVE_FETCH('https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts/ids.json')
+            .then(response => response.json())
+            .then(json => {
+                TouchController.#customList = json;
+                window.localStorage.setItem(key, JSON.stringify(json));
+            });
+    }
+
+    static getCustomList(): string[] {
+        return TouchController.#customList;
+    }
+
     static setup() {
         // Function for testing touch control
-        window.BX_EXPOSED.test_touch_control = (content: any) => {
-            const { touch_layout_manager } = window.BX_EXPOSED;
+        (window as any).testTouchLayout = (layout: any) => {
+            const { touchLayoutManager } = window.BX_EXPOSED;
 
-            touch_layout_manager && touch_layout_manager.changeLayoutForScope({
+            touchLayoutManager && touchLayoutManager.changeLayoutForScope({
                 type: 'showLayout',
                 scope: '' + STATES.currentStream?.xboxTitleId,
                 subscope: 'base',
                 layout: {
                     id: 'System.Standard',
                     displayName: 'Custom',
-                    layoutFile: {
-                        content: content,
-                    },
+                    layoutFile: layout,
                 },
             });
         };
 
-        const $fragment = document.createDocumentFragment();
         const $style = document.createElement('style');
-        $fragment.appendChild($style);
+        document.documentElement.appendChild($style);
 
-        const $bar = CE('div', {'id': 'bx-touch-controller-bar'});
-        $fragment.appendChild($bar);
-
-        document.documentElement.appendChild($fragment);
-
-        // Setup double-tap event
-        let clickTimeout: number | null;
-        $bar.addEventListener('mousedown', (e: MouseEvent) => {
-            clickTimeout && clearTimeout(clickTimeout);
-            if (clickTimeout) {
-                // Double-clicked
-                clickTimeout = null;
-                TouchController.#toggleVisibility();
-                return;
-            }
-
-            clickTimeout = window.setTimeout(() => {
-                clickTimeout = null;
-            }, 400);
-        });
-
-        TouchController.#$bar = $bar;
         TouchController.#$style = $style;
 
         const PREF_STYLE_STANDARD = getPref(PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD);
@@ -289,7 +294,6 @@ export class TouchController {
                 try {
                     if (msg.data.includes('/titleinfo')) {
                         const json = JSON.parse(JSON.parse(msg.data).content);
-                        TouchController.#toggleBar(json.focused);
 
                         focused = json.focused;
                         if (!json.focused) {

src/modules/ui/game-tile.ts

@@ -0,0 +1,87 @@
+import { BxEvent } from "@/utils/bx-event";
+import { BxIcon } from "@/utils/bx-icon";
+import { CE, createSvgIcon, getReactProps } from "@/utils/html";
+import { XcloudApi } from "@/utils/xcloud-api";
+
+export class GameTile {
+    static #timeout: number | null;
+
+    static #secondsToHms(seconds: number) {
+        let h = Math.floor(seconds / 3600);
+        seconds %= 3600;
+        let m = Math.floor(seconds / 60);
+        let s = seconds % 60;
+
+        const output = [];
+        h > 0 && output.push(`${h}h`);
+        m > 0 && output.push(`${m}m`);
+        if (s > 0 || output.length === 0) {
+            output.push(`${s}s`);
+        }
+
+        return output.join(' ');
+    }
+
+    static async #showWaitTime($elm: HTMLElement, productId: string) {
+        let totalWaitTime;
+
+        const api = XcloudApi.getInstance();
+        const info = await api.getTitleInfo(productId);
+        if (info) {
+            const waitTime = await api.getWaitTime(info.titleId);
+            if (waitTime) {
+                totalWaitTime = waitTime.estimatedAllocationTimeInSeconds;
+            }
+        }
+
+        if (typeof totalWaitTime === 'number' && $elm.isConnected) {
+            const $div = CE('div', {'class': 'bx-game-tile-wait-time'},
+                createSvgIcon(BxIcon.PLAYTIME),
+                CE('span', {}, GameTile.#secondsToHms(totalWaitTime)),
+            );
+            $elm.insertAdjacentElement('afterbegin', $div);
+        }
+    }
+
+    static requestWaitTime($elm: HTMLElement, productId: string) {
+        GameTile.#timeout && clearTimeout(GameTile.#timeout);
+        GameTile.#timeout = window.setTimeout(async () => {
+            if (!($elm as any).hasWaitTime) {
+                ($elm as any).hasWaitTime = true;
+                GameTile.#showWaitTime($elm, productId);
+            }
+        }, 1000);
+    }
+
+    static setup() {
+        window.addEventListener(BxEvent.NAVIGATION_FOCUS_CHANGED, e => {
+            let productId;
+            const $elm = (e as any).element;
+            try {
+                if (($elm.tagName === 'BUTTON' && $elm.className.includes('MruGameCard')) || (($elm.tagName === 'A' && $elm.className.includes('GameCard')))) {
+                    let props = getReactProps($elm.parentElement);
+
+                    // When context menu is enabled
+                    if (Array.isArray(props.children)) {
+                        productId = props.children[0].props.productId;
+                    } else {
+                        productId = props.children.props.productId;
+                    }
+                } else if ($elm.tagName === 'A' && $elm.className.includes('GameItem'))  {
+                    let props = getReactProps($elm.parentElement);
+                    props = props.children.props;
+                    if (props.location !== 'NonStreamableGameItem') {
+                        if ('productId' in props) {
+                            productId = props.productId;
+                        } else {
+                            // Search page
+                            productId = props.children.props.productId;
+                        }
+                    }
+                }
+            } catch (e) {}
+
+            productId && GameTile.requestWaitTime($elm, productId);
+        });
+    }
+}

src/modules/ui/global-settings.ts

@@ -1,15 +1,21 @@
-import { STATES, AppInterface, SCRIPT_HOME, SCRIPT_VERSION } from "@utils/global";
+import { STATES, AppInterface, SCRIPT_VERSION } from "@utils/global";
 import { CE, createButton, ButtonStyle } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
-import { UserAgent, UserAgentProfile } from "@utils/user-agent";
+import { UserAgent } from "@utils/user-agent";
 import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/preferences";
-import { t, refreshCurrentLocale } from "@utils/translation";
+import { t, Translations } from "@utils/translation";
+import { PatcherCache } from "../patcher";
+import { UserAgentProfile } from "@enums/user-agent";
+import { BxSelectElement } from "@/web-components/bx-select";
+import { StreamSettings } from "../stream/stream-settings";
 
 const SETTINGS_UI = {
     'Better xCloud': {
         items: [
             PrefKey.BETTER_XCLOUD_LOCALE,
+            PrefKey.SERVER_BYPASS_RESTRICTION,
+            PrefKey.UI_CONTROLLER_FRIENDLY,
             PrefKey.REMOTE_PLAY_ENABLED,
         ],
     },
@@ -26,18 +32,26 @@ const SETTINGS_UI = {
         items: [
             PrefKey.STREAM_TARGET_RESOLUTION,
             PrefKey.STREAM_CODEC_PROFILE,
-            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
-            PrefKey.AUDIO_MIC_ON_PLAYING,
-            PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
 
-            PrefKey.SCREENSHOT_BUTTON_POSITION,
-            PrefKey.SCREENSHOT_APPLY_FILTERS,
+            PrefKey.BITRATE_VIDEO_MAX,
 
             PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
+            PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
+
+            PrefKey.SCREENSHOT_APPLY_FILTERS,
+
+            PrefKey.AUDIO_MIC_ON_PLAYING,
+            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
             PrefKey.STREAM_COMBINE_SOURCES,
         ],
     },
 
+    [t('game-bar')]: {
+        items: [
+            PrefKey.GAME_BAR_POSITION,
+        ],
+    },
+
     [t('local-co-op')]: {
         items: [
             PrefKey.LOCAL_CO_OP_ENABLED,
@@ -46,17 +60,19 @@ const SETTINGS_UI = {
 
     [t('mouse-and-keyboard')]: {
         items: [
+            PrefKey.NATIVE_MKB_ENABLED,
             PrefKey.MKB_ENABLED,
             PrefKey.MKB_HIDE_IDLE_CURSOR,
         ],
     },
 
     [t('touch-controller')]: {
-        note: !STATES.hasTouchSupport ? '⚠️ ' + t('device-unsupported-touch') : null,
-        unsupported: !STATES.hasTouchSupport,
+        note: !STATES.userAgent.capabilities.touch ? '⚠️ ' + t('device-unsupported-touch') : null,
+        unsupported: !STATES.userAgent.capabilities.touch,
         items: [
             PrefKey.STREAM_TOUCH_CONTROLLER,
             PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF,
+            PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY,
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
             PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
         ],
@@ -73,17 +89,21 @@ const SETTINGS_UI = {
     [t('ui')]: {
         items: [
             PrefKey.UI_LAYOUT,
+            PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
+            PrefKey.UI_GAME_CARD_SHOW_WAIT_TIME,
+            PrefKey.CONTROLLER_SHOW_CONNECTION_STATUS,
             PrefKey.STREAM_SIMPLIFY_MENU,
             PrefKey.SKIP_SPLASH_VIDEO,
             !AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
             PrefKey.HIDE_DOTS_ICON,
             PrefKey.REDUCE_ANIMATIONS,
+            PrefKey.BLOCK_SOCIAL_FEATURES,
+            PrefKey.UI_HIDE_SECTIONS,
         ],
     },
 
     [t('other')]: {
         items: [
-            PrefKey.BLOCK_SOCIAL_FEATURES,
             PrefKey.BLOCK_TRACKING,
         ],
     },
@@ -105,72 +125,121 @@ export function setupSettingsUi() {
     const PREF_PREFERRED_REGION = getPreferredServerRegion();
     const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
 
-    let $reloadBtnWrapper: HTMLButtonElement;
+    let $btnReload: HTMLButtonElement;
 
     // Setup Settings UI
-    const $container = CE<HTMLElement>('div', {
+    const $container = CE('div', {
         'class': 'bx-settings-container bx-gone',
     });
 
-    let $updateAvailable;
-
-    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-settings-wrapper'},
-            CE<HTMLElement>('div', {'class': 'bx-settings-title-wrapper'},
-                CE('a', {
-                    'class': 'bx-settings-title',
-                    'href': SCRIPT_HOME,
-                    'target': '_blank',
-                }, 'Better xCloud ' + SCRIPT_VERSION),
-                createButton({icon: BxIcon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}),
+    const $wrapper = CE('div', {'class': 'bx-settings-wrapper'},
+            CE('div', {'class': 'bx-settings-title-wrapper'},
+                createButton({
+                    classes: ['bx-settings-title'],
+                    style: ButtonStyle.FOCUSABLE | ButtonStyle.GHOST,
+                    label: 'Better xCloud ' + SCRIPT_VERSION,
+                    url: 'https://github.com/redphx/better-xcloud/releases',
+                }),
+                createButton({
+                    icon: BxIcon.QUESTION,
+                    style: ButtonStyle.FOCUSABLE,
+                    label: t('help'),
+                    url: 'https://better-xcloud.github.io/features/',
+                }),
             )
         );
-    $updateAvailable = CE('a', {
-        'class': 'bx-settings-update bx-gone',
-        'href': 'https://github.com/redphx/better-xcloud/releases',
-        'target': '_blank',
-    });
 
-    $wrapper.appendChild($updateAvailable);
+    const topButtons = [];
 
+    // "New version available" button
+    if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION != SCRIPT_VERSION) {
         // Show new version indicator
-    if (PREF_LATEST_VERSION && PREF_LATEST_VERSION != SCRIPT_VERSION) {
-        $updateAvailable.textContent = `🌟 Version ${PREF_LATEST_VERSION} available`;
-        $updateAvailable.classList.remove('bx-gone');
+        topButtons.push(createButton({
+            label: `🌟 Version ${PREF_LATEST_VERSION} available`,
+            style: ButtonStyle.PRIMARY | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+            url: 'https://github.com/redphx/better-xcloud/releases/latest',
+        }));
     }
 
+    // "Stream settings" button
+    (STATES.supportedRegion && STATES.isSignedIn) && topButtons.push(createButton({
+        label: t('stream-settings'),
+        icon: BxIcon.STREAM_SETTINGS,
+        style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+        onClick: e => {
+            StreamSettings.getInstance().show();
+        },
+    }));
+
+    // Buttons for Android app
+    if (AppInterface) {
+        // Show Android app settings button
+        topButtons.push(createButton({
+            label: t('android-app-settings'),
+            icon: BxIcon.STREAM_SETTINGS,
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                AppInterface.openAppSettings && AppInterface.openAppSettings();
+            },
+        }));
+    } else {
         // Show link to Android app
-    if (!AppInterface) {
         const userAgent = UserAgent.getDefault().toLowerCase();
         if (userAgent.includes('android')) {
-            const $btn = createButton({
+            topButtons.push(createButton({
                 label: '🔥 ' + t('install-android'),
                 style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
                 url: 'https://better-xcloud.github.io/android',
-            });
-
-            $wrapper.appendChild($btn);
+            }));
         }
     }
 
-    const onChange = (e: Event) => {
-        if (!$reloadBtnWrapper) {
-            return;
+    if (topButtons.length) {
+        const $div = CE('div', {class: 'bx-top-buttons'});
+        for (const $button of topButtons) {
+            $div.appendChild($button);
         }
 
-        $reloadBtnWrapper.classList.remove('bx-gone');
+        $wrapper.appendChild($div);
+    }
+
+    let localeSwitchingTimeout: number | null;
+
+    const onChange = async (e: Event) => {
+        // Clear PatcherCache;
+        PatcherCache.clear();
+
+        $btnReload.classList.add('bx-danger');
+
+        // Highlight the Settings button in the Header to remind user to reload the page
+        const $btnHeaderSettings = document.querySelector('.bx-header-settings-button');
+        $btnHeaderSettings && $btnHeaderSettings.classList.add('bx-danger');
 
         if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
+            if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                localeSwitchingTimeout && window.clearTimeout(localeSwitchingTimeout);
+                localeSwitchingTimeout = window.setTimeout(() => {
+                    Translations.refreshCurrentLocale();
+                    Translations.updateTranslations();
+                }, 1000);
+            } else {
                 // Update locale
-            refreshCurrentLocale();
+                Translations.refreshCurrentLocale();
+                await Translations.updateTranslations();
 
-            const $btn = $reloadBtnWrapper.firstElementChild! as HTMLButtonElement;
-            $btn.textContent = t('settings-reloading');
-            $btn.click();
+                $btnReload.textContent = t('settings-reloading');
+                $btnReload.click();
+            }
         }
     };
 
     // Render settings
     for (let groupLabel in SETTINGS_UI) {
+        // Don't render other settings when not signed in
+        if (groupLabel !== 'Better xCloud' && (!STATES.supportedRegion || !STATES.isSignedIn)) {
+            continue;
+        }
+
         const $group = CE('span', {'class': 'bx-settings-group-label'}, groupLabel);
 
         // Render note
@@ -205,46 +274,58 @@ export function setupSettingsUi() {
             if (setting.experimental) {
                 settingLabel = '🧪 ' + settingLabel;
                 if (!settingNote) {
-                    settingNote = t('experimental')
+                    settingNote = t('experimental');
                 } else {
-                    settingNote = `${t('experimental')}: ${settingNote}`
+                    settingNote = `${t('experimental')}: ${settingNote}`;
                 }
             }
 
-            let $control;
+            let $control: any;
             let $inpCustomUserAgent: HTMLInputElement;
-            let labelAttrs = {};
+            let labelAttrs: any = {
+                tabindex: '-1',
+            };
 
             if (settingId === PrefKey.USER_AGENT_PROFILE) {
                 let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
                 $inpCustomUserAgent = CE('input', {
-                    'type': 'text',
-                    'placeholder': defaultUserAgent,
+                    id: `bx_setting_inp_${settingId}`,
+                    type: 'text',
+                    placeholder: defaultUserAgent,
                     'class': 'bx-settings-custom-user-agent',
                 });
-                $inpCustomUserAgent.addEventListener('change', e => {
-                    setPref(PrefKey.USER_AGENT_CUSTOM, (e.target as HTMLInputElement).value.trim());
+                $inpCustomUserAgent.addEventListener('input', e => {
+                    const profile = $control.value;
+                    const custom = (e.target as HTMLInputElement).value.trim();
+
+                    UserAgent.updateStorage(profile, custom);
                     onChange(e);
                 });
 
                 $control = toPrefElement(PrefKey.USER_AGENT_PROFILE, (e: Event) => {
-                    const value = (e.target as HTMLInputElement).value;
+                    const value = (e.target as HTMLInputElement).value as UserAgentProfile;
                     let isCustom = value === UserAgentProfile.CUSTOM;
                     let userAgent = UserAgent.get(value as UserAgentProfile);
 
+                    UserAgent.updateStorage(value);
+
                     $inpCustomUserAgent.value = userAgent;
                     $inpCustomUserAgent.readOnly = !isCustom;
                     $inpCustomUserAgent.disabled = !isCustom;
 
-                    onChange(e);
+                    !(e.target as HTMLInputElement).disabled && onChange(e);
                 });
             } else if (settingId === PrefKey.SERVER_REGION) {
                 let selectedValue;
 
-                $control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`});
+                $control = CE<HTMLSelectElement>('select', {
+                        id: `bx_setting_${settingId}`,
+                        title: settingLabel,
+                        tabindex: 0,
+                    });
                 $control.name = $control.id;
 
-                $control.addEventListener('change', e => {
+                $control.addEventListener('input', (e: Event) => {
                     setPref(settingId, (e.target as HTMLSelectElement).value);
                     onChange(e);
                 });
@@ -276,6 +357,8 @@ export function setupSettingsUi() {
                     $control.appendChild($option);
                 }
 
+                $control.disabled = Object.keys(STATES.serverRegions).length === 0;
+
                 // Select preferred region
                 $control.value = selectedValue;
             } else {
@@ -287,7 +370,12 @@ export function setupSettingsUi() {
                 } else {
                     $control = toPrefElement(settingId, onChange);
                 }
-                labelAttrs = {'for': $control.id, 'tabindex': 0};
+            }
+
+            if (!!$control.id) {
+                labelAttrs['for'] = $control.id;
+            } else {
+                labelAttrs['for'] = `bx_setting_${settingId}`;
             }
 
             // Disable unsupported settings
@@ -295,14 +383,33 @@ export function setupSettingsUi() {
                 ($control as HTMLInputElement).disabled = true;
             }
 
-            const $label = CE('label', labelAttrs, settingLabel);
+            // Make disabled control elements un-focusable
+            if ($control.disabled && !!$control.getAttribute('tabindex')) {
+                $control.setAttribute('tabindex', -1);
+            }
+
+            const $label = CE<HTMLLabelElement>('label', labelAttrs, settingLabel);
             if (settingNote) {
                 $label.appendChild(CE('b', {}, settingNote));
             }
-            const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
+
+            let $elm: HTMLElement;
+
+            if ($control instanceof HTMLSelectElement && getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                // Controller-friendly <select>
+                $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
                     $label,
-                            $control
+                    CE('div', {class: 'bx-setting-control'}, BxSelectElement.wrap($control)),
                 );
+            } else {
+                $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
+                    $label,
+                    $control instanceof HTMLInputElement ? CE('label', {
+                        class: 'bx-setting-control',
+                        for: $label.getAttribute('for'),
+                    }, $control) : CE('div', {class: 'bx-setting-control'}, $control),
+                );
+            }
 
             $wrapper.appendChild($elm);
 
@@ -310,35 +417,42 @@ export function setupSettingsUi() {
             if (settingId === PrefKey.USER_AGENT_PROFILE) {
                 $wrapper.appendChild($inpCustomUserAgent!);
                 // Trigger 'change' event
-                $control.dispatchEvent(new Event('change'));
+                $control.disabled = true;
+                $control.dispatchEvent(new Event('input'));
+                $control.disabled = false;
             }
         }
     }
 
     // Setup Reload button
-    const $reloadBtn = createButton({
+    $btnReload = createButton({
         label: t('settings-reload'),
-        style: ButtonStyle.DANGER | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+        classes: ['bx-settings-reload-button'],
+        style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH | ButtonStyle.TALL,
         onClick: e => {
             window.location.reload();
-            $reloadBtn.disabled = true;
-            $reloadBtn.textContent = t('settings-reloading');
+            $btnReload.disabled = true;
+            $btnReload.textContent = t('settings-reloading');
         },
     });
-    $reloadBtn.setAttribute('tabindex', '0');
+    $btnReload.setAttribute('tabindex', '0');
 
-    $reloadBtnWrapper = CE<HTMLButtonElement>('div', {'class': 'bx-settings-reload-button-wrapper bx-gone'}, $reloadBtn);
-    $wrapper.appendChild($reloadBtnWrapper);
+    $wrapper.appendChild($btnReload);
 
     // Donation link
-    const $donationLink = CE('a', {'class': 'bx-donation-link', href: 'https://ko-fi.com/redphx', target: '_blank'}, `❤️ ${t('support-better-xcloud')}`);
+    const $donationLink = CE('a', {
+            'class': 'bx-donation-link',
+            href: 'https://ko-fi.com/redphx',
+            target: '_blank',
+            tabindex: 0,
+        }, `❤️ ${t('support-better-xcloud')}`);
     $wrapper.appendChild($donationLink);
 
     // Show Game Pass app version
     try {
         const appVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement).content;
         const appDate = new Date((document.querySelector('meta[name=gamepass-app-date]') as HTMLMetaElement).content).toISOString().substring(0, 10);
-        $wrapper.appendChild(CE<HTMLElement>('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
+        $wrapper.appendChild(CE('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
     } catch (e) {}
 
     $container.appendChild($wrapper);

src/modules/ui/guide-menu.ts

@@ -0,0 +1,150 @@
+import { BxEvent } from "@/utils/bx-event";
+import { AppInterface, STATES } from "@/utils/global";
+import { createButton, ButtonStyle, CE } from "@/utils/html";
+import { t } from "@/utils/translation";
+import { StreamSettings } from "../stream/stream-settings";
+
+export enum GuideMenuTab {
+    HOME,
+}
+
+export class GuideMenu {
+    static #BUTTONS = {
+        streamSetting: createButton({
+            label: t('stream-settings'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                // Wait until the Guide dialog is closed
+                window.addEventListener(BxEvent.XCLOUD_DIALOG_DISMISSED, e => {
+                    setTimeout(() => StreamSettings.getInstance().show(), 50);
+                }, {once: true});
+
+                // Close all xCloud's dialogs
+                window.BX_EXPOSED.dialogRoutes.closeAll();
+            },
+        }),
+
+        appSettings: createButton({
+            label: t('android-app-settings'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                // Close all xCloud's dialogs
+                window.BX_EXPOSED.dialogRoutes.closeAll();
+
+                AppInterface.openAppSettings && AppInterface.openAppSettings();
+            },
+        }),
+
+        closeApp: createButton({
+            label: t('close-app'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE | ButtonStyle.DANGER,
+            onClick: e => {
+                AppInterface.closeApp();
+            },
+        }),
+
+        reloadPage: createButton({
+            label: t('reload-page'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                if (STATES.isPlaying) {
+                    confirm(t('confirm-reload-stream')) && window.location.reload();
+                } else {
+                    window.location.reload();
+                }
+
+                // Close all xCloud's dialogs
+                window.BX_EXPOSED.dialogRoutes.closeAll();
+            },
+        }),
+
+        backToHome: createButton({
+            label: t('back-to-home'),
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                confirm(t('back-to-home-confirm')) && (window.location.href = window.location.href.substring(0, 31));
+            },
+        }),
+    }
+
+    static #renderButtons(buttons: HTMLElement[]) {
+        const $div = CE('div', {});
+
+        for (const $button of buttons) {
+            $div.appendChild($button);
+        }
+
+        return $div;
+    }
+
+    static #injectHome($root: HTMLElement) {
+        // Find the last divider
+        const $dividers = $root.querySelectorAll('div[class*=Divider-module__divider]');
+        if (!$dividers) {
+            return;
+        }
+
+        const buttons: HTMLElement[] = [];
+
+        // "Stream settings" button
+        buttons.push(GuideMenu.#BUTTONS.streamSetting);
+
+        // "App settings" & "Close app" buttons
+        if (AppInterface) {
+            buttons.push(GuideMenu.#BUTTONS.appSettings);
+            buttons.push(GuideMenu.#BUTTONS.closeApp);
+        }
+
+        // Reload page
+        buttons.push(GuideMenu.#BUTTONS.reloadPage);
+
+        const $buttons = GuideMenu.#renderButtons(buttons);
+
+        const $lastDivider = $dividers[$dividers.length - 1];
+        $lastDivider.insertAdjacentElement('afterend', $buttons);
+    }
+
+    static #injectHomePlaying($root: HTMLElement) {
+        const $btnQuit = $root.querySelector('a[class*=QuitGameButton]');
+        if (!$btnQuit) {
+            return;
+        }
+
+        const buttons: HTMLElement[] = [];
+
+        buttons.push(GuideMenu.#BUTTONS.streamSetting);
+        AppInterface && buttons.push(GuideMenu.#BUTTONS.appSettings);
+
+        // Reload page
+        buttons.push(GuideMenu.#BUTTONS.reloadPage);
+
+        // Back to home
+        buttons.push(GuideMenu.#BUTTONS.backToHome);
+
+        const $buttons = GuideMenu.#renderButtons(buttons);
+        $btnQuit.insertAdjacentElement('afterend', $buttons);
+
+        // Hide xCloud's Home button
+        const $btnXcloudHome = $root.querySelector('div[class^=HomeButtonWithDivider]') as HTMLElement;
+        $btnXcloudHome && ($btnXcloudHome.style.display = 'none');
+    }
+
+    static async #onShown(e: Event) {
+        const where = (e as any).where as GuideMenuTab;
+
+        if (where === GuideMenuTab.HOME) {
+            const $root = document.querySelector('#gamepass-dialog-root div[role=dialog] div[role=tabpanel] div[class*=HomeLandingPage]') as HTMLElement;
+            if ($root) {
+                if (STATES.isPlaying) {
+                    GuideMenu.#injectHomePlaying($root);
+                } else {
+                    GuideMenu.#injectHome($root);
+                }
+            }
+        }
+    }
+
+    static observe() {
+        window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, GuideMenu.#onShown);
+    }
+}

src/modules/ui/header.ts

@@ -1,5 +1,5 @@
 import { SCRIPT_VERSION } from "@utils/global";
-import { createButton, ButtonStyle } from "@utils/html";
+import { createButton, ButtonStyle, CE } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
 import { PrefKey, getPref } from "@utils/preferences";
@@ -7,21 +7,9 @@ import { RemotePlay } from "@modules/remote-play";
 import { t } from "@utils/translation";
 import { setupSettingsUi } from "./global-settings";
 
-
-function injectSettingsButton($parent?: HTMLElement) {
-    if (!$parent) {
-        return;
-    }
-
-    const PREF_PREFERRED_REGION = getPreferredServerRegion(true);
-    const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
-
-    const $headerFragment = document.createDocumentFragment();
-
-    // Remote Play button
-    if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
-        const $remotePlayBtn = createButton({
-            classes: ['bx-header-remote-play-button'],
+export class HeaderSection {
+    static #$remotePlayBtn = createButton({
+        classes: ['bx-header-remote-play-button', 'bx-gone'],
         icon: BxIcon.REMOTE_PLAY,
         title: t('remote-play'),
         style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
@@ -29,13 +17,10 @@ function injectSettingsButton($parent?: HTMLElement) {
             RemotePlay.togglePopup();
         },
     });
-        $headerFragment.appendChild($remotePlayBtn);
-    }
 
-    // Setup Settings button
-    const $settingsBtn = createButton({
+    static #$settingsBtn = createButton({
         classes: ['bx-header-settings-button'],
-        label: PREF_PREFERRED_REGION,
+        label: '???',
         style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
         onClick: e => {
             setupSettingsUi();
@@ -47,39 +32,58 @@ function injectSettingsButton($parent?: HTMLElement) {
         },
     });
 
+    static #$buttonsWrapper = CE('div', {},
+        getPref(PrefKey.REMOTE_PLAY_ENABLED) ? HeaderSection.#$remotePlayBtn : null,
+        HeaderSection.#$settingsBtn,
+    );
+
+    static #observer: MutationObserver;
+    static #timeout: number | null;
+
+    static #injectSettingsButton($parent?: HTMLElement) {
+        if (!$parent) {
+            return;
+        }
+
+        const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
+
+        // Setup Settings button
+        const $settingsBtn = HeaderSection.#$settingsBtn;
+        $settingsBtn.querySelector('span')!.textContent = getPreferredServerRegion(true);
+
         // Show new update status
-    if (PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
+        if (!SCRIPT_VERSION.includes('beta') && PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
             $settingsBtn.setAttribute('data-update-available', 'true');
         }
 
         // Add the Settings button to the web page
-    $headerFragment.appendChild($settingsBtn);
-    $parent.appendChild($headerFragment);
+        $parent.appendChild(HeaderSection.#$buttonsWrapper);
     }
 
-
-export function checkHeader() {
-    const $button = document.querySelector('.bx-header-settings-button');
-
-    if (!$button) {
+    static checkHeader() {
+        if (!HeaderSection.#$buttonsWrapper.isConnected) {
             const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
-        injectSettingsButton($rightHeader as HTMLElement);
+            HeaderSection.#injectSettingsButton($rightHeader as HTMLElement);
         }
     }
 
+    static showRemotePlayButton() {
+        HeaderSection.#$remotePlayBtn.classList.remove('bx-gone');
+    }
 
-export function watchHeader() {
+    static watchHeader() {
         const $header = document.querySelector('#PageContent header');
         if (!$header) {
             return;
         }
 
-    let timeout: number | null;
-    const observer = new MutationObserver(mutationList => {
-        timeout && clearTimeout(timeout);
-        timeout = window.setTimeout(checkHeader, 2000);
+        HeaderSection.#observer && HeaderSection.#observer.disconnect();
+        HeaderSection.#observer = new MutationObserver(mutationList => {
+            HeaderSection.#timeout && clearTimeout(HeaderSection.#timeout);
+            HeaderSection.#timeout = window.setTimeout(HeaderSection.checkHeader, 2000);
         });
-    observer.observe($header, {subtree: true, childList: true});
+        HeaderSection.#observer.observe($header, {subtree: true, childList: true});
 
-    checkHeader();
+        HeaderSection.checkHeader();
+    }
 }

src/modules/ui/ui.ts

@@ -1,15 +1,6 @@
-import { STATES } from "@utils/global";
-import { CE, createButton, ButtonStyle, createSvgIcon } from "@utils/html";
-import { BxIcon } from "@utils/bx-icon";
-import { UserAgent } from "@utils/user-agent";
-import { BxEvent } from "@utils/bx-event";
-import { MkbRemapper } from "@modules/mkb/mkb-remapper";
-import { getPref, PrefKey, toPrefElement } from "@utils/preferences";
-import { setupScreenshotButton } from "@modules/screenshot";
-import { StreamStats } from "@modules/stream/stream-stats";
-import { TouchController } from "@modules/touch-controller";
-import { t } from "@utils/translation";
-import { VibrationManager } from "@modules/vibration-manager";
+import { CE } from "@utils/html";
+import { onChangeVideoPlayerType } from "../stream/stream-settings-utils";
+import { StreamSettings } from "../stream/stream-settings";
 
 
 export function localRedirect(path: string) {
@@ -35,440 +26,10 @@ export function localRedirect(path: string) {
     $anchor.click();
 }
 
-
-function getVideoPlayerFilterStyle() {
-    const filters = [];
-
-    const clarity = getPref(PrefKey.VIDEO_CLARITY);
-    if (clarity != 0) {
-        const level = (7 - (clarity - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
-        const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
-        document.getElementById('bx-filter-clarity-matrix')!.setAttributeNS(null, 'kernelMatrix', matrix);
-
-        filters.push(`url(#bx-filter-clarity)`);
-    }
-
-    const saturation = getPref(PrefKey.VIDEO_SATURATION);
-    if (saturation != 100) {
-        filters.push(`saturate(${saturation}%)`);
-    }
-
-    const contrast = getPref(PrefKey.VIDEO_CONTRAST);
-    if (contrast != 100) {
-        filters.push(`contrast(${contrast}%)`);
-    }
-
-    const brightness = getPref(PrefKey.VIDEO_BRIGHTNESS);
-    if (brightness != 100) {
-        filters.push(`brightness(${brightness}%)`);
-    }
-
-    return filters.join(' ');
-}
-
-function setupQuickSettingsBar() {
-    const isSafari = UserAgent.isSafari();
-
-    const SETTINGS_UI = [
-        getPref(PrefKey.MKB_ENABLED) && {
-            icon: BxIcon.MOUSE,
-            group: 'mkb',
-            items: [
-                {
-                    group: 'mkb',
-                    label: t('mouse-and-keyboard'),
-                    help_url: 'https://better-xcloud.github.io/mouse-and-keyboard/',
-                    content: MkbRemapper.INSTANCE.render(),
-                },
-            ],
-        },
-
-        {
-            icon: BxIcon.DISPLAY,
-            group: 'stream',
-            items: [
-                {
-                    group: 'audio',
-                    label: t('audio'),
-                    help_url: 'https://better-xcloud.github.io/ingame-features/#audio',
-                    items: [
-                        {
-                            pref: PrefKey.AUDIO_VOLUME,
-                            label: t('volume'),
-                            onChange: (e: any, value: number) => {
-                                STATES.currentStream.audioGainNode && (STATES.currentStream.audioGainNode.gain.value = value / 100);
-                            },
-                            params: {
-                                disabled: !getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL),
-                            },
-                        },
-                    ],
-                },
-
-                {
-                    group: 'video',
-                    label: t('video'),
-                    help_url: 'https://better-xcloud.github.io/ingame-features/#video',
-                    items: [
-                        {
-                            pref: PrefKey.VIDEO_RATIO,
-                            label: t('ratio'),
-                            onChange: updateVideoPlayerCss,
-                        },
-
-                        {
-                            pref: PrefKey.VIDEO_CLARITY,
-                            label: t('clarity'),
-                            onChange: updateVideoPlayerCss,
-                            unsupported: isSafari,
-                        },
-
-                        {
-                            pref: PrefKey.VIDEO_SATURATION,
-                            label: t('saturation'),
-                            onChange: updateVideoPlayerCss,
-                        },
-
-                        {
-                            pref: PrefKey.VIDEO_CONTRAST,
-                            label: t('contrast'),
-                            onChange: updateVideoPlayerCss,
-                        },
-
-                        {
-                            pref: PrefKey.VIDEO_BRIGHTNESS,
-                            label: t('brightness'),
-                            onChange: updateVideoPlayerCss,
-                        },
-                    ],
-                },
-            ],
-        },
-
-        {
-            icon: BxIcon.CONTROLLER,
-            group: 'controller',
-            items: [
-                {
-                    group: 'controller',
-                    label: t('controller'),
-                    help_url: 'https://better-xcloud.github.io/ingame-features/#controller',
-                    items: [
-                        {
-                            pref: PrefKey.CONTROLLER_ENABLE_VIBRATION,
-                            label: t('controller-vibration'),
-                            unsupported: !VibrationManager.supportControllerVibration(),
-                            onChange: VibrationManager.updateGlobalVars,
-                        },
-
-                        {
-                            pref: PrefKey.CONTROLLER_DEVICE_VIBRATION,
-                            label: t('device-vibration'),
-                            unsupported: !VibrationManager.supportDeviceVibration(),
-                            onChange: VibrationManager.updateGlobalVars,
-                        },
-
-                        (VibrationManager.supportControllerVibration() || VibrationManager.supportDeviceVibration()) && {
-                            pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
-                            label: t('vibration-intensity'),
-                            unsupported: !VibrationManager.supportDeviceVibration(),
-                            onChange: VibrationManager.updateGlobalVars,
-                        },
-                    ],
-                },
-
-                STATES.hasTouchSupport && {
-                    group: 'touch-controller',
-                    label: t('touch-controller'),
-                    items: [
-                        {
-                            label: t('layout'),
-                            content: CE('select', {disabled: true}, CE('option', {}, t('default'))),
-                            onMounted: ($elm: HTMLSelectElement) => {
-                                $elm.addEventListener('change', e => {
-                                    TouchController.loadCustomLayout(STATES.currentStream?.xboxTitleId!, $elm.value, 1000);
-                                });
-
-                                window.addEventListener(BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, e => {
-                                    const data = (e as any).data;
-
-                                    if (STATES.currentStream?.xboxTitleId && ($elm as any).xboxTitleId === STATES.currentStream?.xboxTitleId) {
-                                        $elm.dispatchEvent(new Event('change'));
-                                        return;
-                                    }
-
-                                    ($elm as any).xboxTitleId = STATES.currentStream?.xboxTitleId;
-
-                                    // Clear options
-                                    while ($elm.firstChild) {
-                                        $elm.removeChild($elm.firstChild);
-                                    }
-
-                                    $elm.disabled = !data;
-                                    if (!data) {
-                                        $elm.appendChild(CE('option', {value: ''}, t('default')));
-                                        $elm.value = '';
-                                        $elm.dispatchEvent(new Event('change'));
-                                        return;
-                                    }
-
-                                    // Add options
-                                    const $fragment = document.createDocumentFragment();
-                                    for (const key in data.layouts) {
-                                        const layout = data.layouts[key];
-
-                                        const $option = CE('option', {value: key}, layout.name);
-                                        $fragment.appendChild($option);
-                                    }
-
-                                    $elm.appendChild($fragment);
-                                    $elm.value = data.default_layout;
-                                    $elm.dispatchEvent(new Event('change'));
-                                });
-                            },
-                        },
-                    ],
-                }
-            ],
-        },
-
-        {
-            icon: BxIcon.STREAM_STATS,
-            group: 'stats',
-            items: [
-                {
-                    group: 'stats',
-                    label: t('menu-stream-stats'),
-                    help_url: 'https://better-xcloud.github.io/stream-stats/',
-                    items: [
-                        {
-                            pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
-                            label: t('show-stats-on-startup'),
-                        },
-                        {
-                            pref: PrefKey.STATS_QUICK_GLANCE,
-                            label: '👀 ' + t('enable-quick-glance-mode'),
-                            onChange: (e: InputEvent) => {
-                                (e.target! as HTMLInputElement).checked ? StreamStats.quickGlanceSetup() : StreamStats.quickGlanceStop();
-                            },
-                        },
-                        {
-                            pref: PrefKey.STATS_ITEMS,
-                            label: t('stats'),
-                            onChange: StreamStats.refreshStyles,
-                        },
-                        {
-                            pref: PrefKey.STATS_POSITION,
-                            label: t('position'),
-                            onChange: StreamStats.refreshStyles,
-                        },
-                        {
-                            pref: PrefKey.STATS_TEXT_SIZE,
-                            label: t('text-size'),
-                            onChange: StreamStats.refreshStyles,
-                        },
-                        {
-                            pref: PrefKey.STATS_OPACITY,
-                            label: t('opacity'),
-                            onChange: StreamStats.refreshStyles,
-                        },
-                        {
-                            pref: PrefKey.STATS_TRANSPARENT,
-                            label: t('transparent-background'),
-                            onChange: StreamStats.refreshStyles,
-                        },
-                        {
-                            pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
-                            label: t('conditional-formatting'),
-                            onChange: StreamStats.refreshStyles,
-                        },
-                    ],
-                },
-            ],
-        },
-    ];
-
-    let $tabs: HTMLElement;
-    let $settings: HTMLElement;
-
-    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar bx-gone'},
-            $tabs = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tabs'}),
-            $settings = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tab-contents'}),
-        );
-
-    for (const settingTab of SETTINGS_UI) {
-        if (!settingTab) {
-            continue;
-        }
-
-        const $svg = createSvgIcon(settingTab.icon);
-        $svg.addEventListener('click', e => {
-            // Switch tab
-            for (const $child of Array.from($settings.children)) {
-                if ($child.getAttribute('data-group') === settingTab.group) {
-                    $child.classList.remove('bx-gone');
-                } else {
-                    $child.classList.add('bx-gone');
-                }
-            }
-
-            // Highlight current tab button
-            for (const $child of Array.from($tabs.children)) {
-                $child.classList.remove('bx-active');
-            }
-
-            $svg.classList.add('bx-active');
-        });
-
-        $tabs.appendChild($svg);
-
-        const $group = CE<HTMLElement>('div', {'data-group': settingTab.group, 'class': 'bx-gone'});
-
-        for (const settingGroup of settingTab.items) {
-            if (!settingGroup) {
-                continue;
-            }
-
-            $group.appendChild(CE('h2', {},
-                    CE('span', {}, settingGroup.label),
-                    settingGroup.help_url && createButton({
-                            icon: BxIcon.QUESTION,
-                            style: ButtonStyle.GHOST,
-                            url: settingGroup.help_url,
-                            title: t('help'),
-                        }),
-                ));
-            if (settingGroup.note) {
-                if (typeof settingGroup.note === 'string') {
-                    settingGroup.note = document.createTextNode(settingGroup.note);
-                }
-                $group.appendChild(settingGroup.note);
-            }
-
-            if (settingGroup.content) {
-                $group.appendChild(settingGroup.content);
-                continue;
-            }
-
-            if (!settingGroup.items) {
-                settingGroup.items = [];
-            }
-
-            for (const setting of settingGroup.items) {
-                if (!setting) {
-                    continue;
-                }
-
-                const pref = setting.pref;
-
-                let $control;
-                if (setting.content) {
-                    $control = setting.content;
-                } else if (!setting.unsupported) {
-                    $control = toPrefElement(pref, setting.onChange, setting.params);
-                }
-
-                const $content = CE<HTMLElement>('div', {'class': 'bx-quick-settings-row', 'data-type': settingGroup.group},
-                            CE('label', {for: `bx_setting_${pref}`},
-                            setting.label,
-                            setting.unsupported && CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar-note'}, t('browser-unsupported-feature')),
-                        ),
-                        !setting.unsupported && $control,
-                    );
-
-                $group.appendChild($content);
-
-                setting.onMounted && setting.onMounted($control);
-            }
-        }
-
-        $settings.appendChild($group);
-    }
-
-    // Select first tab
-    $tabs.firstElementChild!.dispatchEvent(new Event('click'));
-
-    document.documentElement.appendChild($wrapper);
+export function setupStreamUi() {
+    StreamSettings.getInstance();
+    onChangeVideoPlayerType();
 }
 
 
-export function updateVideoPlayerCss() {
-    let $elm = document.getElementById('bx-video-css');
-    if (!$elm) {
-        const $fragment = document.createDocumentFragment();
-        $elm = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
-        $fragment.appendChild($elm);
-
-        // Setup SVG filters
-        const $svg = CE('svg', {
-            'id': 'bx-video-filters',
-            'xmlns': 'http://www.w3.org/2000/svg',
-            'class': 'bx-gone',
-        }, CE('defs', {'xmlns': 'http://www.w3.org/2000/svg'},
-              CE('filter', {'id': 'bx-filter-clarity', 'xmlns': 'http://www.w3.org/2000/svg'},
-                CE('feConvolveMatrix', {'id': 'bx-filter-clarity-matrix', 'order': '3', 'xmlns': 'http://www.w3.org/2000/svg'}))
-             )
-        );
-        $fragment.appendChild($svg);
-        document.documentElement.appendChild($fragment);
-    }
-
-    let filters = getVideoPlayerFilterStyle();
-    let videoCss = '';
-    if (filters) {
-        videoCss += `filter: ${filters} !important;`;
-    }
-
-    // Apply video filters to screenshots
-    if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
-        STATES.currentStream.$screenshotCanvas!.getContext('2d')!.filter = filters;
-    }
-
-    const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
-    if (PREF_RATIO && PREF_RATIO !== '16:9') {
-        if (PREF_RATIO.includes(':')) {
-            videoCss += `aspect-ratio: ${PREF_RATIO.replace(':', '/')}; object-fit: unset !important;`;
-
-            const tmp = PREF_RATIO.split(':');
-            const ratio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
-            const maxRatio = window.innerWidth / window.innerHeight;
-            if (ratio < maxRatio) {
-                videoCss += 'width: fit-content !important;'
-            } else {
-                videoCss += 'height: fit-content !important;'
-            }
-        } else {
-            videoCss += `object-fit: ${PREF_RATIO} !important;`;
-        }
-    }
-
-    let css = '';
-    if (videoCss) {
-        css = `
-div[data-testid="media-container"] {
-    display: flex;
-}
-
-#game-stream video {
-    margin: 0 auto;
-    align-self: center;
-    background: #000;
-    ${videoCss}
-}
-`;
-    }
-
-    $elm.textContent = css;
-}
-
-export function setupBxUi() {
-    // Prevent initializing multiple times
-    if (!document.querySelector('.bx-quick-settings-bar')) {
-        window.addEventListener('resize', updateVideoPlayerCss);
-        setupQuickSettingsBar();
-        setupScreenshotButton();
-        StreamStats.render();
-    }
-
-    updateVideoPlayerCss();
-}
+(window as any).localRedirect = localRedirect;

src/modules/vibration-manager.ts

@@ -53,7 +53,7 @@ export class VibrationManager {
         return !!window.navigator.vibrate;
     }
 
-    static updateGlobalVars() {
+    static updateGlobalVars(stopVibration: boolean = true) {
         window.BX_ENABLE_CONTROLLER_VIBRATION = VibrationManager.supportControllerVibration() ? getPref(PrefKey.CONTROLLER_ENABLE_VIBRATION) : false;
         window.BX_VIBRATION_INTENSITY = getPref(PrefKey.CONTROLLER_VIBRATION_INTENSITY) / 100;
 
@@ -63,7 +63,7 @@ export class VibrationManager {
         }
 
         // Stop vibration
-        window.navigator.vibrate(0);
+        stopVibration && window.navigator.vibrate(0);
 
         const value = getPref(PrefKey.CONTROLLER_DEVICE_VIBRATION);
         let enabled;
@@ -134,10 +134,10 @@ export class VibrationManager {
     }
 
     static initialSetup() {
-        window.addEventListener('gamepadconnected', VibrationManager.updateGlobalVars);
-        window.addEventListener('gamepaddisconnected', VibrationManager.updateGlobalVars);
+        window.addEventListener('gamepadconnected', e => VibrationManager.updateGlobalVars());
+        window.addEventListener('gamepaddisconnected', e => VibrationManager.updateGlobalVars());
 
-        VibrationManager.updateGlobalVars();
+        VibrationManager.updateGlobalVars(false);
 
         window.addEventListener(BxEvent.DATA_CHANNEL_CREATED, e => {
             const dataChannel = (e as any).dataChannel;

src/types/index.d.ts

@@ -1,6 +1,8 @@
 // Get type of an array's element
 type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 
+type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>
+
 interface Window {
     AppInterface: any;
     BX_FLAGS?: BxFlags;
@@ -22,10 +24,28 @@ interface NavigatorBattery extends Navigator {
 }
 
 type BxStates = {
+    supportedRegion: boolean;
+    serverRegions: any;
+    selectedRegion: any;
+    gsToken: string;
+    isSignedIn: boolean;
+
     isPlaying: boolean;
     appContext: any | null;
-    serverRegions: any;
-    hasTouchSupport: boolean;
+
+    browser: {
+        capabilities: {
+            touch: boolean;
+            batteryApi: boolean;
+        };
+    };
+
+    userAgent: {
+        isTv: boolean;
+        capabilities: {
+            touch: boolean;
+        };
+    };
 
     currentStream: Partial<{
         titleId: string;
@@ -33,8 +53,7 @@ type BxStates = {
         productId: string;
         titleInfo: XcloudTitleInfo;
 
-        $video: HTMLVideoElement | null;
-        $screenshotCanvas: HTMLCanvasElement | null;
+        streamPlayer: StreamPlayer | null;
 
         peerConnection: RTCPeerConnection;
         audioContext: AudioContext | null;
@@ -48,14 +67,20 @@ type BxStates = {
             serverId: string;
         };
     }>;
+
+    pointerServerPort: number;
 }
 
 type DualEnum = {[index: string]: number} & {[index: number]: string};
 
 type XcloudTitleInfo = {
+    titleId: string,
+
     details: {
         productId: string;
         supportedInputTypes: InputType[];
+        supportedTabs: any[];
+        hasNativeTouchSupport: boolean;
         hasTouchSupport: boolean;
         hasFakeTouchSupport: boolean;
         hasMkbSupport: boolean;
@@ -68,5 +93,31 @@ type XcloudTitleInfo = {
     };
 };
 
-declare module "*.svg";
-declare module "*.styl";
+type XcloudWaitTimeInfo = Partial<{
+    estimatedAllocationTimeInSeconds: number,
+    estimatedProvisioningTimeInSeconds: number,
+    estimatedTotalWaitTimeInSeconds: number,
+}>;
+
+declare module '*.js';
+declare module '*.svg';
+declare module '*.styl';
+
+declare module '*.fs';
+declare module '*.vert';
+
+type MkbMouseMove = {
+    movementX: number;
+    movementY: number;
+}
+
+type MkbMouseClick = {
+    pointerButton?: number,
+    mouseButton?: number,
+    pressed: boolean,
+}
+
+type MkbMouseWheel = {
+    vertical: number;
+    horizontal: number;
+}

src/types/mkb.d.ts

@@ -1,4 +1,4 @@
-import { MkbPresetKey } from "@modules/mkb/definitions";
+import { MkbPresetKey } from "@enums/mkb";
 
 type GamepadKeyNameType = {[index: string | number]: string[]};
 

src/types/preferences.d.ts

@@ -1,12 +1,13 @@
 export type PreferenceSetting = {
     default: any;
+    optionsGroup?: string;
     options?: {[index: string]: string};
     multipleOptions?: {[index: string]: string};
     unsupported?: string | boolean;
     note?: string | HTMLElement;
     type?: SettingElementType;
-    ready?: () => void;
-    migrate?: (savedPrefs: any, value: any) => {};
+    ready?: (setting: PreferenceSetting) => void;
+    migrate?: (this: Preferences, savedPrefs: any, value: any) => void;
     min?: number;
     max?: number;
     steps?: number;