Bump version to 4.5.0

commit 2faed50e5c2165647e389d794de673038d56241e
Author: redphx <96280+redphx@users.noreply.github.com>
Date:   Fri May 24 18:09:25 2024 +0700

    Make shortcuts work with controller

commit b8f6c503ba7969de3a232644d3f6b53532a4b7bb
Author: redphx <96280+redphx@users.noreply.github.com>
Date:   Fri May 24 17:01:15 2024 +0700

    Update translations

commit 6f6c0899e5a09cd5534e06a9e272bf78c74536dc
Author: redphx <96280+redphx@users.noreply.github.com>
Date:   Fri May 24 17:00:50 2024 +0700

    Preload PrompFont

commit 1bf0f2b9dae77890d35091bed970b942c4d61fbc
Author: redphx <96280+redphx@users.noreply.github.com>
Date:   Fri May 24 07:08:05 2024 +0700

    Render Controller shortcuts settings

commit 2f24965c73a941be2ebc8a3509dc540a47b4e38d
Author: redphx <96280+redphx@users.noreply.github.com>
Date:   Thu May 23 17:21:55 2024 +0700

    Fix not able to capture screenshot after switching games

commit 6ac791e2dfb17215ee82d449047d0cd11d185c42
Author: redphx <96280+redphx@users.noreply.github.com>
Date:   Thu May 23 17:11:19 2024 +0700

    Hijack the Home button

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

@@ -4,12 +4,19 @@ 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: "The bug doesn't happen when I disable Better xCloud script."
+          required: true
+        - label: I have used the search function for [**open and closed issues**](https://github.com/redphx/better-xcloud/issues?q=is%3Aissue) to see if someone else has already submitted the same bug report.
+          required: true
+        - label: I will describe the problem with as much detail as possible.
+          required: true
   - type: dropdown
     id: device_type
     attributes:
@@ -24,40 +31,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"
+      description: "What is the name and version of the browser?"
+      placeholder: "e.g., Chrome 124.0"
     validations:
       required: true
   - type: input
@@ -68,12 +63,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 +84,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

dist/better-xcloud.meta.js

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

src/assets/css/button.styl

@@ -71,9 +71,10 @@
 
     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;

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,6 @@
-.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;
+    height: calc(var(--bx-button-height) * 1.5);
 }
 
 .bx-settings-container {
@@ -98,34 +87,56 @@
 
 .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;
     }
 
 
-    &:focus-within {
-        @media (hover: none) {
-            background-color: #242424;
-        }
+    &:hover, &:focus-within {
+        background-color: #242424;
     }
 
     input {
         align-self: center;
         accent-color: var(--bx-primary-button-color);
+
+        &:focus {
+            accent-color: var(--bx-danger-button-color);
+        }
     }
 
-    select:disabled {
-        -webkit-appearance: none;
-        background: transparent;
-        text-align-last: right;
-        border: none;
-        color: #fff;
+    select {
+        &:disabled {
+            -webkit-appearance: none;
+            background: transparent;
+            text-align-last: right;
+            border: none;
+            color: #fff;
+        }
+    }
+
+    input[type=checkbox], select {
+        &:focus {
+            filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
+        }
+    }
+
+
+    &:has(input:focus), &:has(select:focus) {
+        &::before {
+            content: ' ';
+            border-radius: 4px;
+            border: 2px solid #fff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+        }
     }
 }
 
@@ -161,6 +172,10 @@
     &:hover {
         color: #6dd72b;
     }
+
+    &:focus {
+        text-decoration: underline;
+    }
 }
 
 .bx-settings-custom-user-agent {

src/assets/css/number-stepper.styl

@@ -1,7 +1,9 @@
 .bx-number-stepper {
+    text-align: center;
+
     span {
         display: inline-block;
-        width: 40px;
+        min-width: 40px;
         font-family: var(--bx-monospaced-font);
         font-size: 14px;
     }
@@ -35,6 +37,13 @@
         }
     }
 
+    input[type="range"] {
+        display: block;
+        margin: 12px auto 2px;
+        width: 180px;
+        color: #959595 !important;
+    }
+
     input[type=range]:disabled, button:disabled {
         display: none;
     }

src/assets/css/root.styl

@@ -20,16 +20,15 @@
     --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-game-bar-z-index: 8888;
     --bx-wait-time-box-z-index: 100;
+    --bx-screenshot-animation-z-index: 1;
 }
 
 @font-face {
@@ -88,6 +87,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
     padding: 0 !important;
 }
 
+.bx-prompt {
+    font-family: var(--bx-promptfont-font);
+}
+
 /* Hide UI elements */
 #headerArea, #uhfSkipToMain, .uhf-footer {
     display: none;

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,7 @@
     -webkit-user-select: none;
 }
 
-.bx-quick-settings-tabs {
+.bx-stream-settings-tabs {
     position: fixed;
     top: 0;
     right: 420px;
@@ -39,7 +39,7 @@
 }
 
 
-.bx-quick-settings-tab-contents {
+.bx-stream-settings-tab-contents {
     flex-direction: column;
     position: fixed;
     right: 0;
@@ -86,17 +86,10 @@
             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;
@@ -123,11 +116,74 @@
     }
 }
 
-.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-group="shortcuts"] {
+        > div {
+            &[data-has-gamepad=true] {
+                > div:first-of-type {
+                    display: none;
+                }
+
+                > div:last-of-type {
+                    display: block;
+                }
+            }
+
+            &[data-has-gamepad=false] {
+                > div:first-of-type {
+                    display: block;
+                }
+
+                > div:last-of-type {
+                    display: none;
+                }
+            }
+        }
+
+        .bx-shortcut-profile {
+            width: 100%;
+            height: 36px;
+            display: block;
+            margin-bottom: 10px;
+        }
+
+        .bx-shortcut-note {
+            font-size: 14px;
+        }
+
+        .bx-shortcut-row {
+            display: flex;
+            margin-bottom: 10px;
+
+            label.bx-prompt {
+                flex: 1;
+                font-size: 26px;
+                margin-bottom: 0;
+            }
+
+            .bx-shortcut-actions {
+                flex: 2;
+                position: relative;
+
+                select {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+
+                    &:last-of-type {
+                        opacity: 0;
+                        z-index: calc(var(--bx-stream-settings-z-index) + 1);
+                    }
+                }
+            }
+        }
+    }
 }

src/assets/css/stream.styl

@@ -7,3 +7,49 @@ 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;
+}
+
+@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;
+}

src/assets/css/styles.styl

@@ -10,7 +10,7 @@
 
 @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/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/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/controller.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='M19.193 12.807h3.193m-13.836 0h4.257'/><path d='M10.678 10.678v4.257'/><path d='M13.061 19.193l-5.602 6.359c-.698.698-1.646 1.09-2.633 1.09-2.044 0-3.725-1.682-3.725-3.725a3.73 3.73 0 0 1 .056-.646l2.177-11.194a6.94 6.94 0 0 1 6.799-5.721h11.722c3.795 0 6.918 3.123 6.918 6.918s-3.123 6.918-6.918 6.918h-8.793z'/><path d='M18.939 19.193l5.602 6.359c.698.698 1.646 1.09 2.633 1.09 2.044 0 3.725-1.682 3.725-3.725a3.73 3.73 0 0 0-.056-.646l-2.177-11.194'/>
+</svg>

src/assets/svg/copy.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='4' viewBox='0 0 32 32'>
+    <path d='M1.498 6.772h23.73v23.73H1.498zm5.274-5.274h23.73v23.73'/>
+</svg>

src/assets/svg/cursor-text.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='4' viewBox='0 0 32 32'>
+    <path d='M16 7.3a5.83 5.83 0 0 1 5.8-5.8h2.9m0 29h-2.9a5.83 5.83 0 0 1-5.8-5.8'/><path d='M7.3 30.5h2.9a5.83 5.83 0 0 0 5.8-5.8V7.3a5.83 5.83 0 0 0-5.8-5.8H7.3'/><path d='M11.65 16h8.7'/>
+</svg>

src/assets/svg/display.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='M1.238 21.119c0 1.928 1.565 3.493 3.493 3.493H27.27c1.928 0 3.493-1.565 3.493-3.493V5.961c0-1.928-1.565-3.493-3.493-3.493H4.731c-1.928 0-3.493 1.565-3.493 3.493v15.158zm19.683 8.413H11.08'/>
+</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/mouse-settings.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='4' viewBox='0 0 32 32'>
+    <g transform='matrix(1.10403 0 0 1.10403 -4.17656 -.560429)' fill='none' stroke='#fff'><g stroke-width='1.755'><path d='M24.49 16.255l.01-8.612A6.15 6.15 0 0 0 18.357 1.5h-5.714A6.15 6.15 0 0 0 6.5 7.643v13.715a6.15 6.15 0 0 0 6.143 6.143h5.714'/><path d='M15.5 12.501v-6'/></g><circle cx='48' cy='48' r='15' stroke-width='7.02' transform='matrix(.142357 0 0 .142357 17.667421 16.541885)'/><path d='M24.61 27.545h-.214l-1.711.955c-.666-.224-1.284-.572-1.821-1.025l-.006-1.922-.107-.182-1.701-.969c-.134-.678-.134-1.375 0-2.053l1.7-.966.107-.182.009-1.922c.537-.454 1.154-.803 1.82-1.029l1.708.955h.214l1.708-.955c.666.224 1.284.572 1.821 1.025l.006 1.922.107.182 1.7.968c.134.678.134 1.375 0 2.053l-1.7.966-.107.182-.009 1.922c-.536.455-1.154.804-1.819 1.029l-1.706-.955z' stroke-width='.999'/></g>
+</svg>

src/assets/svg/mouse.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='M26.256 8.185c0-3.863-3.137-7-7-7h-6.512c-3.863 0-7 3.137-7 7v15.629c0 3.863 3.137 7 7 7h6.512c3.863 0 7-3.137 7-7V8.185z'/><path d='M16 13.721V6.883'/>
+</svg>

src/assets/svg/new.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='4' viewBox='0 0 32 32'>
+    <path d='M26.875 30.5H5.125c-.663 0-1.208-.545-1.208-1.208V2.708c0-.663.545-1.208 1.208-1.208h14.5l8.458 8.458v19.333c0 .663-.545 1.208-1.208 1.208z'/><path d='M19.625 1.5v8.458h8.458m-15.708 9.667h7.25'/><path d='M16 16v7.25'/>
+</svg>

src/assets/svg/question.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='4' viewBox='0 0 32 32'>
+    <g transform='matrix(.256867 0 0 .256867 -16.878964 -18.049342)'><circle cx='128' cy='180' r='12' fill='#fff'/><path d='M128 144v-8c17.67 0 32-12.54 32-28s-14.33-28-32-28-32 12.54-32 28v4' fill='none' stroke='#fff' stroke-width='16'/></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/remote-play.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='4' viewBox='0 0 32 32'>
+    <g transform='matrix(.492308 0 0 .581818 -14.7692 -11.6364)'><clipPath id='A'><path d='M30 20h65v55H30z'/></clipPath><g clip-path='url(#A)'><g transform='matrix(.395211 0 0 .334409 11.913 7.01124)'><g transform='matrix(.555556 0 0 .555556 57.8889 -20.2417)' fill='none' stroke='#fff' stroke-width='13.88'><path d='M200 140.564c-42.045-33.285-101.955-33.285-144 0M168 165c-23.783-17.3-56.217-17.3-80 0'/></g><g transform='matrix(-.555556 0 0 -.555556 200.111 262.393)'><g transform='matrix(1 0 0 1 0 11.5642)'><path d='M200 129c-17.342-13.728-37.723-21.795-58.636-24.198C111.574 101.378 80.703 109.444 56 129' fill='none' stroke='#fff' stroke-width='13.88'/></g><path d='M168 165c-23.783-17.3-56.217-17.3-80 0' fill='none' stroke='#fff' stroke-width='13.88'/></g><g transform='matrix(.75 0 0 .75 32 32)'><path d='M24 72h208v93.881H24z' fill='none' stroke='#fff' stroke-linejoin='miter' stroke-width='9.485'/><circle cx='188' cy='128' r='12' stroke-width='10' transform='matrix(.708333 0 0 .708333 71.8333 12.8333)'/><path d='M24.358 103.5h110' fill='none' stroke='#fff' stroke-linecap='butt' stroke-width='10.282'/></g></g></g></g>
+</svg>

src/assets/svg/stream-settings.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'>
+    <g transform='matrix(.142357 0 0 .142357 -2.22021 -2.22164)' fill='none' stroke='#fff' stroke-width='16'><circle cx='128' cy='128' r='40'/><path d='M130.05 206.11h-4L94 224c-12.477-4.197-24.049-10.711-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9 147.24a99.16 99.16 0 0 1 0-38.46l31.84-18.1c.65-1.15 1.32-2.29 2-3.41l.16-36C69.951 42.757 81.521 36.218 94 32l32 17.89h4L162 32c12.477 4.197 24.049 10.711 34.11 19.2l.12 36c.71 1.12 1.38 2.25 2 3.41l31.85 18.14a99.16 99.16 0 0 1 0 38.46l-31.84 18.1c-.65 1.15-1.32 2.29-2 3.41l-.16 36A104.59 104.59 0 0 1 162 224l-31.95-17.89z'/></g>
+</svg>

src/assets/svg/stream-stats.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='M1.181 24.55v-3.259c0-8.19 6.576-14.952 14.767-14.98H16c8.13 0 14.819 6.69 14.819 14.819v3.42c0 .625-.515 1.14-1.14 1.14H2.321c-.625 0-1.14-.515-1.14-1.14z'/><path d='M16 6.311v4.56M12.58 25.69l9.12-12.54m4.559 5.7h4.386m-29.266 0H5.74'/>
+</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/trash.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='4' viewBox='0 0 32 32'>
+    <path d='M29.5 6.182h-27m9.818 7.363v9.818m7.364-9.818v9.818'/><path d='M27.045 6.182V29.5c0 .673-.554 1.227-1.227 1.227H6.182c-.673 0-1.227-.554-1.227-1.227V6.182m17.181 0V3.727a2.47 2.47 0 0 0-2.455-2.455h-7.364a2.47 2.47 0 0 0-2.455 2.455v2.455'/>
+</svg>

src/index.ts

@@ -1,31 +1,35 @@
-import "./utils/global";
-import { BxEvent } from "./utils/bx-event";
-import { BX_FLAGS } from "./utils/bx-flags";
-import { BxExposed } from "./utils/bx-exposed";
-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 { StreamBadges } from "./modules/stream/stream-badges";
-import { StreamStats } from "./modules/stream/stream-stats";
-import { addCss } from "./utils/css";
-import { Toast } from "./utils/toast";
-import { setupBxUi, updateVideoPlayerCss } from "./modules/ui/ui";
-import { PrefKey, getPref } from "./utils/preferences";
-import { LoadingScreen } from "./modules/loading-screen";
-import { MouseCursorHider } from "./modules/mkb/mouse-cursor-hider";
-import { TouchController } from "./modules/touch-controller";
-import { watchHeader } from "./modules/ui/header";
-import { checkForUpdate, disablePwa } 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 { injectStreamMenuButtons } from "./modules/stream/stream-ui";
+import "@utils/global";
+import { BxEvent } from "@utils/bx-event";
+import { BX_FLAGS } from "@utils/bx-flags";
+import { BxExposed } from "@utils/bx-exposed";
+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 { StreamBadges } from "@modules/stream/stream-badges";
+import { StreamStats } from "@modules/stream/stream-stats";
+import { addCss } from "@utils/css";
+import { Toast } from "@utils/toast";
+import { setupStreamUi, updateVideoPlayerCss } from "@modules/ui/ui";
+import { PrefKey, getPref } from "@utils/preferences";
+import { LoadingScreen } from "@modules/loading-screen";
+import { MouseCursorHider } from "@modules/mkb/mouse-cursor-hider";
+import { TouchController } from "@modules/touch-controller";
+import { watchHeader } from "@modules/ui/header";
+import { checkForUpdate, disablePwa } 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 { overridePreloadState } from "@utils/preload-state";
+import { patchAudioContext, patchCanvasContext, patchMeControl, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
+import { AppInterface, STATES } from "@utils/global";
+import { injectStreamMenuButtons } from "@modules/stream/stream-ui";
+import { BxLogger } from "@utils/bx-logger";
+import { GameBar } from "./modules/game-bar/game-bar";
+import { Screenshot } from "./utils/screenshot";
+
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -40,7 +44,7 @@ if (window.location.pathname.includes('/auth/msa')) {
     throw new Error('[Better xCloud] Refreshing the page after logging in');
 }
 
-console.log(`[Better xCloud] readyState: ${document.readyState}`);
+BxLogger.info('readyState', document.readyState);
 
 if (BX_FLAGS.SafariWorkaround && document.readyState !== 'loading') {
     // Stop loading
@@ -122,9 +126,7 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
     }
 
     // Setup UI
-    setupBxUi();
-
-
+    setupStreamUi();
 });
 
 // Setup loading screen
@@ -142,33 +144,22 @@ window.addEventListener(BxEvent.STREAM_STARTING, e => {
 });
 
 window.addEventListener(BxEvent.STREAM_PLAYING, e => {
-    const $video = (e as any).$video;
+    const $video = (e as any).$video as HTMLVideoElement;
     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;
+    if (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') {
+        const gameBar = GameBar.getInstance();
+        gameBar.reset();
+        gameBar.enable();
+        gameBar.showBar();
+    }
+
+    Screenshot.updateCanvasSize($video.videoWidth, $video.videoHeight);
+
     updateVideoPlayerCss();
-
-    // Setup screenshot button
-    if (PREF_SCREENSHOT_BUTTON_POSITION !== 'none') {
-        const $btn = document.querySelector('.bx-screenshot-button')! as HTMLElement;
-        $btn.style.display = 'block';
-
-        if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') {
-            $btn.style.right = '0';
-        } else {
-            $btn.style.left = '0';
-        }
-    }
 });
 
 window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
@@ -181,41 +172,84 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
     }
 
     STATES.isPlaying = false;
+    STATES.currentStream = {};
+    window.BX_EXPOSED.shouldShowSensorControls = false;
 
     // Stop MKB listeners
     getPref(PrefKey.MKB_ENABLED) && MkbHandler.INSTANCE.destroy();
 
-    const $quickBar = document.querySelector('.bx-quick-settings-bar');
-    if ($quickBar) {
-        $quickBar.classList.add('bx-gone');
+    const $streamSettingsDialog = document.querySelector('.bx-stream-settings-dialog');
+    if ($streamSettingsDialog) {
+        $streamSettingsDialog.classList.add('bx-gone');
     }
 
     STATES.currentStream.audioGainNode = null;
     STATES.currentStream.$video = null;
     StreamStats.onStoppedPlaying();
 
-    const $screenshotBtn = document.querySelector('.bx-screenshot-button');
-    if ($screenshotBtn) {
-        $screenshotBtn.removeAttribute('style');
-    }
-
     MouseCursorHider.stop();
     TouchController.reset();
+    GameBar.getInstance().disable();
+});
+
+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;
+            }
+
+            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();
 
-    if (getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL)) {
-        patchAudioContext();
-    }
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
+    getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
 
-    PreloadedState.override();
+    STATES.hasTouchSupport && TouchController.updateCustomList();
+    overridePreloadState();
 
     VibrationManager.initialSetup();
 
@@ -225,13 +259,14 @@ function main() {
     // Setup UI
     addCss();
     Toast.setup();
-    BX_FLAGS.PreloadUi && setupBxUi();
+    (getPref(PrefKey.GAME_BAR_POSITION) !== 'off') && GameBar.getInstance();
+    BX_FLAGS.PreloadUi && setupStreamUi();
 
     StreamBadges.setupEvents();
     StreamStats.setupEvents();
     MkbHandler.setupEvents();
 
-    Patcher.initialize();
+    Patcher.init();
 
     disablePwa();
 

src/macros/build.ts

@@ -1,7 +1,6 @@
 import stylus from 'stylus';
 
-// @ts-ignore
-import cssStr from "../assets/css/styles.styl" with { type: "text" };
+import cssStr from "@assets/css/styles.styl" with { type: "text" };
 
 const generatedCss = await (stylus(cssStr, {})
 	.set('filename', 'styles.css')

src/modules/controller-shortcut.ts

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

src/modules/dialog.ts

@@ -1,20 +1,21 @@
-import { t } from "../utils/translation";
-import { CE, createButton, ButtonStyle, Icon } from "../utils/html";
+import { t } from "@utils/translation";
+import { CE, createButton, ButtonStyle } from "@utils/html";
+import { BxIcon } from "@utils/bx-icon";
 
-type DialogOptions = {
-    title?: string;
-    className?: string;
-    content?: string | HTMLElement;
-    hideCloseButton?: boolean;
-    onClose?: string;
-    helpUrl?: string;
-}
+type DialogOptions = Partial<{
+    title: string;
+    className: string;
+    content: string | HTMLElement;
+    hideCloseButton: boolean;
+    onClose: string;
+    helpUrl: string;
+}>;
 
 export class Dialog {
-    $dialog?: HTMLElement;
-    $title?: HTMLElement;
-    $content?: HTMLElement;
-    $overlay?: Element | null;
+    $dialog: HTMLElement;
+    $title: HTMLElement;
+    $content: HTMLElement;
+    $overlay: HTMLElement;
 
     onClose: any;
 
@@ -29,14 +30,17 @@ export class Dialog {
         } = options;
 
         // Create dialog overlay
-        this.$overlay = document.querySelector('.bx-dialog-overlay');
-        if (!this.$overlay) {
+        const $overlay = document.querySelector('.bx-dialog-overlay') as HTMLElement;
+
+        if (!$overlay) {
             this.$overlay = CE('div', {'class': 'bx-dialog-overlay bx-gone'});
 
             // Disable right click
-            this.$overlay!.addEventListener('contextmenu', e => e.preventDefault());
+            this.$overlay.addEventListener('contextmenu', e => e.preventDefault());
 
-            document.documentElement.appendChild(this.$overlay!);
+            document.documentElement.appendChild(this.$overlay);
+        } else {
+            this.$overlay = $overlay;
         }
 
         let $close;
@@ -44,14 +48,14 @@ export class Dialog {
         this.$dialog = CE('div', {'class': `bx-dialog ${className || ''} bx-gone`},
                 this.$title = CE('h2', {}, CE('b', {}, title),
                         helpUrl && createButton({
-                                icon: Icon.QUESTION,
+                                icon: BxIcon.QUESTION,
                                 style: ButtonStyle.GHOST,
                                 title: t('help'),
                                 url: helpUrl,
                             }),
                     ),
                 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 => {
@@ -72,19 +76,19 @@ export class Dialog {
         document.activeElement && (document.activeElement as HTMLElement).blur();
 
         if (newOptions && newOptions.title) {
-            this.$title!.querySelector('b')!.textContent = newOptions.title;
-            this.$title!.classList.remove('bx-gone');
+            this.$title.querySelector('b')!.textContent = newOptions.title;
+            this.$title.classList.remove('bx-gone');
         }
 
-        this.$dialog!.classList.remove('bx-gone');
-        this.$overlay!.classList.remove('bx-gone');
+        this.$dialog.classList.remove('bx-gone');
+        this.$overlay.classList.remove('bx-gone');
 
         document.body.classList.add('bx-no-scroll');
     }
 
     hide(e?: any) {
-        this.$dialog!.classList.add('bx-gone');
-        this.$overlay!.classList.add('bx-gone');
+        this.$dialog.classList.add('bx-gone');
+        this.$overlay.classList.add('bx-gone');
 
         document.body.classList.remove('bx-no-scroll');
 
@@ -92,7 +96,7 @@ export class Dialog {
     }
 
     toggle() {
-        this.$dialog!.classList.toggle('bx-gone');
-        this.$overlay!.classList.toggle('bx-gone');
+        this.$dialog.classList.toggle('bx-gone');
+        this.$overlay.classList.toggle('bx-gone');
     }
 }

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,136 @@
+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.hasTouchSupport && (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;
+    }
+
+    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

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

src/modules/mkb/definitions.ts

@@ -1,65 +1,69 @@
-import type { GamepadKeyNameType } from "../../types/mkb";
+import type { GamepadKeyNameType } from "@/types/mkb";
+import { PrompFont } from "@/utils/prompt-font";
 
-export const GamepadKey: DualEnum = {};
-GamepadKey[GamepadKey.A = 0] = 'A';
-GamepadKey[GamepadKey.B = 1] = 'B';
-GamepadKey[GamepadKey.X = 2] = 'X';
-GamepadKey[GamepadKey.Y = 3] = 'Y';
-GamepadKey[GamepadKey.LB = 4] = 'LB';
-GamepadKey[GamepadKey.RB = 5] = 'RB';
-GamepadKey[GamepadKey.LT = 6] = 'LT';
-GamepadKey[GamepadKey.RT = 7] = 'RT';
-GamepadKey[GamepadKey.SELECT = 8] = 'SELECT';
-GamepadKey[GamepadKey.START = 9] = 'START';
-GamepadKey[GamepadKey.L3 = 10] = 'L3';
-GamepadKey[GamepadKey.R3 = 11] = 'R3';
-GamepadKey[GamepadKey.UP = 12] = 'UP';
-GamepadKey[GamepadKey.DOWN = 13] = 'DOWN';
-GamepadKey[GamepadKey.LEFT = 14] = 'LEFT';
-GamepadKey[GamepadKey.RIGHT = 15] = 'RIGHT';
-GamepadKey[GamepadKey.HOME = 16] = 'HOME';
+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,
 
-GamepadKey[GamepadKey.LS_UP = 100] = 'LS_UP';
-GamepadKey[GamepadKey.LS_DOWN = 101] = 'LS_DOWN';
-GamepadKey[GamepadKey.LS_LEFT = 102] = 'LS_LEFT';
-GamepadKey[GamepadKey.LS_RIGHT = 103] = 'LS_RIGHT';
-GamepadKey[GamepadKey.RS_UP = 200] = 'RS_UP';
-GamepadKey[GamepadKey.RS_DOWN = 201] = 'RS_DOWN';
-GamepadKey[GamepadKey.RS_LEFT = 202] = 'RS_LEFT';
-GamepadKey[GamepadKey.RS_RIGHT = 203] = 'RS_RIGHT';
+    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.A]: ['A', PrompFont.A],
+    [GamepadKey.B]: ['B', PrompFont.B],
+    [GamepadKey.X]: ['X', PrompFont.X],
+    [GamepadKey.Y]: ['Y', PrompFont.Y],
 
-    [GamepadKey.LB]: ['LB', '↘'],
-    [GamepadKey.RB]: ['RB', '↙'],
-    [GamepadKey.LT]: ['LT', '↖'],
-    [GamepadKey.RT]: ['RT', '↗'],
+    [GamepadKey.LB]: ['LB', PrompFont.LB],
+    [GamepadKey.RB]: ['RB', PrompFont.RB],
+    [GamepadKey.LT]: ['LT', PrompFont.LT],
+    [GamepadKey.RT]: ['RT', PrompFont.RT],
 
-    [GamepadKey.SELECT]: ['Select', '⇺'],
-    [GamepadKey.START]: ['Start', '⇻'],
-    [GamepadKey.HOME]: ['Home', ''],
+    [GamepadKey.SELECT]: ['Select', PrompFont.SELECT],
+    [GamepadKey.START]: ['Start', PrompFont.START],
+    [GamepadKey.HOME]: ['Home', PrompFont.HOME],
 
-    [GamepadKey.UP]: ['D-Pad Up', '≻'],
-    [GamepadKey.DOWN]: ['D-Pad Down', '≽'],
-    [GamepadKey.LEFT]: ['D-Pad Left', '≺'],
-    [GamepadKey.RIGHT]: ['D-Pad Right', '≼'],
+    [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', '↺'],
-    [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.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', '↻'],
-    [GamepadKey.RS_UP]: ['Right Stick Up', '↿'],
-    [GamepadKey.RS_DOWN]: ['Right Stick Down', '⇃'],
-    [GamepadKey.RS_LEFT]: ['Right Stick Left', '↽'],
-    [GamepadKey.RS_RIGHT]: ['Right Stick 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],
 };
 
 
@@ -74,10 +78,11 @@ export enum MouseButtonCode {
     MIDDLE_CLICK = 'Mouse1',
 };
 
-export const MouseMapTo: DualEnum = {};
-MouseMapTo[MouseMapTo.OFF = 0] = 'OFF';
-MouseMapTo[MouseMapTo.LS = 1] = 'LS';
-MouseMapTo[MouseMapTo.RS = 2] = 'RS';
+export enum MouseMapTo {
+    OFF = 0,
+    LS = 1,
+    RS = 2,
+}
 
 
 export enum WheelCode {

src/modules/mkb/mkb-handler.ts

@@ -1,16 +1,20 @@
 import { MkbPreset } from "./mkb-preset";
 import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo } from "./definitions";
-import { createButton, Icon, ButtonStyle, CE } from "../../utils/html";
-import { BxEvent } from "../../utils/bx-event";
-import { PrefKey, getPref } from "../../utils/preferences";
-import { Toast } from "../../utils/toast";
-import { t } from "../../utils/translation";
-import { LocalDb } from "../../utils/local-db";
+import { createButton, ButtonStyle, CE } from "@utils/html";
+import { BxEvent } from "@utils/bx-event";
+import { PrefKey, getPref } from "@utils/preferences";
+import { Toast } from "@utils/toast";
+import { t } from "@utils/translation";
+import { LocalDb } from "@utils/local-db";
 import { KeyHelper } from "./key-helper";
-import type { MkbStoredPreset } from "../../types/mkb";
-import { showStreamSettings } from "../stream/stream-ui";
-import { STATES } from "../../utils/global";
-import { UserAgent } from "../../utils/user-agent";
+import type { MkbStoredPreset } from "@/types/mkb";
+import { showStreamSettings } from "@modules/stream/stream-ui";
+import { STATES } from "@utils/global";
+import { UserAgent } from "@utils/user-agent";
+import { BxLogger } from "@utils/bx-logger";
+import { BxIcon } from "@utils/bx-icon";
+
+const LOG_TAG = 'MkbHandler';
 
 /*
 This class uses some code from Yuzu emulator to handle mouse's movements
@@ -61,11 +65,11 @@ export class MkbHandler {
 
     #$message?: HTMLElement;
 
-    #STICK_MAP: {[index: keyof typeof GamepadKey]: (number | number[])[]};
-    #LEFT_STICK_X: number[] = [];
-    #LEFT_STICK_Y: number[] = [];
-    #RIGHT_STICK_X: number[] = [];
-    #RIGHT_STICK_Y: number[] = [];
+    #STICK_MAP: {[key in GamepadKey]?: [GamepadKey[], number, number]};
+    #LEFT_STICK_X: GamepadKey[] = [];
+    #LEFT_STICK_Y: GamepadKey[] = [];
+    #RIGHT_STICK_X: GamepadKey[] = [];
+    #RIGHT_STICK_Y: GamepadKey[] = [];
 
     constructor() {
         this.#STICK_MAP = {
@@ -125,11 +129,11 @@ export class MkbHandler {
         gamepad.timestamp = performance.now();
     }
 
-    #pressButton = (buttonIndex: number, pressed: boolean) => {
+    #pressButton = (buttonIndex: GamepadKey, pressed: boolean) => {
         const virtualGamepad = this.#getVirtualGamepad();
 
         if (buttonIndex >= 100) {
-            let [valueArr, axisIndex] = this.#STICK_MAP[buttonIndex];
+            let [valueArr, axisIndex] = this.#STICK_MAP[buttonIndex]!;
             valueArr = valueArr as number[];
             axisIndex = axisIndex as number;
 
@@ -145,7 +149,7 @@ export class MkbHandler {
             let value;
             if (valueArr.length) {
                 // Get value of the last key of the axis
-                value = this.#STICK_MAP[valueArr[valueArr.length - 1]][2] as number;
+                value = this.#STICK_MAP[valueArr[valueArr.length - 1]]![2] as number;
             } else {
                 value = 0;
             }
@@ -281,7 +285,7 @@ export class MkbHandler {
 
         this.#allowStickDecaying = false;
         this.#detectMouseStoppedTimeout && clearTimeout(this.#detectMouseStoppedTimeout);
-        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 100);
+        this.#detectMouseStoppedTimeout = window.setTimeout(this.#onMouseStopped.bind(this), 10);
 
         const deltaX = e.movementX;
         const deltaY = e.movementY;
@@ -378,7 +382,7 @@ export class MkbHandler {
 
         this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'},
                 createButton({
-                    icon: Icon.MOUSE_SETTINGS,
+                    icon: BxIcon.MOUSE_SETTINGS,
                     style: ButtonStyle.PRIMARY,
                     onClick: e => {
                         e.preventDefault();
@@ -389,7 +393,7 @@ export class MkbHandler {
                 }),
                 CE('div', {},
                     CE('p', {}, t('mkb-click-to-activate')),
-                    CE('p', {}, t<any>('press-key-to-toggle-mkb')({key: 'F8'})),
+                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
                 ),
             );
 
@@ -472,7 +476,7 @@ export class MkbHandler {
         getPref(PrefKey.MKB_ENABLED) && !UserAgent.isMobile() && window.addEventListener(BxEvent.STREAM_PLAYING, () => {
             // Enable MKB
             if (!STATES.currentStream.titleInfo?.details.hasMkbSupport) {
-                console.log('Emulate MKB');
+                BxLogger.info(LOG_TAG, 'Emulate MKB');
                 MkbHandler.INSTANCE.init();
             }
         });

src/modules/mkb/mkb-preset.ts

@@ -1,9 +1,9 @@
-import { t } from "../../utils/translation";
-import { SettingElementType } from "../../utils/settings";
+import { t } from "@utils/translation";
+import { SettingElementType } from "@utils/settings";
 import { GamepadKey, MouseButtonCode, MouseMapTo, MkbPresetKey } from "./definitions";
 import { MkbHandler } from "./mkb-handler";
-import type { MkbPresetData, MkbConvertedPresetData } from "../../types/mkb";
-import type { PreferenceSettings } from "../../types/preferences";
+import type { MkbPresetData, MkbConvertedPresetData } from "@/types/mkb";
+import type { PreferenceSettings } from "@/types/preferences";
 
 
 export class MkbPreset {
@@ -127,8 +127,8 @@ export class MkbPreset {
             [MkbPresetKey.MOUSE_SENSITIVITY_X]: 50,
             [MkbPresetKey.MOUSE_SENSITIVITY_Y]: 50,
             [MkbPresetKey.MOUSE_DEADZONE_COUNTERWEIGHT]: 20,
-            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 18,
-            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 6,
+            [MkbPresetKey.MOUSE_STICK_DECAY_STRENGTH]: 100,
+            [MkbPresetKey.MOUSE_STICK_DECAY_MIN]: 10,
         },
     };
 

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 "../dialog";
-import { getPref, setPref, PrefKey } from "../../utils/preferences";
+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 { LocalDb } from "../../utils/local-db";
-import { Icon } from "../../utils/html";
-import { SettingElement } from "../../utils/settings";
-import type { MkbPresetData, MkbStoredPresets } from "../../types/mkb";
+import { LocalDb } from "@utils/local-db";
+import { BxIcon } from "@utils/bx-icon";
+import { SettingElement } from "@utils/settings";
+import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb";
 
 
 type MkbRemapperElements = {
@@ -340,7 +340,7 @@ export class MkbRemapper {
                 // Rename button
                 createButton({
                     title: t('rename'),
-                    icon: Icon.CURSOR_TEXT,
+                    icon: BxIcon.CURSOR_TEXT,
                     onClick: e => {
                         const preset = this.#getCurrentPreset();
 
@@ -357,7 +357,7 @@ export class MkbRemapper {
 
                 // New button
                 createButton({
-                      icon: Icon.NEW,
+                      icon: BxIcon.NEW,
                       title: t('new'),
                       onClick: e => {
                           let newName = promptNewName('');
@@ -375,7 +375,7 @@ export class MkbRemapper {
 
                 // Copy button
                 createButton({
-                        icon: Icon.COPY,
+                        icon: BxIcon.COPY,
                         title: t('copy'),
                         onClick: e => {
                             const preset = this.#getCurrentPreset();
@@ -395,7 +395,7 @@ export class MkbRemapper {
 
                 // Delete button
                 createButton({
-                        icon: Icon.TRASH,
+                        icon: BxIcon.TRASH,
                         style: ButtonStyle.DANGER,
                         title: t('delete'),
                         onClick: e => {
@@ -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),
                 );

src/modules/patcher.ts

@@ -1,7 +1,22 @@
-import { STATES } from "../utils/global";
-import { BX_FLAGS } from "../utils/bx-flags";
-import { getPref, PrefKey } from "../utils/preferences";
-import { VibrationManager } from "./vibration-manager";
+import { SCRIPT_VERSION, STATES } from "@utils/global";
+import { BX_FLAGS } from "@utils/bx-flags";
+import { getPref, PrefKey } from "@utils/preferences";
+import { VibrationManager } from "@modules/vibration-manager";
+import { BxLogger } from "@utils/bx-logger";
+import { hashCode, renderString } from "@utils/utils";
+import { BxEvent } from "@/utils/bx-event";
+
+import codeControllerShortcuts from "./patches/controller-shortcuts.js" with { type: "text" };
+import codeLocalCoOpEnable from "./patches/local-co-op-enable.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" };
+
+type PatchArray = (keyof typeof PATCHES)[];
+
+const ENDING_CHUNKS_PATCH_NAME = 'loadingEndingChunks';
+
+const LOG_TAG = 'Patcher';
 
 const PATCHES = {
     // Disable ApplicationInsights.track() function
@@ -36,37 +51,40 @@ const PATCHES = {
         }
 
         const newCode = [
-                'this.trackEvent',
-                'this.trackPageView',
-                'this.trackHttpCompleted',
-                'this.trackHttpFailed',
-                'this.trackError',
-                'this.trackErrorLike',
-                'this.onTrackEvent',
-                '()=>{}',
-            ].join('=');
+            'this.trackEvent',
+            'this.trackPageView',
+            'this.trackHttpCompleted',
+            'this.trackHttpFailed',
+            'this.trackError',
+            'this.trackErrorLike',
+            'this.onTrackEvent',
+            '()=>{}',
+        ].join('=');
 
         return str.replace(text, newCode + ';' + text);
     },
 
     // 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"
@@ -80,41 +98,40 @@ 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);
     },
 
-    // Fix the Guide/Nexus button not working in Remote Play
-    remotePlayGuideWorkaround(str: string) {
-        const text = 'nexusButtonHandler:this.featureGates.EnableClientGuideInStream';
+    // Disable achievement toast in Remote Play
+    remotePlayDisableAchievementToast(str: string) {
+        const text = '.AchievementUnlock:{';
         if (!str.includes(text)) {
             return false;
         }
 
-        return str.replace(text, `nexusButtonHandler: !window.BX_REMOTE_PLAY_CONFIG && this.featureGates.EnableClientGuideInStream`);
+        const newCode = `
+if (!!window.BX_REMOTE_PLAY_CONFIG) {
+    return;
+}
+`;
+
+        return str.replace(text, text + newCode);
     },
 
     // Disable trackEvent() function
@@ -137,15 +154,36 @@ const PATCHES = {
         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) {
@@ -175,20 +213,8 @@ const PATCHES = {
             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;
     },
 
@@ -238,14 +264,13 @@ e.rightTriggerMotorPercent = e.rightTriggerMotorPercent * window.BX_VIBRATION_IN
 
     // Add patches that are only needed when start playing
     loadingEndingChunks(str: string) {
-        const text = 'Symbol("ChatSocketPlugin")';
+        const text = '"FamilySagaManager"';
         if (!str.includes(text)) {
             return false;
         }
 
-        console.log('[Better xCloud] Remaining patches:', PATCH_ORDERS);
+        BxLogger.info(LOG_TAG, 'Remaining patches:', PATCH_ORDERS);
         PATCH_ORDERS = PATCH_ORDERS.concat(PLAYING_PATCH_ORDERS);
-        Patcher.cleanupPatches();
 
         return str;
     },
@@ -269,7 +294,13 @@ e.rightTriggerMotorPercent = e.rightTriggerMotorPercent * window.BX_VIBRATION_IN
             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;
     },
 
@@ -279,27 +310,7 @@ e.rightTriggerMotorPercent = e.rightTriggerMotorPercent * window.BX_VIBRATION_IN
             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}\`);
-    console.log('[Better xCloud] ✅ Successfully patched local co-op support');
-} else {
-    console.log('[Better xCloud] ❌ 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;
@@ -323,11 +334,34 @@ if (match) {
             return false;
         }
 
-        const newCode = `
-const titleInfo = window.BX_EXPOSED.getTitleInfo();
-if (!titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport) {
+        let remotePlayCode = '';
+        if (getPref(PrefKey.STREAM_TOUCH_CONTROLLER) !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
+            remotePlayCode = `
+const gamepads = window.navigator.getGamepads();
+let gamepadFound = false;
+
+for (let gamepad of gamepads) {
+    if (gamepad && gamepad.connected) {
+        gamepadFound = true;
+        break;
+    }
+}
+
+if (gamepadFound) {
     return;
 }
+`;
+        }
+
+        const newCode = `
+if (!!window.BX_REMOTE_PLAY_CONFIG) {
+    ${remotePlayCode}
+} else {
+    const titleInfo = window.BX_EXPOSED.getTitleInfo();
+    if (titleInfo && !titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport) {
+        return;
+    }
+}
 `;
 
         str = str.replace(text, newCode + text);
@@ -350,13 +384,19 @@ if (!titleInfo.details.hasTouchSupport && !titleInfo.details.hasFakeTouchSupport
             return false;
         }
 
-        // Restore the "..." button
-        str = str.replace(text, 'e.guideUI = null;' + text);
+        let newCode = `
+// Expose onShowStreamMenu
+window.BX_EXPOSED.showStreamMenu = e.onShowStreamMenu;
+// Restore the "..." button
+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;
     },
 
@@ -389,7 +429,7 @@ window.BX_EXPOSED.onPollingModeChanged && window.BX_EXPOSED.onPollingModeChanged
 
         const newCode = `
 ${titleInfoVar} = window.BX_EXPOSED.modifyTitleInfo(${titleInfoVar});
-console.log(${titleInfoVar});
+BxLogger.info('patchXcloudTitleInfo', ${titleInfoVar});
 `;
         str = str.substring(0, backetIndex + 1) + newCode + str.substring(backetIndex + 1);
         return str;
@@ -415,87 +455,187 @@ Object.assign(${configsVar}.inputConfiguration, {
     enableKeyboardInput: false,
     enableAbsoluteMouse: false,
 });
-console.log(${configsVar});
+BxLogger.info('patchRemotePlayMkb', ${configsVar});
 `;
 
         str = str.substring(0, backetIndex + 1) + newCode + str.substring(backetIndex + 1);
         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 = `;
+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);
 };
 
-let PATCH_ORDERS = [
-    getPref(PrefKey.BLOCK_TRACKING) && [
+window.dispatchEvent(new Event('${BxEvent.STREAM_SESSION_READY}'))
+
+true` + text;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+};
+
+let PATCH_ORDERS: PatchArray = [
+    'disableStreamGate',
+    'overrideSettings',
+    'broadcastPollingMode',
+
+    'exposeStreamSession',
+
+    getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
+    getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
+    getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',
+
+    ...(getPref(PrefKey.BLOCK_TRACKING) ? [
         'disableAiTrack',
         'disableTelemetry',
-    ],
 
-    ['disableStreamGate'],
-
-    ['broadcastPollingMode'],
-
-    getPref(PrefKey.UI_LAYOUT) === 'tv' && ['tvLayout'],
-
-    BX_FLAGS.EnableXcloudLogging && [
-        'enableConsoleLogging',
-        'enableXcloudLogger',
-    ],
-
-    getPref(PrefKey.LOCAL_CO_OP_ENABLED) && ['supportLocalCoOp'],
-
-    getPref(PrefKey.BLOCK_TRACKING) && [
         'blockWebRtcStatsCollector',
         'disableIndexDbLogging',
-    ],
 
-    getPref(PrefKey.BLOCK_TRACKING) && [
         'disableTelemetryProvider',
         'disableTrackEvent',
-    ],
+    ] : []),
 
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && ['remotePlayKeepAlive'],
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && ['remotePlayDirectConnectUrl'],
-
-    [
-        'overrideSettings',
-    ],
-
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && STATES.hasTouchSupport && ['patchUpdateInputConfigurationAsync'],
-
-    getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && ['forceFortniteConsole'],
-];
+    ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
+        'remotePlayKeepAlive',
+        'remotePlayDirectConnectUrl',
+        'remotePlayDisableAchievementToast',
+        STATES.hasTouchSupport && 'patchUpdateInputConfigurationAsync',
+    ] : []),
 
+    ...(BX_FLAGS.EnableXcloudLogging ? [
+        'enableConsoleLogging',
+        'enableXcloudLogger',
+    ] : []),
+].filter(item => !!item);
 
 // Only when playing
-const PLAYING_PATCH_ORDERS = [
-    ['patchXcloudTitleInfo'],
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && ['patchRemotePlayMkb'],
+let PLAYING_PATCH_ORDERS: PatchArray = [
+    'patchXcloudTitleInfo',
+    'disableGamepadDisconnectedScreen',
+    'patchStreamHud',
+    'playVibration',
 
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && ['remotePlayConnectMode'],
-    getPref(PrefKey.REMOTE_PLAY_ENABLED) && ['remotePlayGuideWorkaround'],
+    // 'exposeEventTarget',
 
-    ['patchStreamHud'],
+    // 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',
 
-    ['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'],
 
-    BX_FLAGS.EnableXcloudLogging && ['enableConsoleLogging'],
+    STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER) === 'all' && 'patchShowSensorControls',
+    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',
+    STATES.hasTouchSupport && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) !== 100 && 'patchTouchControlDefaultOpacity',
 
-    getPref(PrefKey.BLOCK_TRACKING) && ['blockGamepadStatsCollector'],
+    BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',
 
-    [
-        'disableGamepadDisconnectedScreen',
-    ],
+    'patchPollGamepads',
 
-    getPref(PrefKey.STREAM_COMBINE_SOURCES) && ['streamCombineSources'],
-];
+    getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'streamCombineSources',
+
+    ...(getPref(PrefKey.REMOTE_PLAY_ENABLED) ? [
+        'patchRemotePlayMkb',
+        'remotePlayConnectMode',
+    ] : []),
+].filter(item => !!item);
+
+const ALL_PATCHES = [...PATCH_ORDERS, ...PLAYING_PATCH_ORDERS];
 
 export class Patcher {
     static #patchFunctionBind() {
         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;
@@ -507,18 +647,15 @@ export class Patcher {
                 return nativeBind.apply(this, arguments);
             }
 
+            PatcherCache.init();
+
             if (typeof arguments[1] === 'function') {
-                console.log('[Better xCloud] Restored Function.prototype.bind()');
+                BxLogger.info(LOG_TAG, 'Restored Function.prototype.bind()');
                 Function.prototype.bind = nativeBind;
             }
 
             const orgFunc = this;
             const newFunc = (a: any, item: any) => {
-                if (Patcher.length() === 0) {
-                    orgFunc(a, item);
-                    return;
-                }
-
                 Patcher.patch(item);
                 orgFunc(a, item);
             }
@@ -528,98 +665,189 @@ export class Patcher {
         };
     }
 
-    static length() { return PATCH_ORDERS.length; };
-
-    static patch(item: any) {
+    static patch(item: [[number], { [key: string]: () => {} }]) {
+        // !!! Use "caches" as variable name will break touch controller???
         // console.log('patch', '-----');
-        let appliedPatches;
+        let patchesToCheck: PatchArray;
+        let appliedPatches: PatchArray;
+
+        const patchesMap: Record<string, PatchArray> = {};
 
         for (let id in item[1]) {
-            if (PATCH_ORDERS.length <= 0) {
-                return;
-            }
-
             appliedPatches = [];
-            const func = item[1][id];
-            let str = func.toString();
 
-            for (let groupIndex = 0; groupIndex < PATCH_ORDERS.length; groupIndex++) {
-                const group = PATCH_ORDERS[groupIndex];
-                let modified = false;
-
-                for (let patchIndex = 0; patchIndex < group.length; patchIndex++) {
-                    const patchName = group[patchIndex] as keyof typeof PATCHES;
-                    if (appliedPatches.indexOf(patchName) > -1) {
-                        continue;
-                    }
-
-                    const patchedstr = PATCHES[patchName].call(null, str);
-                    if (!patchedstr) {
-                        // Only stop if the first patch is failed
-                        if (patchIndex === 0) {
-                            break;
-                        } else {
-                            continue;
-                        }
-                    }
-
-                    modified = true;
-                    str = patchedstr;
-
-                    console.log(`[Better xCloud] Applied "${patchName}" patch`);
-                    appliedPatches.push(patchName);
-
-                    // Remove patch from group
-                    group.splice(patchIndex, 1);
-                    patchIndex--;
-                }
-
-                // Apply patched functions
-                if (modified) {
-                    item[1][id] = eval(str);
-                }
-
-                // Remove empty group
-                if (!group.length) {
-                    PATCH_ORDERS.splice(groupIndex, 1);
-                    groupIndex--;
-                }
+            const cachedPatches = PatcherCache.getPatches(id);
+            if (cachedPatches) {
+                patchesToCheck = cachedPatches.slice(0);
+                patchesToCheck.push(...PATCH_ORDERS);
+            } else {
+                patchesToCheck = PATCH_ORDERS.slice(0);
             }
-        }
-    }
 
-    // Remove disabled patches
-    static cleanupPatches() {
-        for (let groupIndex = PATCH_ORDERS.length - 1; groupIndex >= 0; groupIndex--) {
-            const group = PATCH_ORDERS[groupIndex];
-            if (group === false) {
-                PATCH_ORDERS.splice(groupIndex, 1);
+            // Empty patch list
+            if (!patchesToCheck.length) {
                 continue;
             }
 
-            for (let patchIndex = group.length - 1; patchIndex >= 0; patchIndex--) {
-                const patchName = group[patchIndex] as keyof typeof PATCHES;
-                if (!PATCHES[patchName]) {
-                    // Remove disabled patch
-                    group.splice(patchIndex, 1);
+            const func = item[1][id];
+            let str = func.toString();
+
+            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);
+
+                // Not patched
+                if (!patchedStr) {
+                    continue;
+                }
+
+                modified = true;
+                str = patchedStr;
+
+                BxLogger.info(LOG_TAG, `✅ ${patchName}`);
+                appliedPatches.push(patchName);
+
+                // Remove patch
+                patchesToCheck.splice(patchIndex, 1);
+                patchIndex--;
+                PATCH_ORDERS = PATCH_ORDERS.filter(item => item != patchName);
             }
 
-            // Remove empty group
-            if (!group.length) {
-                PATCH_ORDERS.splice(groupIndex, 1);
+            // Apply patched functions
+            if (modified) {
+                item[1][id] = eval(str);
             }
+
+            // Save to cache
+            if (appliedPatches.length) {
+                patchesMap[id] = appliedPatches;
+            }
+        }
+
+        if (Object.keys(patchesMap).length) {
+            PatcherCache.saveToCache(patchesMap);
         }
     }
 
-    static initialize() {
-        if (window.location.pathname.includes('/play/')) {
-            PATCH_ORDERS = PATCH_ORDERS.concat(PLAYING_PATCH_ORDERS);
-        } else {
-            PATCH_ORDERS.push(['loadingEndingChunks']);
-        }
-
-        Patcher.cleanupPatches();
+    static init() {
         Patcher.#patchFunctionBind();
     }
 }
+
+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
+     */
+    static #getSignature(): number {
+        const scriptVersion = SCRIPT_VERSION;
+        const webVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement)?.content;
+        const patches = JSON.stringify(ALL_PATCHES);
+
+        // Calculate signature
+        const sig = hashCode(scriptVersion + webVersion + patches)
+        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)) {
+            // 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');
+        }
+    }
+
+    static #cleanupPatches(patches: PatchArray): PatchArray {
+        return patches.filter(item => {
+            for (const id in PatcherCache.#CACHE) {
+                const cached = PatcherCache.#CACHE[id];
+
+                if (cached.includes(item)) {
+                    return false;
+                }
+            }
+
+            return true;
+        });
+    }
+
+    static getPatches(id: string): PatchArray {
+        return PatcherCache.#CACHE[id];
+    }
+
+    static saveToCache(subCache: Record<string, PatchArray>) {
+        for (const id in subCache) {
+            const patchNames = subCache[id];
+
+            let data = PatcherCache.#CACHE[id];
+            if (!data) {
+                PatcherCache.#CACHE[id] = patchNames;
+            } else {
+                for (const patchName of patchNames) {
+                    if (!data.includes(patchName)) {
+                        data.push(patchName);
+                    }
+                }
+            }
+        }
+
+        // Save to storage
+        window.localStorage.setItem(PatcherCache.#KEY_CACHE, JSON.stringify(PatcherCache.#CACHE));
+    }
+
+    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);
+
+        if (window.location.pathname.includes('/play/')) {
+            PATCH_ORDERS.push(...PLAYING_PATCH_ORDERS);
+        } else {
+            PATCH_ORDERS.push(ENDING_CHUNKS_PATCH_NAME);
+        }
+
+        // Remove cached patches from PATCH_ORDERS & PLAYING_PATCH_ORDERS
+        PATCH_ORDERS = PatcherCache.#cleanupPatches(PATCH_ORDERS);
+        PLAYING_PATCH_ORDERS = PatcherCache.#cleanupPatches(PLAYING_PATCH_ORDERS);
+
+        BxLogger.info(LOG_TAG, PATCH_ORDERS.slice(0));
+        BxLogger.info(LOG_TAG, PLAYING_PATCH_ORDERS.slice(0));
+    }
+}

src/modules/patches/controller-shortcuts.js

@@ -0,0 +1,87 @@
+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 = {};
+    }
+
+    if (btnHome.pressed) {
+        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,
+            };
+        }
+
+        // Listen to next button press
+        const intervalMs = 16;
+        this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
+
+        // Hijack this button
+        return;
+    } else if (this.bxHomeStates[currentGamepad.index]) {
+        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;
+            const intervalMs = isLongPress ? 500 : 100;
+
+            this.inputSink.onGamepadInput(performance.now() - intervalMs, fakeGamepadMappings);
+            this.inputConfiguration.useIntervalWorkerThreadForInput && this.intervalWorker ? this.intervalWorker.scheduleTimer(intervalMs) : this.pollGamepadssetTimeoutTimerID = setTimeout(this.pollGamepads, intervalMs);
+            return;
+        }
+    }
+}

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/vibration-adjust.js

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

src/modules/remote-play.ts

@@ -1,10 +1,14 @@
-import { STATES, AppInterface } from "../utils/global";
-import { CE, createButton, ButtonStyle, Icon } from "../utils/html";
-import { Toast } from "../utils/toast";
-import { BxEvent } from "../utils/bx-event";
-import { getPref, PrefKey, setPref } from "../utils/preferences";
-import { t } from "../utils/translation";
-import { localRedirect } from "./ui/ui";
+import { STATES, AppInterface } from "@utils/global";
+import { CE, createButton, ButtonStyle } from "@utils/html";
+import { BxIcon } from "@utils/bx-icon";
+import { Toast } from "@utils/toast";
+import { BxEvent } from "@utils/bx-event";
+import { getPref, PrefKey, setPref } from "@utils/preferences";
+import { t } from "@utils/translation";
+import { localRedirect } from "@modules/ui/ui";
+import { BxLogger } from "@utils/bx-logger";
+
+const LOG_TAG = 'RemotePlay';
 
 enum RemotePlayConsoleState {
     ON = 'On',
@@ -92,7 +96,7 @@ export class RemotePlay {
         RemotePlay.#$content = CE('div', {}, t('getting-consoles-list'));
         RemotePlay.#getXhomeToken(() => {
             RemotePlay.#getConsolesList(() => {
-                console.log(RemotePlay.#CONSOLES);
+                BxLogger.info(LOG_TAG, 'Consoles', RemotePlay.#CONSOLES);
                 RemotePlay.#renderConsoles();
                 BxEvent.dispatch(window, BxEvent.REMOTE_PLAY_READY);
             });
@@ -180,7 +184,7 @@ export class RemotePlay {
 
         // Add Help button
         $fragment.appendChild(createButton({
-            icon: Icon.QUESTION,
+            icon: BxIcon.QUESTION,
             style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
             url: 'https://better-xcloud.github.io/remote-play',
             label: t('help'),

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/stream-badges.ts

@@ -1,7 +1,7 @@
-import { t } from "../../utils/translation";
-import { BxEvent } from "../../utils/bx-event";
-import { CE } from "../../utils/html";
-import { STATES } from "../../utils/global";
+import { t } from "@utils/translation";
+import { BxEvent } from "@utils/bx-event";
+import { CE } from "@utils/html";
+import { STATES } from "@utils/global";
 
 enum StreamBadge {
     PLAYTIME = 'playtime',

src/modules/stream/stream-stats.ts

@@ -1,10 +1,11 @@
-import { PrefKey } from "../../utils/preferences"
-import { BxEvent } from "../../utils/bx-event"
-import { getPref } from "../../utils/preferences"
+import { PrefKey } 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 { 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',
@@ -274,7 +275,7 @@ export class StreamStats {
 
             // Get server type
             if (candidateId) {
-                console.log('candidate', candidateId, allCandidates);
+                BxLogger.info('candidate', candidateId, allCandidates);
                 StreamBadges.ipv6 = allCandidates[candidateId].includes(':');
             }
 

src/modules/stream/stream-ui.ts

@@ -1,72 +1,14 @@
-import { STATES } from "../../utils/global";
-import { Icon } from "../../utils/html";
-import { BxEvent } from "../../utils/bx-event";
-import { PrefKey, getPref } from "../../utils/preferences";
-import { t } from "../../utils/translation";
-import { StreamBadges } from "./stream-badges";
-import { StreamStats } from "./stream-stats";
+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;
-    }
-}
-
-
-function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: Icon) {
+function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) {
     const $container = $orgButton.cloneNode(true) as HTMLElement;
     let timeout: number | null;
 
@@ -93,7 +35,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: I
         }
     };
 
-    if (STATES.hasTouchSupport) {
+    if (STATES.browserHasTouchSupport) {
         $container.addEventListener('transitionstart', onTransitionStart);
         $container.addEventListener('transitionend', onTransitionEnd);
     }
@@ -101,25 +43,13 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: I
     const $button = $container.querySelector('button')!;
     $button.setAttribute('title', label);
 
-    const $svg = $button.querySelector('svg')!;
-    $svg.innerHTML = svgIcon;
+    const $orgSvg = $button.querySelector('svg')!;
+    const $svg = createSvgIcon(svgIcon);
     $svg.style.fill = 'none';
+    $svg.setAttribute('class', $orgSvg.getAttribute('class') || '');
+    $svg.ariaHidden = 'true';
 
-    const attrs = {
-        'fill': 'none',
-        'stroke': '#fff',
-        'fill-rule': 'evenodd',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        'stroke-width': '2',
-        'viewBox': '0 0 32 32'
-    };
-
-    let attr: keyof typeof attrs;
-    for (attr in attrs) {
-        $svg.setAttribute(attr, attrs[attr]);
-    }
-
+    $orgSvg.replaceWith($svg);
     return $container;
 }
 
@@ -136,9 +66,9 @@ export function injectStreamMenuButtons() {
 
     ($screen as any).xObserving = true;
 
-    const $quickBar = document.querySelector('.bx-quick-settings-bar')!;
+    const $settingsDialog = document.querySelector('.bx-stream-settings-dialog')!;
     const $parent = $screen.parentElement;
-    const hideQuickBarFunc = (e?: MouseEvent | TouchEvent) => {
+    const hideSettingsFunc = (e?: MouseEvent | TouchEvent) => {
         if (e) {
             const $target = e.target as HTMLElement;
             e.stopPropagation();
@@ -146,15 +76,15 @@ export function injectStreamMenuButtons() {
                 return;
             }
             if ($target.id === 'MultiTouchSurface') {
-                $target.removeEventListener('touchstart', hideQuickBarFunc);
+                $target.removeEventListener('touchstart', hideSettingsFunc);
             }
         }
 
-        // Hide Quick settings bar
-        $quickBar.classList.add('bx-gone');
+        // Hide Stream settings dialog
+        $settingsDialog.classList.add('bx-gone');
 
-        $parent?.removeEventListener('click', hideQuickBarFunc);
-        // $parent.removeEventListener('touchstart', hideQuickBarFunc);
+        $parent?.removeEventListener('click', hideSettingsFunc);
+        // $parent.removeEventListener('touchstart', hideSettingsFunc);
     }
 
     let $btnStreamSettings: HTMLElement;
@@ -190,8 +120,13 @@ 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;
                 }
@@ -203,35 +138,49 @@ export function injectStreamMenuButtons() {
                 }
 
                 // Render badges
-                if ($elm.className.startsWith('StreamMenu')) {
+                if ($elm.className?.startsWith('StreamMenu-module__container')) {
                     BxEvent.dispatch(window, BxEvent.STREAM_MENU_SHOWN);
 
-                    // Hide Quick bar when closing HUD
                     const $btnCloseHud = document.querySelector('button[class*=StreamMenu-module__backButton]');
                     if (!$btnCloseHud) {
                         return;
                     }
 
+                    // Hide Stream Settings dialog when closing HUD
                     $btnCloseHud && $btnCloseHud.addEventListener('click', e => {
-                        $quickBar.classList.add('bx-gone');
+                        $settingsDialog.classList.add('bx-gone');
                     });
 
-                    // 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 = $btnCloseHud.cloneNode(true) as HTMLElement;
+
+                    // Refresh SVG
+                    const $svgRefresh = createSvgIcon(BxIcon.REFRESH);
+                    // Copy classes
+                    $svgRefresh.setAttribute('class', $btnRefresh.firstElementChild!.getAttribute('class') || '');
+                    $svgRefresh.style.fill = 'none';
+
+                    $btnRefresh.classList.add('bx-stream-refresh-button');
+                    // Remove icon
+                    $btnRefresh.removeChild($btnRefresh.firstElementChild!);
+                    // Add Refresh icon
+                    $btnRefresh.appendChild($svgRefresh);
+                    // Add "click" event listener
+                    $btnRefresh.addEventListener('click', e => {
                         confirm(t('confirm-reload-stream')) && window.location.reload();
-                    }, 1000);
+                    });
+                    // Add to website
+                    $btnCloseHud.insertAdjacentElement('afterend', $btnRefresh);
 
                     // Render stream badges
                     const $menu = document.querySelector('div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module]');
                     $menu?.appendChild(await StreamBadges.render());
 
-                    hideQuickBarFunc();
+                    hideSettingsFunc();
                     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');
                 }
 
@@ -261,25 +210,25 @@ export function injectStreamMenuButtons() {
 
                 // Create Stream Settings button
                 if (!$btnStreamSettings) {
-                    $btnStreamSettings = cloneStreamHudButton($orgButton, t('menu-stream-settings'), Icon.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');
+                        // Show Stream Settings dialog
+                        $settingsDialog.classList.remove('bx-gone');
 
-                        $parent?.addEventListener('click', hideQuickBarFunc);
-                        //$parent.addEventListener('touchstart', hideQuickBarFunc);
+                        $parent?.addEventListener('click', hideSettingsFunc);
+                        //$parent.addEventListener('touchstart', hideSettingsFunc);
 
                         const $touchSurface = document.getElementById('MultiTouchSurface');
-                        $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideQuickBarFunc);
+                        $touchSurface && $touchSurface.style.display != 'none' && $touchSurface.addEventListener('touchstart', hideSettingsFunc);
                     });
                 }
 
                 // Create Stream Stats button
                 if (!$btnStreamStats) {
-                    $btnStreamStats = cloneStreamHudButton($orgButton, t('menu-stream-stats'), Icon.STREAM_STATS);
+                    $btnStreamStats = cloneStreamHudButton($orgButton, t('stream-stats'), BxIcon.STREAM_STATS);
                     $btnStreamStats.addEventListener('click', e => {
                         hideGripHandle();
                         e.preventDefault();
@@ -314,14 +263,14 @@ export function injectStreamMenuButtons() {
 
 
 export function showStreamSettings(tabId: string) {
-    const $wrapper = document.querySelector('.bx-quick-settings-bar');
+    const $wrapper = document.querySelector('.bx-stream-settings-dialog');
     if (!$wrapper) {
         return;
     }
 
     // Select tab
     if (tabId) {
-        const $tab = $wrapper.querySelector(`.bx-quick-settings-tabs svg[data-group=${tabId}]`);
+        const $tab = $wrapper.querySelector(`.bx-stream-settings-tabs svg[data-group=${tabId}]`);
         $tab && $tab.dispatchEvent(new Event('click'));
     }
 

src/modules/touch-controller.ts

@@ -1,15 +1,21 @@
-import { STATES } from "../utils/global";
-import { CE } from "../utils/html";
-import { Toast } from "../utils/toast";
-import { BxEvent } from "../utils/bx-event";
-import { BX_FLAGS } from "../utils/bx-flags";
-import { getPref, PrefKey } from "../utils/preferences";
-import { t } from "../utils/translation";
-import { NATIVE_FETCH } from "../utils/network";
+import { STATES } from "@utils/global";
+import { escapeHtml } from "@utils/html";
+import { Toast } from "@utils/toast";
+import { BxEvent } from "@utils/bx-event";
+import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
+import { getPref, PrefKey } from "@utils/preferences";
+import { t } from "@utils/translation";
+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',
         });
 
@@ -20,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;
     }
@@ -45,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 = '');
     }
 
@@ -100,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;
         }
@@ -136,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
@@ -145,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;
         }
 
@@ -165,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);
@@ -286,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) {
@@ -296,7 +303,7 @@ export class TouchController {
                         STATES.currentStream.xboxTitleId = parseInt(json.titleid, 16).toString();
                     }
                 } catch (e) {
-                    console.log(e);
+                    BxLogger.error(LOG_TAG, 'Load custom layout', e);
                 }
             });
         });

src/modules/ui/global-settings.ts

@@ -1,9 +1,11 @@
-import { STATES, AppInterface, SCRIPT_HOME, SCRIPT_VERSION } from "../../utils/global";
-import { CE, createButton, Icon, ButtonStyle } from "../../utils/html";
-import { getPreferredServerRegion } from "../../utils/region";
-import { UserAgent, UserAgentProfile } from "../../utils/user-agent";
-import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "../../utils/preferences";
-import { t, refreshCurrentLocale } from "../../utils/translation";
+import { STATES, AppInterface, SCRIPT_HOME, 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 { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/preferences";
+import { t, Translations } from "@utils/translation";
+import { PatcherCache } from "../patcher";
 
 const SETTINGS_UI = {
     'Better xCloud': {
@@ -25,18 +27,26 @@ const SETTINGS_UI = {
         items: [
             PrefKey.STREAM_TARGET_RESOLUTION,
             PrefKey.STREAM_CODEC_PROFILE,
-            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
+
+            PrefKey.BITRATE_VIDEO_MAX,
+
+            PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
             PrefKey.AUDIO_MIC_ON_PLAYING,
             PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
 
-            PrefKey.SCREENSHOT_BUTTON_POSITION,
             PrefKey.SCREENSHOT_APPLY_FILTERS,
 
-            PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
+            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,
@@ -45,6 +55,7 @@ const SETTINGS_UI = {
 
     [t('mouse-and-keyboard')]: {
         items: [
+            PrefKey.NATIVE_MKB_DISABLED,
             PrefKey.MKB_ENABLED,
             PrefKey.MKB_HIDE_IDLE_CURSOR,
         ],
@@ -56,6 +67,7 @@ const SETTINGS_UI = {
         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,
         ],
@@ -72,6 +84,7 @@ const SETTINGS_UI = {
     [t('ui')]: {
         items: [
             PrefKey.UI_LAYOUT,
+            PrefKey.UI_HOME_CONTEXT_MENU_DISABLED,
             PrefKey.STREAM_SIMPLIFY_MENU,
             PrefKey.SKIP_SPLASH_VIDEO,
             !AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
@@ -104,7 +117,7 @@ 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', {
@@ -120,7 +133,12 @@ export function setupSettingsUi() {
                     'href': SCRIPT_HOME,
                     'target': '_blank',
                 }, 'Better xCloud ' + SCRIPT_VERSION),
-                createButton({icon: Icon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}),
+                createButton({
+                    icon: BxIcon.QUESTION,
+                    style: ButtonStyle.FOCUSABLE,
+                    label: t('help'),
+                    url: 'https://better-xcloud.github.io/features/',
+                }),
             )
         );
     $updateAvailable = CE('a', {
@@ -137,8 +155,20 @@ export function setupSettingsUi() {
         $updateAvailable.classList.remove('bx-gone');
     }
 
-    // Show link to Android app
-    if (!AppInterface) {
+    if (AppInterface) {
+        // Show Android app settings button
+        const $btn = createButton({
+            label: t('android-app-settings'),
+            icon: BxIcon.STREAM_SETTINGS,
+            style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                AppInterface.openAppSettings && AppInterface.openAppSettings();
+            },
+        });
+
+        $wrapper.appendChild($btn);
+    } else {
+        // Show link to Android app
         const userAgent = UserAgent.getDefault().toLowerCase();
         if (userAgent.includes('android')) {
             const $btn = createButton({
@@ -151,20 +181,23 @@ export function setupSettingsUi() {
         }
     }
 
-    const onChange = (e: Event) => {
-        if (!$reloadBtnWrapper) {
-            return;
-        }
+    const onChange = async (e: Event) => {
+        // Clear PatcherCache;
+        PatcherCache.clear();
 
-        $reloadBtnWrapper.classList.remove('bx-gone');
+        $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) {
             // 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();
         }
     };
 
@@ -210,40 +243,52 @@ export function setupSettingsUi() {
                 }
             }
 
-            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());
+                    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('change', (e: Event) => {
                     setPref(settingId, (e.target as HTMLSelectElement).value);
                     onChange(e);
                 });
@@ -286,7 +331,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
@@ -294,14 +344,19 @@ export function setupSettingsUi() {
                 ($control as HTMLInputElement).disabled = true;
             }
 
+            // Make disabled control elements un-focusable
+            if ($control.disabled && !!$control.getAttribute('tabindex')) {
+                $control.setAttribute('tabindex', -1);
+            }
+
             const $label = CE('label', labelAttrs, settingLabel);
             if (settingNote) {
                 $label.appendChild(CE('b', {}, settingNote));
             }
             const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
-                            $label,
-                            $control
-                           );
+                    $label,
+                    $control,
+                );
 
             $wrapper.appendChild($elm);
 
@@ -309,28 +364,35 @@ export function setupSettingsUi() {
             if (settingId === PrefKey.USER_AGENT_PROFILE) {
                 $wrapper.appendChild($inpCustomUserAgent!);
                 // Trigger 'change' event
+                $control.disabled = true;
                 $control.dispatchEvent(new Event('change'));
+                $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,
         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

src/modules/ui/header.ts

@@ -1,9 +1,10 @@
-import { SCRIPT_VERSION } from "../../utils/global";
-import { createButton, Icon, ButtonStyle } from "../../utils/html";
-import { getPreferredServerRegion } from "../../utils/region";
-import { PrefKey, getPref } from "../../utils/preferences";
-import { RemotePlay } from "../remote-play";
-import { t } from "../../utils/translation";
+import { SCRIPT_VERSION } from "@utils/global";
+import { createButton, ButtonStyle } from "@utils/html";
+import { BxIcon } from "@utils/bx-icon";
+import { getPreferredServerRegion } from "@utils/region";
+import { PrefKey, getPref } from "@utils/preferences";
+import { RemotePlay } from "@modules/remote-play";
+import { t } from "@utils/translation";
 import { setupSettingsUi } from "./global-settings";
 
 
@@ -21,7 +22,7 @@ function injectSettingsButton($parent?: HTMLElement) {
     if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
         const $remotePlayBtn = createButton({
             classes: ['bx-header-remote-play-button'],
-            icon: Icon.REMOTE_PLAY,
+            icon: BxIcon.REMOTE_PLAY,
             title: t('remote-play'),
             style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
             onClick: e => {

src/modules/ui/ui.ts

@@ -1,14 +1,17 @@
-import { STATES } from "../../utils/global";
-import { Icon, CE, createButton, ButtonStyle } from "../../utils/html";
-import { UserAgent } from "../../utils/user-agent";
-import { BxEvent } from "../../utils/bx-event";
-import { MkbRemapper } from "../mkb/mkb-remapper";
-import { getPref, PrefKey, toPrefElement } from "../../utils/preferences";
-import { setupScreenshotButton } from "../screenshot";
-import { StreamStats } from "../stream/stream-stats";
-import { TouchController } from "../touch-controller";
-import { t } from "../../utils/translation";
-import { VibrationManager } from "../vibration-manager";
+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, Preferences, PrefKey, toPrefElement } from "@utils/preferences";
+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 { Screenshot } from "@/utils/screenshot";
+import { ControllerShortcut } from "../controller-shortcut";
+import { SoundShortcut } from "../shortcuts/shortcut-sound";
 
 
 export function localRedirect(path: string) {
@@ -65,12 +68,12 @@ function getVideoPlayerFilterStyle() {
     return filters.join(' ');
 }
 
-function setupQuickSettingsBar() {
+function setupStreamSettingsDialog() {
     const isSafari = UserAgent.isSafari();
 
     const SETTINGS_UI = [
         getPref(PrefKey.MKB_ENABLED) && {
-            icon: Icon.MOUSE,
+            icon: BxIcon.MOUSE,
             group: 'mkb',
             items: [
                 {
@@ -83,7 +86,7 @@ function setupQuickSettingsBar() {
         },
 
         {
-            icon: Icon.DISPLAY,
+            icon: BxIcon.DISPLAY,
             group: 'stream',
             items: [
                 {
@@ -93,13 +96,21 @@ function setupQuickSettingsBar() {
                     items: [
                         {
                             pref: PrefKey.AUDIO_VOLUME,
-                            label: t('volume'),
                             onChange: (e: any, value: number) => {
-                                STATES.currentStream.audioGainNode && (STATES.currentStream.audioGainNode.gain.value = value / 100);
+                                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,
+                                        });
+                                });
+                            },
                         },
                     ],
                 },
@@ -111,32 +122,27 @@ function setupQuickSettingsBar() {
                     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,
                         },
                     ],
@@ -145,7 +151,7 @@ function setupQuickSettingsBar() {
         },
 
         {
-            icon: Icon.CONTROLLER,
+            icon: BxIcon.CONTROLLER,
             group: 'controller',
             items: [
                 {
@@ -155,21 +161,18 @@ function setupQuickSettingsBar() {
                     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,
                         },
@@ -216,7 +219,14 @@ function setupQuickSettingsBar() {
                                     for (const key in data.layouts) {
                                         const layout = data.layouts[key];
 
-                                        const $option = CE('option', {value: key}, layout.name);
+                                        let name;
+                                        if (layout.author) {
+                                            name = `${layout.name} (${layout.author})`;
+                                        } else {
+                                            name = layout.name;
+                                        }
+
+                                        const $option = CE('option', {value: key}, name);
                                         $fragment.appendChild($option);
                                     }
 
@@ -232,53 +242,57 @@ function setupQuickSettingsBar() {
         },
 
         {
-            icon: Icon.STREAM_STATS,
+            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('menu-stream-stats'),
+                    label: t('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,
                         },
                     ],
@@ -290,9 +304,9 @@ function setupQuickSettingsBar() {
     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'}),
+    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-stream-settings-dialog bx-gone'},
+            $tabs = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tabs'}),
+            $settings = CE<HTMLElement>('div', {'class': 'bx-stream-settings-tab-contents'}),
         );
 
     for (const settingTab of SETTINGS_UI) {
@@ -300,18 +314,7 @@ function setupQuickSettingsBar() {
             continue;
         }
 
-        const $svg = CE('svg', {
-            'xmlns': 'http://www.w3.org/2000/svg',
-            'data-group': settingTab.group,
-            'fill': 'none',
-            'stroke': '#fff',
-            'fill-rule': 'evenodd',
-            'stroke-linecap': 'round',
-            'stroke-linejoin': 'round',
-            'stroke-width': 2,
-        });
-        $svg.innerHTML = settingTab.icon;
-        $svg.setAttribute('viewBox', '0 0 32 32');
+        const $svg = createSvgIcon(settingTab.icon);
         $svg.addEventListener('click', e => {
             // Switch tab
             for (const $child of Array.from($settings.children)) {
@@ -342,7 +345,7 @@ function setupQuickSettingsBar() {
             $group.appendChild(CE('h2', {},
                     CE('span', {}, settingGroup.label),
                     settingGroup.help_url && createButton({
-                            icon: Icon.QUESTION,
+                            icon: BxIcon.QUESTION,
                             style: ButtonStyle.GHOST,
                             url: settingGroup.help_url,
                             title: t('help'),
@@ -378,13 +381,17 @@ function setupQuickSettingsBar() {
                     $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,
-                    );
+                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},
+                    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);
 
@@ -431,53 +438,91 @@ export function updateVideoPlayerCss() {
 
     // 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;`;
-        }
+        Screenshot.updateCanvasFilters(filters);
     }
 
     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;
+
+    resizeVideoPlayer();
 }
 
-export function setupBxUi() {
+function resizeVideoPlayer() {
+    const $video = STATES.currentStream.$video;
+    if (!$video || !$video.parentElement) {
+        return;
+    }
+
+    const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
+    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.floor(width);
+        height = Math.floor(height);
+
+        // Update size
+        $video.style.width = `${width}px`;
+        $video.style.height = `${height}px`;
+        $video.style.objectFit = 'fill';
+    } else {
+        $video.style.width = '100%';
+        $video.style.height = '100%';
+        $video.style.objectFit = PREF_RATIO;
+    }
+}
+
+
+function preloadFonts() {
+    const $link = CE<HTMLLinkElement>('link', {
+            rel: 'preload',
+            href: 'https://redphx.github.io/better-xcloud/fonts/promptfont.otf',
+            as: 'font',
+            type: 'font/otf',
+            crossorigin: '',
+        });
+
+    document.querySelector('head')?.appendChild($link);
+}
+
+
+export function setupStreamUi() {
     // Prevent initializing multiple times
-    if (!document.querySelector('.bx-quick-settings-bar')) {
+    if (!document.querySelector('.bx-stream-settings-dialog')) {
+        preloadFonts();
+
         window.addEventListener('resize', updateVideoPlayerCss);
-        setupQuickSettingsBar();
-        setupScreenshotButton();
+        setupStreamSettingsDialog();
         StreamStats.render();
+
+        Screenshot.setup();
     }
 
     updateVideoPlayerCss();

src/modules/vibration-manager.ts

@@ -1,6 +1,6 @@
-import { AppInterface } from "../utils/global";
-import { BxEvent } from "../utils/bx-event";
-import { PrefKey, getPref } from "../utils/preferences";
+import { AppInterface } from "@utils/global";
+import { BxEvent } from "@utils/bx-event";
+import { PrefKey, getPref } from "@utils/preferences";
 
 const VIBRATION_DATA_MAP = {
     'gamepadIndex': 8,

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;
@@ -25,7 +27,9 @@ type BxStates = {
     isPlaying: boolean;
     appContext: any | null;
     serverRegions: any;
+
     hasTouchSupport: boolean;
+    browserHasTouchSupport: boolean;
 
     currentStream: Partial<{
         titleId: string;
@@ -34,7 +38,6 @@ type BxStates = {
         titleInfo: XcloudTitleInfo;
 
         $video: HTMLVideoElement | null;
-        $screenshotCanvas: HTMLCanvasElement | null;
 
         peerConnection: RTCPeerConnection;
         audioContext: AudioContext | null;
@@ -67,3 +70,7 @@ type XcloudTitleInfo = {
         tileImageUrl: string;
     };
 };
+
+declare module '*.js';
+declare module '*.svg';
+declare module '*.styl';

src/types/mkb.d.ts

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

src/types/preferences.d.ts

@@ -5,7 +5,7 @@ export type PreferenceSetting = {
     unsupported?: string | boolean;
     note?: string | HTMLElement;
     type?: SettingElementType;
-    ready?: () => void;
+    ready?: (setting: PreferenceSetting) => void;
     migrate?: (savedPrefs: any, value: any) => {};
     min?: number;
     max?: number;

src/utils/bx-event.ts

@@ -1,4 +1,4 @@
-import { AppInterface } from "./global";
+import { AppInterface } from "@utils/global";
 
 export enum BxEvent {
     JUMP_BACK_IN_READY = 'bx-jump-back-in-ready',
@@ -19,7 +19,11 @@ export enum BxEvent {
     STREAM_WEBRTC_CONNECTED = 'bx-stream-webrtc-connected',
     STREAM_WEBRTC_DISCONNECTED = 'bx-stream-webrtc-disconnected',
 
+    // STREAM_EVENT_TARGET_READY = 'bx-stream-event-target-ready',
+    STREAM_SESSION_READY = 'bx-stream-session-ready',
+
     CUSTOM_TOUCH_LAYOUTS_LOADED = 'bx-custom-touch-layouts-loaded',
+    TOUCH_LAYOUT_MANAGER_READY = 'bx-touch-layout-manager-ready',
 
     REMOTE_PLAY_READY = 'bx-remote-play-ready',
     REMOTE_PLAY_FAILED = 'bx-remote-play-failed',
@@ -27,6 +31,20 @@ export enum BxEvent {
     XCLOUD_SERVERS_READY = 'bx-servers-ready',
 
     DATA_CHANNEL_CREATED = 'bx-data-channel-created',
+
+    GAME_BAR_ACTION_ACTIVATED = 'bx-game-bar-action-activated',
+    MICROPHONE_STATE_CHANGED = 'bx-microphone-state-changed',
+
+    CAPTURE_SCREENSHOT = 'bx-capture-screenshot',
+    GAINNODE_VOLUME_CHANGED = 'bx-gainnode-volume-changed',
+
+    // xCloud Dialog events
+    XCLOUD_DIALOG_SHOWN = 'bx-xcloud-dialog-shown',
+    XCLOUD_DIALOG_DISMISSED = 'bx-xcloud-dialog-dismissed',
+}
+
+export enum XcloudEvent {
+    MICROPHONE_STATE_CHANGED = 'microphoneStateChanged',
 }
 
 export namespace BxEvent {
@@ -48,3 +66,5 @@ export namespace BxEvent {
         target.dispatchEvent(event);
     }
 }
+
+(window as any).BxEvent = BxEvent;

src/utils/bx-exposed.ts

@@ -1,9 +1,12 @@
-import { BxEvent } from "./bx-event";
-import { STATES } from "./global";
-import { getPref, PrefKey } from "./preferences";
-import { UserAgent } from "./user-agent";
+import { ControllerShortcut } from "@/modules/controller-shortcut";
+import { GameBar } from "@modules/game-bar/game-bar";
+import { BxEvent } from "@utils/bx-event";
+import { STATES } from "@utils/global";
+import { getPref, PrefKey } from "@utils/preferences";
+import { UserAgent } from "@utils/user-agent";
+import { BxLogger } from "./bx-logger";
 
-enum InputType {
+export enum InputType {
     CONTROLLER = 'Controller',
     MKB = 'MKB',
     CUSTOM_TOUCH_OVERLAY = 'CustomTouchOverlay',
@@ -13,27 +16,21 @@ enum InputType {
 }
 
 export const BxExposed = {
+    // Enable/disable Game Bar when playing/pausing
     onPollingModeChanged: (mode: 'All' | 'None') => {
+        if (getPref(PrefKey.GAME_BAR_POSITION) === 'off') {
+            return;
+        }
+
+        const gameBar = GameBar.getInstance();
+
         if (!STATES.isPlaying) {
-            return false;
+            gameBar.disable();
+            return;
         }
 
-        const $screenshotBtn = document.querySelector('.bx-screenshot-button');
-        const $touchControllerBar = document.getElementById('bx-touch-controller-bar');
-
-        if (mode !== 'None') {
-            // Hide screenshot button
-            $screenshotBtn && $screenshotBtn.classList.add('bx-gone');
-
-            // Hide touch controller bar
-            $touchControllerBar && $touchControllerBar.classList.add('bx-gone');
-        } else {
-            // Show screenshot button
-            $screenshotBtn && $screenshotBtn.classList.remove('bx-gone');
-
-            // Show touch controller bar
-            $touchControllerBar && $touchControllerBar.classList.remove('bx-gone');
-        }
+        // Toggle Game bar
+        mode !== 'None' ? gameBar.disable() : gameBar.enable();
     },
 
     getTitleInfo: () => STATES.currentStream.titleInfo,
@@ -42,9 +39,17 @@ export const BxExposed = {
         // Clone the object since the original is read-only
         titleInfo = structuredClone(titleInfo);
 
+        let supportedInputTypes = titleInfo.details.supportedInputTypes;
+
+        // Remove native MKB support on mobile browsers or by user's choice
+        if (getPref(PrefKey.NATIVE_MKB_DISABLED) || UserAgent.isMobile()) {
+            supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.MKB);
+        }
+
+        titleInfo.details.hasMkbSupport = supportedInputTypes.includes(InputType.MKB);
+
         if (STATES.hasTouchSupport) {
             let touchControllerAvailability = getPref(PrefKey.STREAM_TOUCH_CONTROLLER);
-            let supportedInputTypes = titleInfo.details.supportedInputTypes;
 
             // Disable touch control when gamepad found
             if (touchControllerAvailability !== 'off' && getPref(PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF)) {
@@ -61,10 +66,7 @@ export const BxExposed = {
                 gamepadFound && (touchControllerAvailability = 'off');
             }
 
-            // Remove MKB support on mobile browsers
-            if (UserAgent.isMobile()) {
-                supportedInputTypes = supportedInputTypes.filter(i => i !== InputType.MKB);
-            }
+
 
             if (touchControllerAvailability === 'off') {
                 // Disable touch on all games (not native touch)
@@ -72,24 +74,52 @@ export const BxExposed = {
             }
 
             // Pre-check supported input types
-            titleInfo.details.hasMkbSupport = supportedInputTypes.includes(InputType.MKB);
-            titleInfo.details.hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) &&
-                    !supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY) &&
-                    !supportedInputTypes.includes(InputType.GENERIC_TOUCH);
+            titleInfo.details.hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) ||
+                    supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY) ||
+                    supportedInputTypes.includes(InputType.GENERIC_TOUCH);
 
             if (!titleInfo.details.hasTouchSupport && touchControllerAvailability === 'all') {
                 // Add generic touch support for non touch-supported games
                 titleInfo.details.hasFakeTouchSupport = true;
                 supportedInputTypes.push(InputType.GENERIC_TOUCH);
             }
-
-            titleInfo.details.supportedInputTypes = supportedInputTypes;
         }
 
+        titleInfo.details.supportedInputTypes = supportedInputTypes;
+
         // Save this info in STATES
         STATES.currentStream.titleInfo = titleInfo;
         BxEvent.dispatch(window, BxEvent.TITLE_INFO_READY);
 
         return titleInfo;
-    }
+    },
+
+    setupGainNode: ($media: HTMLMediaElement, audioStream: MediaStream) => {
+        if ($media instanceof HTMLAudioElement) {
+            $media.muted = true;
+            $media.addEventListener('playing', e => {
+                $media.muted = true;
+                $media.pause();
+            });
+        } else {
+            $media.muted = true;
+            $media.addEventListener('playing', e => {
+                $media.muted = true;
+            });
+        }
+
+        try {
+            const audioCtx = STATES.currentStream.audioContext!;
+            const source = audioCtx.createMediaStreamSource(audioStream);
+
+            const gainNode = audioCtx.createGain();  // call monkey-patched createGain() in BxAudioContext
+            source.connect(gainNode).connect(audioCtx.destination);
+        } catch (e) {
+            BxLogger.error('setupGainNode', e);
+            STATES.currentStream.audioGainNode = null;
+        }
+    },
+
+    handleControllerShortcut: ControllerShortcut.handle,
+    resetControllerShortcut: ControllerShortcut.reset,
 };

src/utils/bx-flags.ts

@@ -23,3 +23,5 @@ export const BX_FLAGS = Object.assign(DEFAULT_FLAGS, window.BX_FLAGS || {});
 try {
     delete window.BX_FLAGS;
 } catch (e) {}
+
+export const NATIVE_FETCH = window.fetch;

src/utils/bx-icon.ts

@@ -0,0 +1,51 @@
+import iconCommand from "@assets/svg/command.svg" with { type: "text" };
+import iconController from "@assets/svg/controller.svg" with { type: "text" };
+import iconCopy from "@assets/svg/copy.svg" with { type: "text" };
+import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" };
+import iconDisplay from "@assets/svg/display.svg" with { type: "text" };
+import iconMouseSettings from "@assets/svg/mouse-settings.svg" with { type: "text" };
+import iconMouse from "@assets/svg/mouse.svg" with { type: "text" };
+import iconNew from "@assets/svg/new.svg" with { type: "text" };
+import iconQuestion from "@assets/svg/question.svg" with { type: "text" };
+import iconRefresh from "@assets/svg/refresh.svg" with { type: "text" };
+import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" };
+import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" };
+import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" };
+import iconTrash from "@assets/svg/trash.svg" with { type: "text" };
+import iconTouchControlEnable from "@assets/svg/touch-control-enable.svg" with { type: "text" };
+import iconTouchControlDisable from "@assets/svg/touch-control-disable.svg" with { type: "text" };
+
+// Game Bar
+import iconCaretLeft from "@assets/svg/caret-left.svg" with { type: "text" };
+import iconCaretRight from "@assets/svg/caret-right.svg" with { type: "text" };
+import iconCamera from "@assets/svg/camera.svg" with { type: "text" };
+import iconMicrophone from "@assets/svg/microphone.svg" with { type: "text" };
+import iconMicrophoneMuted from "@assets/svg/microphone-slash.svg" with { type: "text" };
+
+export const BxIcon = {
+    STREAM_SETTINGS: iconStreamSettings,
+    STREAM_STATS: iconStreamStats,
+    COMMAND: iconCommand,
+    CONTROLLER: iconController,
+    DISPLAY: iconDisplay,
+    MOUSE: iconMouse,
+    MOUSE_SETTINGS: iconMouseSettings,
+    NEW: iconNew,
+    COPY: iconCopy,
+    TRASH: iconTrash,
+    CURSOR_TEXT: iconCursorText,
+    QUESTION: iconQuestion,
+    REFRESH: iconRefresh,
+
+    REMOTE_PLAY: iconRemotePlay,
+
+    // Game Bar
+    CARET_LEFT: iconCaretLeft,
+    CARET_RIGHT: iconCaretRight,
+    SCREENSHOT: iconCamera,
+    TOUCH_CONTROL_ENABLE: iconTouchControlEnable,
+    TOUCH_CONTROL_DISABLE: iconTouchControlDisable,
+
+    MICROPHONE: iconMicrophone,
+    MICROPHONE_MUTED: iconMicrophoneMuted,
+} as const;

src/utils/bx-logger.ts

@@ -0,0 +1,27 @@
+enum TextColor {
+    INFO = '#008746',
+    WARNING = '#c1a404',
+    ERROR = '#c10404',
+}
+
+export class BxLogger {
+    static #PREFIX = '[BxC]';
+
+    static info(tag: string, ...args: any[]) {
+        BxLogger.#log(TextColor.INFO, tag, ...args);
+    }
+
+    static warning(tag: string, ...args: any[]) {
+        BxLogger.#log(TextColor.WARNING, tag, ...args);
+    }
+
+    static error(tag: string, ...args: any[]) {
+        BxLogger.#log(TextColor.ERROR, tag, ...args);
+    }
+
+    static #log(color: TextColor, tag: string, ...args: any) {
+        console.log(`%c${BxLogger.#PREFIX}`, `color:${color};font-weight:bold;`, tag, '//', ...args);
+    }
+}
+
+(window as any).BxLogger = BxLogger;

src/utils/css.ts

@@ -1,6 +1,6 @@
-import { CE } from "./html";
-import { PrefKey, getPref } from "./preferences";
-import { renderStylus } from "../macros/build" with {type: "macro"};
+import { CE } from "@utils/html";
+import { PrefKey, getPref } from "@utils/preferences";
+import { renderStylus } from "@macros/build" with {type: "macro"};
 
 
 export function addCss() {

src/utils/gamepad.ts

@@ -1,7 +1,8 @@
-import { MkbHandler } from "../modules/mkb/mkb-handler";
-import { PrefKey, getPref } from "./preferences";
-import { t } from "./translation";
-import { Toast } from "./toast";
+import { MkbHandler } from "@modules/mkb/mkb-handler";
+import { PrefKey, getPref } from "@utils/preferences";
+import { t } from "@utils/translation";
+import { Toast } from "@utils/toast";
+import { BxLogger } from "@utils/bx-logger";
 
 // Show a toast when connecting/disconecting controller
 export function showGamepadToast(gamepad: Gamepad) {
@@ -10,7 +11,7 @@ export function showGamepadToast(gamepad: Gamepad) {
         return;
     }
 
-    console.log(gamepad);
+    BxLogger.info('Gamepad', gamepad);
     let text = '🎮';
 
     if (getPref(PrefKey.LOCAL_CO_OP_ENABLED)) {

src/utils/gamepass-gallery.ts

@@ -0,0 +1,4 @@
+export enum GamePassCloudGallery {
+    TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
+    ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
+}

src/utils/global.ts

@@ -1,13 +1,24 @@
+import { UserAgent } from "./user-agent";
+
 export const SCRIPT_VERSION = Bun.env.SCRIPT_VERSION;
 export const SCRIPT_HOME = 'https://github.com/redphx/better-xcloud';
 
 export const AppInterface = window.AppInterface;
 
+UserAgent.init();
+const userAgent = window.navigator.userAgent.toLowerCase();
+
+const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') || /\baft.*\b/.test(userAgent);
+const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser');
+const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+const hasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
+
 export const STATES: BxStates = {
     isPlaying: false,
     appContext: {},
     serverRegions: {},
-    hasTouchSupport: ('ontouchstart' in window || navigator.maxTouchPoints > 0),
+    hasTouchSupport: hasTouchSupport,
+    browserHasTouchSupport: browserHasTouchSupport,
 
     currentStream: {},
     remotePlay: {},

src/utils/history.ts

@@ -1,7 +1,7 @@
-import { BxEvent } from "./bx-event";
-import { LoadingScreen } from "../modules/loading-screen";
-import { RemotePlay } from "../modules/remote-play";
-import { checkHeader } from "../modules/ui/header";
+import { BxEvent } from "@utils/bx-event";
+import { LoadingScreen } from "@modules/loading-screen";
+import { RemotePlay } from "@modules/remote-play";
+import { checkHeader } from "@modules/ui/header";
 
 export function patchHistoryMethod(type: 'pushState' | 'replaceState') {
     const orig = window.history[type];

src/utils/html.ts

@@ -1,8 +1,10 @@
+import type { BxIcon } from "@utils/bx-icon";
+
 type BxButton = {
     style?: number | string;
     url?: string;
     classes?: string[];
-    icon?: string;
+    icon?: typeof BxIcon;
     label?: string;
     title?: string;
     disabled?: boolean;
@@ -52,39 +54,11 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
 export const CE = createElement;
 
 // Credit: https://phosphoricons.com
-export enum Icon {
-    STREAM_SETTINGS = '<g transform="matrix(.142357 0 0 .142357 -2.22021 -2.22164)" fill="none" stroke="#fff" stroke-width="16"><circle cx="128" cy="128" r="40"/><path d="M130.05 206.11h-4L94 224c-12.477-4.197-24.049-10.711-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9 147.24a99.16 99.16 0 0 1 0-38.46l31.84-18.1c.65-1.15 1.32-2.29 2-3.41l.16-36C69.951 42.757 81.521 36.218 94 32l32 17.89h4L162 32c12.477 4.197 24.049 10.711 34.11 19.2l.12 36c.71 1.12 1.38 2.25 2 3.41l31.85 18.14a99.16 99.16 0 0 1 0 38.46l-31.84 18.1c-.65 1.15-1.32 2.29-2 3.41l-.16 36A104.59 104.59 0 0 1 162 224l-31.95-17.89z"/></g>',
-    STREAM_STATS = '<path d="M1.181 24.55v-3.259c0-8.19 6.576-14.952 14.767-14.98H16c8.13 0 14.819 6.69 14.819 14.819v3.42c0 .625-.515 1.14-1.14 1.14H2.321c-.625 0-1.14-.515-1.14-1.14z"/><path d="M16 6.311v4.56M12.58 25.69l9.12-12.54m4.559 5.7h4.386m-29.266 0H5.74"/>',
-    CONTROLLER = '<path d="M19.193 12.807h3.193m-13.836 0h4.257"/><path d="M10.678 10.678v4.257"/><path d="M13.061 19.193l-5.602 6.359c-.698.698-1.646 1.09-2.633 1.09-2.044 0-3.725-1.682-3.725-3.725a3.73 3.73 0 0 1 .056-.646l2.177-11.194a6.94 6.94 0 0 1 6.799-5.721h11.722c3.795 0 6.918 3.123 6.918 6.918s-3.123 6.918-6.918 6.918h-8.793z"/><path d="M18.939 19.193l5.602 6.359c.698.698 1.646 1.09 2.633 1.09 2.044 0 3.725-1.682 3.725-3.725a3.73 3.73 0 0 0-.056-.646l-2.177-11.194"/>',
-    DISPLAY = '<path d="M1.238 21.119c0 1.928 1.565 3.493 3.493 3.493H27.27c1.928 0 3.493-1.565 3.493-3.493V5.961c0-1.928-1.565-3.493-3.493-3.493H4.731c-1.928 0-3.493 1.565-3.493 3.493v15.158zm19.683 8.413H11.08"/>',
-    MOUSE = '<path d="M26.256 8.185c0-3.863-3.137-7-7-7h-6.512c-3.863 0-7 3.137-7 7v15.629c0 3.863 3.137 7 7 7h6.512c3.863 0 7-3.137 7-7V8.185z"/><path d="M16 13.721V6.883"/>',
-    MOUSE_SETTINGS = '<g transform="matrix(1.10403 0 0 1.10403 -4.17656 -.560429)" fill="none" stroke="#fff"><g stroke-width="1.755"><path d="M24.49 16.255l.01-8.612A6.15 6.15 0 0 0 18.357 1.5h-5.714A6.15 6.15 0 0 0 6.5 7.643v13.715a6.15 6.15 0 0 0 6.143 6.143h5.714"/><path d="M15.5 12.501v-6"/></g><circle cx="48" cy="48" r="15" stroke-width="7.02" transform="matrix(.142357 0 0 .142357 17.667421 16.541885)"/><path d="M24.61 27.545h-.214l-1.711.955c-.666-.224-1.284-.572-1.821-1.025l-.006-1.922-.107-.182-1.701-.969c-.134-.678-.134-1.375 0-2.053l1.7-.966.107-.182.009-1.922c.537-.454 1.154-.803 1.82-1.029l1.708.955h.214l1.708-.955c.666.224 1.284.572 1.821 1.025l.006 1.922.107.182 1.7.968c.134.678.134 1.375 0 2.053l-1.7.966-.107.182-.009 1.922c-.536.455-1.154.804-1.819 1.029l-1.706-.955z" stroke-width=".999"/></g>',
-    NEW = '<path d="M26.875 30.5H5.125c-.663 0-1.208-.545-1.208-1.208V2.708c0-.663.545-1.208 1.208-1.208h14.5l8.458 8.458v19.333c0 .663-.545 1.208-1.208 1.208z"/><path d="M19.625 1.5v8.458h8.458m-15.708 9.667h7.25"/><path d="M16 16v7.25"/>',
-    COPY = '<path d="M1.498 6.772h23.73v23.73H1.498zm5.274-5.274h23.73v23.73"/>',
-    TRASH = '<path d="M29.5 6.182h-27m9.818 7.363v9.818m7.364-9.818v9.818"/><path d="M27.045 6.182V29.5c0 .673-.554 1.227-1.227 1.227H6.182c-.673 0-1.227-.554-1.227-1.227V6.182m17.181 0V3.727a2.47 2.47 0 0 0-2.455-2.455h-7.364a2.47 2.47 0 0 0-2.455 2.455v2.455"/>',
-    CURSOR_TEXT = '<path d="M16 7.3a5.83 5.83 0 0 1 5.8-5.8h2.9m0 29h-2.9a5.83 5.83 0 0 1-5.8-5.8"/><path d="M7.3 30.5h2.9a5.83 5.83 0 0 0 5.8-5.8V7.3a5.83 5.83 0 0 0-5.8-5.8H7.3"/><path d="M11.65 16h8.7"/>',
-    QUESTION = '<g transform="matrix(.256867 0 0 .256867 -16.878964 -18.049342)"><circle cx="128" cy="180" r="12" fill="#fff"/><path d="M128 144v-8c17.67 0 32-12.54 32-28s-14.33-28-32-28-32 12.54-32 28v4" fill="none" stroke="#fff" stroke-width="16"/></g>',
+const svgParser = (svg: string) => new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement;
 
-    REMOTE_PLAY = '<g transform="matrix(.492308 0 0 .581818 -14.7692 -11.6364)"><clipPath id="A"><path d="M30 20h65v55H30z"/></clipPath><g clip-path="url(#A)"><g transform="matrix(.395211 0 0 .334409 11.913 7.01124)"><g transform="matrix(.555556 0 0 .555556 57.8889 -20.2417)" fill="none" stroke="#fff" stroke-width="13.88"><path d="M200 140.564c-42.045-33.285-101.955-33.285-144 0M168 165c-23.783-17.3-56.217-17.3-80 0"/></g><g transform="matrix(-.555556 0 0 -.555556 200.111 262.393)"><g transform="matrix(1 0 0 1 0 11.5642)"><path d="M200 129c-17.342-13.728-37.723-21.795-58.636-24.198C111.574 101.378 80.703 109.444 56 129" fill="none" stroke="#fff" stroke-width="13.88"/></g><path d="M168 165c-23.783-17.3-56.217-17.3-80 0" fill="none" stroke="#fff" stroke-width="13.88"/></g><g transform="matrix(.75 0 0 .75 32 32)"><path d="M24 72h208v93.881H24z" fill="none" stroke="#fff" stroke-linejoin="miter" stroke-width="9.485"/><circle cx="188" cy="128" r="12" stroke-width="10" transform="matrix(.708333 0 0 .708333 71.8333 12.8333)"/><path d="M24.358 103.5h110" fill="none" stroke="#fff" stroke-linecap="butt" stroke-width="10.282"/></g></g></g></g>',
-
-    HAND_TAP = '<path d="M6.537 8.906c0-4.216 3.469-7.685 7.685-7.685s7.685 3.469 7.685 7.685M7.719 30.778l-4.333-7.389C3.133 22.944 3 22.44 3 21.928a2.97 2.97 0 0 1 2.956-2.956 2.96 2.96 0 0 1 2.55 1.461l2.761 4.433V8.906a2.97 2.97 0 0 1 2.956-2.956 2.97 2.97 0 0 1 2.956 2.956v8.276a2.97 2.97 0 0 1 2.956-2.956 2.97 2.97 0 0 1 2.956 2.956v2.365a2.97 2.97 0 0 1 2.956-2.956A2.97 2.97 0 0 1 29 19.547v5.32c0 3.547-1.182 5.911-1.182 5.911"/>',
-};
-
-export const createSvgIcon = (icon: string, strokeWidth=2) => {
-    const $svg = CE('svg', {
-        'xmlns': 'http://www.w3.org/2000/svg',
-        'fill': 'none',
-        'stroke': '#fff',
-        'fill-rule': 'evenodd',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        'stroke-width': strokeWidth,
-    });
-    $svg.innerHTML = icon;
-    $svg.setAttribute('viewBox', '0 0 32 32');
-
-    return $svg;
-};
+export const createSvgIcon = (icon: typeof BxIcon) => {
+    return svgParser(icon.toString());
+}
 
 export const ButtonStyle: DualEnum = {};
 ButtonStyle[ButtonStyle.PRIMARY = 1] = 'bx-primary';
@@ -103,7 +77,7 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
         $btn.href = options.url;
         $btn.target = '_blank';
     } else {
-        $btn = CE('button', {'class': 'bx-button'}) as HTMLButtonElement;
+        $btn = CE('button', {'class': 'bx-button', type: 'button'}) as HTMLButtonElement;
     }
 
     const style = (options.style || 0) as number;
@@ -113,7 +87,7 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
 
     options.classes && $btn.classList.add(...options.classes);
 
-    options.icon && $btn.appendChild(createSvgIcon(options.icon, 4));
+    options.icon && $btn.appendChild(createSvgIcon(options.icon));
     options.label && $btn.appendChild(CE('span', {}, options.label));
     options.title && $btn.setAttribute('title', options.title);
     options.disabled && (($btn as HTMLButtonElement).disabled = true);
@@ -122,5 +96,13 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     return $btn as T;
 }
 
+export function escapeHtml(html: string): string {
+    const text = document.createTextNode(html);
+    const $span = document.createElement('span');
+    $span.appendChild(text);
+
+    return $span.innerHTML;
+}
+
 export const CTN = document.createTextNode.bind(document);
 window.BX_CE = createElement;

src/utils/local-db.ts

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

src/utils/monkey-patches.ts

@@ -1,7 +1,8 @@
-import { BxEvent } from "./bx-event";
-import { getPref, PrefKey } from "./preferences";
-import { STATES } from "./global";
-import { UserAgent } from "./user-agent";
+import { BxEvent } from "@utils/bx-event";
+import { getPref, PrefKey } from "@utils/preferences";
+import { STATES } from "@utils/global";
+import { BxLogger } from "@utils/bx-logger";
+import { patchSdpBitrate } from "./sdp";
 
 export function patchVideoApi() {
     const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO);
@@ -77,7 +78,7 @@ export function patchRtcCodecs() {
             nativeSetCodecPreferences.apply(this, [newCodecs]);
         } catch (e) {
             // Didn't work -> use default codecs
-            console.log(e);
+            BxLogger.error('setCodecPreferences', e);
             nativeSetCodecPreferences.apply(this, [codecs]);
         }
     }
@@ -96,6 +97,22 @@ export function patchRtcPeerConnection() {
         return dataChannel;
     }
 
+    const nativeSetLocalDescription = RTCPeerConnection.prototype.setLocalDescription;
+    RTCPeerConnection.prototype.setLocalDescription = function(description?: RTCLocalSessionDescriptionInit): Promise<void> {
+        // set maximum bitrate
+        try {
+            const maxVideoBitrate = getPref(PrefKey.BITRATE_VIDEO_MAX);
+            if (maxVideoBitrate > 0) {
+                arguments[0].sdp = patchSdpBitrate(arguments[0].sdp, maxVideoBitrate * 1000);
+            }
+        } catch (e) {
+            BxLogger.error('setLocalDescription', e);
+        }
+
+        // @ts-ignore
+        return nativeSetLocalDescription.apply(this, arguments);
+    };
+
     const OrgRTCPeerConnection = window.RTCPeerConnection;
     // @ts-ignore
     window.RTCPeerConnection = function() {
@@ -103,56 +120,102 @@ export function patchRtcPeerConnection() {
         STATES.currentStream.peerConnection = conn;
 
         conn.addEventListener('connectionstatechange', e => {
-                if (conn.connectionState === 'connecting') {
-                    STATES.currentStream.audioGainNode = null;
-                }
-                console.log('connectionState', conn.connectionState);
+                BxLogger.info('connectionstatechange', conn.connectionState);
             });
         return conn;
     }
 }
 
 export function patchAudioContext() {
-    if (UserAgent.isSafari(true)) {
-        const nativeCreateGain = window.AudioContext.prototype.createGain;
-        window.AudioContext.prototype.createGain = function() {
+    const OrgAudioContext = window.AudioContext;
+    const nativeCreateGain = OrgAudioContext.prototype.createGain;
+
+    // @ts-ignore
+    window.AudioContext = function(options?: AudioContextOptions | undefined): AudioContext {
+        const ctx = new OrgAudioContext(options);
+        BxLogger.info('patchAudioContext', ctx, options);
+
+        ctx.createGain = function() {
             const gainNode = nativeCreateGain.apply(this);
             gainNode.gain.value = getPref(PrefKey.AUDIO_VOLUME) / 100;
+
             STATES.currentStream.audioGainNode = gainNode;
             return gainNode;
         }
-    }
 
-    const OrgAudioContext = window.AudioContext;
-    // @ts-ignore
-    window.AudioContext = function() {
-        const ctx = new OrgAudioContext();
         STATES.currentStream.audioContext = ctx;
-        STATES.currentStream.audioGainNode = null;
         return ctx;
     }
+}
 
-    const nativePlay = HTMLAudioElement.prototype.play;
-    HTMLAudioElement.prototype.play = function() {
-        this.muted = true;
+/**
+ * Disable telemetry flags in meversion.js
+ */
+export function patchMeControl() {
+    const overrideConfigs = {
+        enableAADTelemetry: false,
+        enableTelemetry: false,
+        telEvs: '',
+        oneDSUrl: '',
+    };
 
-        const promise = nativePlay.apply(this);
-        if (STATES.currentStream.audioGainNode) {
-            return promise;
+    const MSA = {
+        MeControl: {},
+    };
+    const MeControl = {};
+
+    const MsaHandler: ProxyHandler<any> = {
+        get(target, prop, receiver) {
+            return target[prop];
+        },
+
+        set(obj, prop, value) {
+            if (prop === 'MeControl' && value.Config) {
+                value.Config = Object.assign(value.Config, overrideConfigs);
+            }
+
+            obj[prop] = value;
+            return true;
+        },
+    };
+
+    const MeControlHandler: ProxyHandler<any> = {
+        get(target, prop, receiver) {
+            return target[prop];
+        },
+
+        set(obj, prop, value) {
+            if (prop === 'Config') {
+                value = Object.assign(value, overrideConfigs);
+            }
+
+            obj[prop] = value;
+            return true;
+        },
+    };
+
+    (window as any).MSA = new Proxy(MSA, MsaHandler);
+    (window as any).MeControl = new Proxy(MeControl, MeControlHandler);
+}
+
+/**
+ * Use power-saving flags for touch control
+ */
+export function patchCanvasContext() {
+    const nativeGetContext = HTMLCanvasElement.prototype.getContext;
+    // @ts-ignore
+    HTMLCanvasElement.prototype.getContext = function(contextType: string, contextAttributes?: any) {
+        if (contextType.includes('webgl')) {
+            contextAttributes = contextAttributes || {};
+
+            contextAttributes.antialias = false;
+
+            // Use low-power profile for touch controller
+            if (contextAttributes.powerPreference === 'high-performance') {
+                contextAttributes.powerPreference = 'low-power';
+            }
         }
 
-        this.addEventListener('playing', e => (e.target as HTMLAudioElement).pause());
-
-        const audioCtx = STATES.currentStream.audioContext!;
-        // TOOD: check srcObject
-        const audioStream = audioCtx.createMediaStreamSource(this.srcObject as any);
-        const gainNode = audioCtx.createGain();
-
-        audioStream.connect(gainNode);
-        gainNode.connect(audioCtx.destination);
-        gainNode.gain.value = getPref(PrefKey.AUDIO_VOLUME) / 100;
-        STATES.currentStream.audioGainNode = gainNode;
-
-        return promise;
+        return nativeGetContext.apply(this, [contextType, contextAttributes]);
     }
 }

src/utils/network.ts

@@ -1,14 +1,15 @@
-import { BxEvent } from "./bx-event";
-import { BX_FLAGS } from "./bx-flags";
-import { LoadingScreen } from "../modules/loading-screen";
-import { PrefKey, getPref } from "./preferences";
-import { RemotePlay } from "../modules/remote-play";
-import { StreamBadges } from "../modules/stream/stream-badges";
-import { TouchController } from "../modules/touch-controller";
-import { STATES } from "./global";
-import { getPreferredServerRegion } from "./region";
-
-export const NATIVE_FETCH = window.fetch;
+import { BxEvent } from "@utils/bx-event";
+import { BX_FLAGS, NATIVE_FETCH } from "@utils/bx-flags";
+import { LoadingScreen } from "@modules/loading-screen";
+import { PrefKey, getPref } from "@utils/preferences";
+import { RemotePlay } from "@modules/remote-play";
+import { StreamBadges } from "@modules/stream/stream-badges";
+import { TouchController } from "@modules/touch-controller";
+import { STATES } from "@utils/global";
+import { getPreferredServerRegion } from "@utils/region";
+import { GamePassCloudGallery } from "./gamepass-gallery";
+import { InputType } from "./bx-exposed";
+import { UserAgent } from "./user-agent";
 
 enum RequestType {
     XCLOUD = 'xcloud',
@@ -78,7 +79,7 @@ function updateIceCandidates(candidates: any, options: any) {
 
     lst.forEach(item => {
         item.foundation = foundation;
-        item.priority = (foundation == 1) ? 10000 : 1;
+        item.priority = (foundation == 1) ? 2130706431 : 1;
 
         newCandidates.push(newCandidate(`a=candidate:${item.foundation} 1 UDP ${item.priority} ${item.ip} ${item.port} ${item.the_rest}`));
         ++foundation;
@@ -187,7 +188,7 @@ class XhomeInterceptor {
         let hasTouchSupport = inputConfigs.supportedTabs.length > 0;
         if (!hasTouchSupport) {
             const supportedInputTypes = inputConfigs.supportedInputTypes;
-            hasTouchSupport = supportedInputTypes.includes('NativeTouch');
+            hasTouchSupport = supportedInputTypes.includes(InputType.NATIVE_TOUCH) || supportedInputTypes.includes(InputType.CUSTOM_TOUCH_OVERLAY);
         }
 
         if (hasTouchSupport) {
@@ -226,6 +227,19 @@ class XhomeInterceptor {
         return NATIVE_FETCH(request);
     }
 
+    static async #handlePlay(request: RequestInfo | URL) {
+        const clone = (request as Request).clone();
+        const body = await clone.json();
+
+        // body.settings.useIceConnection = true;
+
+        const newRequest = new Request(request, {
+            body: JSON.stringify(body),
+        });
+
+        return NATIVE_FETCH(newRequest);
+    }
+
     static async handle(request: Request) {
         TouchController.disable();
 
@@ -267,6 +281,8 @@ class XhomeInterceptor {
         // Get console IP
         if (url.includes('/configuration')) {
             return XhomeInterceptor.#handleConfiguration(request);
+        } else if (url.endsWith('/sessions/home/play')) {
+            return XhomeInterceptor.#handlePlay(request);
         } else if (url.includes('inputconfigs')) {
             return XhomeInterceptor.#handleInputConfigs(request, opts);
         } else if (url.includes('/login/user')) {
@@ -422,6 +438,17 @@ class XcloudInterceptor {
         overrides.inputConfiguration = overrides.inputConfiguration || {};
         overrides.inputConfiguration.enableVibration = true;
 
+        if (getPref(PrefKey.NATIVE_MKB_DISABLED) || UserAgent.isMobile()) {
+            overrides.inputConfiguration = Object.assign(overrides.inputConfiguration, {
+                    enableMouseInput: false,
+                    enableAbsoluteMouse: false,
+                    enableKeyboardInput: false,
+                });
+        }
+
+        overrides.videoConfiguration = overrides.videoConfiguration || {};
+        overrides.videoConfiguration.setCodecPreferences = true;
+
         // Enable touch controller
         if (TouchController.isEnabled()) {
             overrides.inputConfiguration.enableTouchInput = true;
@@ -473,7 +500,7 @@ export function interceptHttpRequests() {
             'https://arc.msn.com',
             'https://browser.events.data.microsoft.com',
             'https://dc.services.visualstudio.com',
-            // 'https://2c06dea3f26c40c69b8456d319791fd0@o427368.ingest.sentry.io',
+            'https://2c06dea3f26c40c69b8456d319791fd0@o427368.ingest.sentry.io',
         ]);
     }
 
@@ -481,7 +508,8 @@ export function interceptHttpRequests() {
         BLOCKED_URLS = BLOCKED_URLS.concat([
             'https://peoplehub.xboxlive.com/users/me/people/social',
             'https://peoplehub.xboxlive.com/users/me/people/recommendations',
-            'https://notificationinbox.xboxlive.com',
+            'https://xblmessaging.xboxlive.com/network/xbox/users/me/inbox',
+            // 'https://notificationinbox.xboxlive.com',
             // 'https://accounts.xboxlive.com/family/memberXuid',
         ]);
     }
@@ -510,7 +538,9 @@ export function interceptHttpRequests() {
         return nativeXhrSend.apply(this, arguments);
     };
 
-    window.fetch = async (request: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    let gamepassAllGames: string[] = [];
+
+    (window as any).BX_FETCH = window.fetch = async (request: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
         let url = (typeof request === 'string') ? request : (request as Request).url;
 
         // Check blocked URLs
@@ -533,6 +563,56 @@ export function interceptHttpRequests() {
             BxEvent.dispatch(window, BxEvent.STREAM_STARTING);
         }
 
+        // Override experimentals
+        if (url.startsWith('https://emerald.xboxservices.com/xboxcomfd/experimentation')) {
+            try {
+                const response = await NATIVE_FETCH(request, init);
+                const json = await response.json();
+
+                const overrideTreatments: {[key: string]: boolean} = {};
+
+                if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
+                    overrideTreatments['EnableHomeContextMenu'] = false;
+                }
+
+                for (const key in overrideTreatments) {
+                    json.exp.treatments[key] = overrideTreatments[key]
+                }
+
+                response.json = () => Promise.resolve(json);
+                return response;
+            } catch (e) {
+                console.log(e);
+            }
+        }
+
+        // Add list of games with custom layouts to the official list
+        if (STATES.hasTouchSupport && url.includes('catalog.gamepass.com/sigls/')) {
+            const response = await NATIVE_FETCH(request, init);
+            const obj = await response.clone().json();
+
+            if (url.includes(GamePassCloudGallery.ALL)) {
+                for (let i = 1; i < obj.length; i++) {
+                    gamepassAllGames.push(obj[i].id);
+                }
+            } else if (url.includes(GamePassCloudGallery.TOUCH)) {
+                try {
+                    let customList = TouchController.getCustomList();
+
+                    // Remove non-cloud games from the list
+                    customList = customList.filter(id => gamepassAllGames.includes(id));
+
+                    const newCustomList = customList.map(item => ({ id: item }));
+                    obj.push(...newCustomList);
+                } catch (e) {
+                    console.log(e);
+                }
+            }
+
+            response.json = () => Promise.resolve(obj);
+            return response;
+        }
+
         let requestType: RequestType;
         if (url.includes('/sessions/home') || url.includes('xhome.') || (STATES.remotePlay.isPlaying && url.endsWith('/inputconfigs'))) {
             requestType = RequestType.XHOME;

src/utils/preferences.ts

@@ -1,10 +1,10 @@
-import { CE } from "./html";
-import { SUPPORTED_LANGUAGES, t } from "./translation";
-import { SettingElement, SettingElementType } from "./settings";
-import { UserAgentProfile } from "./user-agent";
-import { StreamStat } from "../modules/stream/stream-stats";
-import type { PreferenceSettings } from "../types/preferences";
-import { STATES } from "./global";
+import { CE } from "@utils/html";
+import { SUPPORTED_LANGUAGES, t } from "@utils/translation";
+import { SettingElement, SettingElementType } from "@utils/settings";
+import { UserAgentProfile } from "@utils/user-agent";
+import { StreamStat } from "@modules/stream/stream-stats";
+import type { PreferenceSetting, PreferenceSettings } from "@/types/preferences";
+import { STATES } from "@utils/global";
 
 export enum PrefKey {
     LAST_UPDATE_CHECK = 'version_last_check',
@@ -20,18 +20,22 @@ export enum PrefKey {
     STREAM_CODEC_PROFILE = 'stream_codec_profile',
 
     USER_AGENT_PROFILE = 'user_agent_profile',
-    USER_AGENT_CUSTOM = 'user_agent_custom',
     STREAM_SIMPLIFY_MENU = 'stream_simplify_menu',
 
     STREAM_COMBINE_SOURCES = 'stream_combine_sources',
 
     STREAM_TOUCH_CONTROLLER = 'stream_touch_controller',
     STREAM_TOUCH_CONTROLLER_AUTO_OFF = 'stream_touch_controller_auto_off',
+    STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY = 'stream_touch_controller_default_opacity',
     STREAM_TOUCH_CONTROLLER_STYLE_STANDARD = 'stream_touch_controller_style_standard',
     STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM = 'stream_touch_controller_style_custom',
 
     STREAM_DISABLE_FEEDBACK_DIALOG = 'stream_disable_feedback_dialog',
 
+    BITRATE_VIDEO_MAX = 'bitrate_video_max',
+
+    GAME_BAR_POSITION = 'game_bar_position',
+
     LOCAL_CO_OP_ENABLED = 'local_co_op_enabled',
     // LOCAL_CO_OP_SEPARATE_TOUCH_CONTROLLER = 'local_co_op_separate_touch_controller',
 
@@ -40,12 +44,12 @@ export enum PrefKey {
     CONTROLLER_DEVICE_VIBRATION = 'controller_device_vibration',
     CONTROLLER_VIBRATION_INTENSITY = 'controller_vibration_intensity',
 
+    NATIVE_MKB_DISABLED = 'native_mkb_disabled',
     MKB_ENABLED = 'mkb_enabled',
     MKB_HIDE_IDLE_CURSOR = 'mkb_hide_idle_cursor',
     MKB_ABSOLUTE_MOUSE = 'mkb_absolute_mouse',
     MKB_DEFAULT_PRESET_ID = 'mkb_default_preset_id',
 
-    SCREENSHOT_BUTTON_POSITION = 'screenshot_button_position',
     SCREENSHOT_APPLY_FILTERS = 'screenshot_apply_filters',
 
     BLOCK_TRACKING = 'block_tracking',
@@ -61,6 +65,8 @@ export enum PrefKey {
     UI_LAYOUT = 'ui_layout',
     UI_SCROLLBAR_HIDE = 'ui_scrollbar_hide',
 
+    UI_HOME_CONTEXT_MENU_DISABLED = 'ui_home_context_menu_disabled',
+
     VIDEO_CLARITY = 'video_clarity',
     VIDEO_RATIO = 'video_ratio',
     VIDEO_BRIGHTNESS = 'video_brightness',
@@ -207,8 +213,7 @@ export class Preferences {
 
                 return options;
             })(),
-            ready: () => {
-                const setting = Preferences.SETTINGS[PrefKey.STREAM_CODEC_PROFILE]
+            ready: (setting: PreferenceSetting) => {
                 const options: any = setting.options;
                 const keys = Object.keys(options);
 
@@ -226,15 +231,6 @@ export class Preferences {
             default: false,
         },
 
-        [PrefKey.SCREENSHOT_BUTTON_POSITION]: {
-            label: t('screenshot-button-position'),
-            default: 'bottom-left',
-            options: {
-                'bottom-left': t('bottom-left'),
-                'bottom-right': t('bottom-right'),
-                'none': t('disable'),
-            },
-        },
         [PrefKey.SCREENSHOT_APPLY_FILTERS]: {
             label: t('screenshot-apply-filters'),
             default: false,
@@ -265,8 +261,7 @@ export class Preferences {
                 off: t('off'),
             },
             unsupported: !STATES.hasTouchSupport,
-            ready: () => {
-                const setting = Preferences.SETTINGS[PrefKey.STREAM_TOUCH_CONTROLLER];
+            ready: (setting: PreferenceSetting) => {
                 if (setting.unsupported) {
                     setting.default = 'default';
                 }
@@ -277,6 +272,20 @@ export class Preferences {
             default: false,
             unsupported: !STATES.hasTouchSupport,
         },
+        [PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY]: {
+            type: SettingElementType.NUMBER_STEPPER,
+            label: t('tc-default-opacity'),
+            default: 100,
+            min: 10,
+            max: 100,
+            steps: 10,
+            params: {
+                suffix: '%',
+                ticks: 10,
+                hideSlider: true,
+            },
+            unsupported: !STATES.hasTouchSupport,
+        },
         [PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD]: {
             label: t('tc-standard-layout-style'),
             default: 'default',
@@ -310,6 +319,39 @@ export class Preferences {
             default: false,
         },
 
+        [PrefKey.BITRATE_VIDEO_MAX]: {
+            type: SettingElementType.NUMBER_STEPPER,
+            label: t('bitrate-video-maximum'),
+            note: '⚠️ ' + t('unexpected-behavior'),
+            default: 0,
+            min: 0,
+            max: 14,
+            steps: 1,
+            params: {
+                suffix: ' Mb/s',
+                exactTicks: 5,
+                customTextValue: (value: any) => {
+                    value = parseInt(value);
+
+                    if (value === 0) {
+                        return t('unlimited');
+                    }
+
+                    return null;
+                },
+            },
+        },
+
+        [PrefKey.GAME_BAR_POSITION]: {
+            label: t('position'),
+            default: 'bottom-left',
+            options: {
+                'bottom-left': t('bottom-left'),
+                'bottom-right': t('bottom-right'),
+                'off': t('off'),
+            },
+        },
+
         [PrefKey.LOCAL_CO_OP_ENABLED]: {
             label: t('enable-local-co-op-support'),
             default: false,
@@ -331,10 +373,12 @@ export class Preferences {
         },
 
         [PrefKey.CONTROLLER_ENABLE_VIBRATION]: {
+            label: t('controller-vibration'),
             default: true,
         },
 
         [PrefKey.CONTROLLER_DEVICE_VIBRATION]: {
+            label: t('device-vibration'),
             default: 'off',
             options: {
                 on: t('on'),
@@ -344,6 +388,7 @@ export class Preferences {
         },
 
         [PrefKey.CONTROLLER_VIBRATION_INTENSITY]: {
+            label: t('vibration-intensity'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 100,
             min: 0,
@@ -359,15 +404,13 @@ export class Preferences {
             label: t('enable-mkb'),
             default: false,
             unsupported: ((): string | boolean => {
-                    const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
-                    return userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
-                })(),
-            ready: () => {
-                const pref = Preferences.SETTINGS[PrefKey.MKB_ENABLED];
-
+                const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
+                return userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
+            })(),
+            ready: (setting: PreferenceSetting) => {
                 let note;
                 let url;
-                if (pref.unsupported) {
+                if (setting.unsupported) {
                     note = t('browser-unsupported-feature');
                     url = 'https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657';
                 } else {
@@ -375,13 +418,18 @@ export class Preferences {
                     url = 'https://better-xcloud.github.io/mouse-and-keyboard/#disclaimer';
                 }
 
-                Preferences.SETTINGS[PrefKey.MKB_ENABLED].note = CE('a', {
+                setting.note = CE('a', {
                         href: url,
                         target: '_blank',
                     }, '⚠️ ' + note);
             },
         },
 
+        [PrefKey.NATIVE_MKB_DISABLED]: {
+            label: t('disable-native-mkb'),
+            default: false,
+        },
+
         [PrefKey.MKB_DEFAULT_PRESET_ID]: {
             default: 0,
         },
@@ -417,6 +465,7 @@ export class Preferences {
             default: 'default',
             options: {
                 default: t('default'),
+                normal: t('normal'),
                 tv: t('smart-tv'),
             },
         },
@@ -426,6 +475,11 @@ export class Preferences {
             default: false,
         },
 
+        [PrefKey.UI_HOME_CONTEXT_MENU_DISABLED]: {
+            label: t('disable-home-context-menu'),
+            default: false,
+        },
+
         [PrefKey.BLOCK_SOCIAL_FEATURES]: {
             label: t('disable-social-features'),
             default: false,
@@ -436,20 +490,21 @@ export class Preferences {
         },
         [PrefKey.USER_AGENT_PROFILE]: {
             label: t('user-agent-profile'),
+            note: '⚠️ ' + t('unexpected-behavior'),
             default: 'default',
             options: {
                 [UserAgentProfile.DEFAULT]: t('default'),
-                [UserAgentProfile.EDGE_WINDOWS]: 'Edge + Windows',
-                [UserAgentProfile.SAFARI_MACOS]: 'Safari + macOS',
+                [UserAgentProfile.WINDOWS_EDGE]: 'Edge + Windows',
+                [UserAgentProfile.MACOS_SAFARI]: 'Safari + macOS',
+                [UserAgentProfile.SMARTTV_GENERIC]: 'Smart TV',
                 [UserAgentProfile.SMARTTV_TIZEN]: 'Samsung Smart TV',
-                [UserAgentProfile.KIWI_V123]: 'Kiwi Browser v123',
+                [UserAgentProfile.VR_OCULUS]: 'Meta Quest VR',
+                [UserAgentProfile.ANDROID_KIWI_V123]: 'Kiwi Browser v123',
                 [UserAgentProfile.CUSTOM]: t('custom'),
             },
         },
-        [PrefKey.USER_AGENT_CUSTOM]: {
-            default: '',
-        },
         [PrefKey.VIDEO_CLARITY]: {
+            label: t('clarity'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 0,
             min: 0,
@@ -459,6 +514,8 @@ export class Preferences {
             },
         },
         [PrefKey.VIDEO_RATIO]: {
+            label: t('ratio'),
+            note: t('stretch-note'),
             default: '16:9',
             options: {
                 '16:9': '16:9',
@@ -472,6 +529,7 @@ export class Preferences {
             },
         },
         [PrefKey.VIDEO_SATURATION]: {
+            label: t('saturation'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 100,
             min: 50,
@@ -482,6 +540,7 @@ export class Preferences {
             },
         },
         [PrefKey.VIDEO_CONTRAST]: {
+            label: t('contrast'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 100,
             min: 50,
@@ -492,6 +551,7 @@ export class Preferences {
             },
         },
         [PrefKey.VIDEO_BRIGHTNESS]: {
+            label: t('brightness'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 100,
             min: 50,
@@ -509,9 +569,9 @@ export class Preferences {
         [PrefKey.AUDIO_ENABLE_VOLUME_CONTROL]: {
             label: t('enable-volume-control'),
             default: false,
-            experimental: true,
         },
         [PrefKey.AUDIO_VOLUME]: {
+            label: t('volume'),
             type: SettingElementType.NUMBER_STEPPER,
             default: 100,
             min: 0,
@@ -524,6 +584,7 @@ export class Preferences {
 
 
         [PrefKey.STATS_ITEMS]: {
+            label: t('stats'),
             default: [StreamStat.PING, StreamStat.FPS, StreamStat.BITRATE, StreamStat.DECODE_TIME, StreamStat.PACKETS_LOST, StreamStat.FRAMES_LOST],
             multipleOptions: {
                 [StreamStat.PING]: `${StreamStat.PING.toUpperCase()}: ${t('stat-ping')}`,
@@ -538,12 +599,15 @@ export class Preferences {
             },
         },
         [PrefKey.STATS_SHOW_WHEN_PLAYING]: {
+            label: t('show-stats-on-startup'),
             default: false,
         },
         [PrefKey.STATS_QUICK_GLANCE]: {
+            label: '👀 ' + t('enable-quick-glance-mode'),
             default: true,
         },
         [PrefKey.STATS_POSITION]: {
+            label: t('position'),
             default: 'top-right',
             options: {
                 'top-left': t('top-left'),
@@ -552,6 +616,7 @@ export class Preferences {
             },
         },
         [PrefKey.STATS_TEXT_SIZE]: {
+            label: t('text-size'),
             default: '0.9rem',
             options: {
                 '0.9rem': t('small'),
@@ -560,9 +625,11 @@ export class Preferences {
             },
         },
         [PrefKey.STATS_TRANSPARENT]: {
+            label: t('transparent-background'),
             default: false,
         },
         [PrefKey.STATS_OPACITY]: {
+            label: t('opacity'),
             type:  SettingElementType.NUMBER_STEPPER,
             default: 80,
             min: 50,
@@ -573,6 +640,7 @@ export class Preferences {
             },
         },
         [PrefKey.STATS_CONDITIONAL_FORMATTING]: {
+            label: t('conditional-formatting'),
             default: false,
         },
 
@@ -621,7 +689,7 @@ export class Preferences {
 
         for (let settingId in Preferences.SETTINGS) {
             const setting = Preferences.SETTINGS[settingId];
-            setting.ready && setting.ready.call(this);
+            setting.ready && setting.ready.call(this, setting);
 
             if (setting.migrate && settingId in savedPrefs) {
                 setting.migrate.call(this, savedPrefs, savedPrefs[settingId]);
@@ -703,11 +771,13 @@ export class Preferences {
         return this.#prefs[key];
     }
 
-    set(key: PrefKey, value: any) {
+    set(key: PrefKey, value: any): any {
         value = this.#validateValue(key, value);
 
         this.#prefs[key] = value;
         this.#updateStorage();
+
+        return value;
     }
 
     #updateStorage() {
@@ -718,7 +788,6 @@ export class Preferences {
         const setting = Preferences.SETTINGS[key];
         let currentValue = this.get(key);
 
-        let $control;
         let type;
         if ('type' in setting) {
             type = setting.type;
@@ -737,7 +806,7 @@ export class Preferences {
             currentValue = Preferences.SETTINGS[key].default;
         }
 
-        $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
+        const $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
                 this.set(key, value);
                 onChange && onChange(e, value);
             }, params);

src/utils/preload-state.ts

@@ -0,0 +1,58 @@
+import { STATES } from "@utils/global";
+import { BxLogger } from "./bx-logger";
+import { TouchController } from "@modules/touch-controller";
+import { GamePassCloudGallery } from "./gamepass-gallery";
+import { getPref, PrefKey } from "./preferences";
+
+const LOG_TAG = 'PreloadState';
+
+export function overridePreloadState() {
+    let _state: any;
+
+    Object.defineProperty(window, '__PRELOADED_STATE__', {
+        configurable: true,
+        get: () => {
+            return _state;
+        },
+        set: state => {
+            // Override User-Agent
+            try {
+                state.appContext.requestInfo.userAgent = window.navigator.userAgent;
+            } catch (e) {
+                BxLogger.error(LOG_TAG, e);
+            }
+
+            // Add list of games with custom layouts to the official list
+            if (STATES.hasTouchSupport) {
+                try {
+                    const sigls = state.xcloud.sigls;
+                    if (GamePassCloudGallery.TOUCH in sigls) {
+                        let customList = TouchController.getCustomList();
+
+                        const allGames = sigls[GamePassCloudGallery.ALL].data.products;
+
+                        // Remove non-cloud games from the list
+                        customList = customList.filter(id => allGames.includes(id));
+
+                        // Add to the official list
+                        sigls[GamePassCloudGallery.TOUCH]?.data.products.push(...customList);
+                    }
+                } catch (e) {
+                    BxLogger.error(LOG_TAG, e);
+                }
+            }
+
+            if (getPref(PrefKey.UI_HOME_CONTEXT_MENU_DISABLED)) {
+                try {
+                    state.experiments.experimentationInfo.data.treatments.EnableHomeContextMenu = false;
+                } catch (e) {
+                    BxLogger.error(LOG_TAG, e);
+                }
+            }
+
+            // @ts-ignore
+            _state = state;
+            STATES.appContext = structuredClone(state.appContext);
+        }
+    });
+}

src/utils/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/utils/region.ts

@@ -1,5 +1,5 @@
-import { getPref, PrefKey } from "./preferences";
-import { STATES } from "./global";
+import { getPref, PrefKey } from "@utils/preferences";
+import { STATES } from "@utils/global";
 
 
 export function getPreferredServerRegion(shortName = false) {

src/utils/screenshot.ts

@@ -0,0 +1,80 @@
+import { AppInterface, STATES } from "./global";
+import { CE } from "./html";
+
+
+export class Screenshot {
+    static #$canvas: HTMLCanvasElement;
+    static #canvasContext: CanvasRenderingContext2D;
+
+    static setup() {
+        if (Screenshot.#$canvas) {
+            return;
+        }
+
+        Screenshot.#$canvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+
+        Screenshot.#canvasContext = Screenshot.#$canvas.getContext('2d', {
+            alpha: false,
+            willReadFrequently: false,
+        })!;
+    }
+
+    static updateCanvasSize(width: number, height: number) {
+        const $canvas = Screenshot.#$canvas;
+        if ($canvas) {
+            $canvas.width = width;
+            $canvas.height = height;
+        }
+    }
+
+    static updateCanvasFilters(filters: string) {
+        Screenshot.#canvasContext.filter = filters;
+    }
+
+    private static onAnimationEnd(e: Event) {
+        (e.target as any).classList.remove('bx-taking-screenshot');
+    }
+
+    static takeScreenshot(callback?: any) {
+        const currentStream = STATES.currentStream;
+        const $video = currentStream.$video;
+        const $canvas = Screenshot.#$canvas;
+        if (!$video || !$canvas) {
+            return;
+        }
+
+        $video.parentElement?.addEventListener('animationend', this.onAnimationEnd);
+        $video.parentElement?.classList.add('bx-taking-screenshot');
+
+        const canvasContext = Screenshot.#canvasContext;
+        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');
+    }
+}

src/utils/sdp.ts

@@ -0,0 +1,61 @@
+export function patchSdpBitrate(sdp: string, video?: number, audio?: number) {
+    const lines = sdp.split('\n');
+
+    const mediaSet: Set<string> = new Set();
+    !!video && mediaSet.add('video');
+    !!audio && mediaSet.add('audio');
+
+    const bitrate = {
+        video,
+        audio,
+    };
+
+    for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) {
+        let media: string = '';
+
+        let line = lines[lineNumber];
+        if (!line.startsWith('m=')) {
+            continue;
+        }
+
+        for (const m of mediaSet) {
+            if (line.startsWith(`m=${m}`)) {
+                media = m;
+                // Remove matched media from set
+                mediaSet.delete(media);
+                break;
+            }
+        }
+
+        // Invalid media, continue looking
+        if (!media) {
+            continue;
+        }
+
+        const bLine = `b=AS:${bitrate[media as keyof typeof bitrate]}`;
+
+        while (lineNumber++, lineNumber < lines.length) {
+            line = lines[lineNumber];
+            // Ignore lines that start with "i=" or "c="
+            if (line.startsWith('i=') || line.startsWith('c=')) {
+                continue;
+            }
+
+            if (line.startsWith('b=AS:')) {
+                // Replace bitrate
+                lines[lineNumber] = bLine;
+                // Stop lookine for "b=AS:" line
+                break;
+            }
+
+            if (line.startsWith('m=')) {
+                // "b=AS:" line not found, add "b" line before "m="
+                lines.splice(lineNumber, 0, bLine);
+                // Stop
+                break;
+            }
+        }
+    }
+
+    return lines.join('\n');
+}

src/utils/settings.ts

@@ -1,5 +1,5 @@
-import type { PreferenceSetting } from "../types/preferences";
-import { CE } from "./html";
+import type { PreferenceSetting } from "@/types/preferences";
+import { CE } from "@utils/html";
 
 type MultipleOptionsParams = {
     size?: number;
@@ -12,6 +12,8 @@ type NumberStepperParams = {
 
     ticks?: number;
     exactTicks?: number;
+
+    customTextValue?: (value: any) => string | null;
 }
 
 export enum SettingElementType {
@@ -24,7 +26,10 @@ export enum SettingElementType {
 
 export class SettingElement {
     static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE<HTMLSelectElement>('select') as HTMLSelectElement;
+        const $control = CE<HTMLSelectElement>('select', {
+                title: setting.label,
+                tabindex: 0,
+            }) as HTMLSelectElement;
         for (let value in setting.options) {
             const label = setting.options[value];
 
@@ -48,7 +53,11 @@ export class SettingElement {
     }
 
     static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) {
-        const $control = CE<HTMLSelectElement>('select', {'multiple': true});
+        const $control = CE<HTMLSelectElement>('select', {
+                title: setting.label,
+                multiple: true,
+                tabindex: 0,
+            });
         if (params && params.size) {
             $control.setAttribute('size', params.size.toString());
         }
@@ -91,7 +100,7 @@ export class SettingElement {
     }
 
     static #renderNumber(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE('input', {'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
+        const $control = CE('input', {'tabindex': 0, 'type': 'number', 'min': setting.min, 'max': setting.max}) as HTMLInputElement;
         $control.value = currentValue;
         onChange && $control.addEventListener('change', (e: Event) => {
             const target = e.target as HTMLInputElement;
@@ -106,7 +115,7 @@ export class SettingElement {
     }
 
     static #renderCheckbox(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
-        const $control = CE('input', {'type': 'checkbox'}) as HTMLInputElement;
+        const $control = CE('input', {'type': 'checkbox', 'tabindex': 0}) as HTMLInputElement;
         $control.checked = currentValue;
 
         onChange && $control.addEventListener('change', e => {
@@ -131,19 +140,50 @@ export class SettingElement {
         const MAX = setting.max!;
         const STEPS = Math.max(setting.steps || 1, 1);
 
+        const renderTextValue = (value: any) => {
+            value = parseInt(value as string);
+
+            let textContent = null;
+            if (options.customTextValue) {
+                textContent = options.customTextValue(value);
+            }
+
+            if (textContent === null) {
+                textContent = value.toString() + options.suffix;
+            }
+
+            return textContent;
+        };
+
         const $wrapper = CE('div', {'class': 'bx-number-stepper'},
-                            $decBtn = CE('button', {'data-type': 'dec'}, '-') as HTMLButtonElement,
-                            $text = CE('span', {}, value + options.suffix) as HTMLSpanElement,
-                            $incBtn = CE('button', {'data-type': 'inc'}, '+') as HTMLButtonElement,
-                           );
+                $decBtn = CE('button', {
+                        'data-type': 'dec',
+                        type: 'button',
+                        tabindex: -1,
+                    }, '-') as HTMLButtonElement,
+                $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
+                $incBtn = CE('button', {
+                        'data-type': 'inc',
+                        type: 'button',
+                        tabindex: -1,
+                    }, '+') as HTMLButtonElement,
+            );
 
         if (!options.disabled && !options.hideSlider) {
-            $range = CE('input', {'type': 'range', 'min': MIN, 'max': MAX, 'value': value, 'step': STEPS}) as HTMLInputElement;
+            $range = CE('input', {
+                    id: `bx_setting_${key}`,
+                    type: 'range',
+                    min: MIN,
+                    max: MAX,
+                    value: value,
+                    step: STEPS,
+                    tabindex: 0,
+                }) as HTMLInputElement;
+
             $range.addEventListener('input', e => {
                 value = parseInt((e.target as HTMLInputElement).value);
-
-                $text.textContent = value + options.suffix;
-                onChange && onChange(e, value);
+                $text.textContent = renderTextValue(value);
+                !(e as any).ignoreOnChange && onChange && onChange(e, value);
             });
             $wrapper.appendChild($range);
 
@@ -204,17 +244,20 @@ export class SettingElement {
                 value = Math.min(MAX, value + STEPS);
             }
 
-            $text.textContent = value.toString() + options.suffix;
+            $text.textContent = renderTextValue(value);
             $range && ($range.value = value.toString());
 
             isHolding = false;
             onChange && onChange(e, value);
         }
 
-        const onMouseDown = (e: MouseEvent | TouchEvent) => {
+        const onMouseDown = (e: PointerEvent) => {
+            e.preventDefault();
+
             isHolding = true;
 
             const args = arguments;
+            interval && clearInterval(interval);
             interval = window.setInterval(() => {
                 const event = new Event('click');
                 (event as any).arguments = args;
@@ -223,28 +266,30 @@ export class SettingElement {
             }, 200);
         };
 
-        const onMouseUp = (e: MouseEvent | TouchEvent) => {
-            clearInterval(interval);
+        const onMouseUp = (e: PointerEvent) => {
+            e.preventDefault();
+
+            interval && clearInterval(interval);
             isHolding = false;
         };
 
+        const onContextMenu = (e: Event) => e.preventDefault();
+
         // Custom method
         ($wrapper as any).setValue = (value: any) => {
-            $text.textContent = value + options.suffix;
+            $text.textContent = renderTextValue(value);
             $range && ($range.value = value);
         };
 
         $decBtn.addEventListener('click', onClick);
-        $decBtn.addEventListener('mousedown', onMouseDown);
-        $decBtn.addEventListener('mouseup', onMouseUp);
-        $decBtn.addEventListener('touchstart', onMouseDown);
-        $decBtn.addEventListener('touchend', onMouseUp);
+        $decBtn.addEventListener('pointerdown', onMouseDown);
+        $decBtn.addEventListener('pointerup', onMouseUp);
+        $decBtn.addEventListener('contextmenu', onContextMenu);
 
         $incBtn.addEventListener('click', onClick);
-        $incBtn.addEventListener('mousedown', onMouseDown);
-        $incBtn.addEventListener('mouseup', onMouseUp);
-        $incBtn.addEventListener('touchstart', onMouseDown);
-        $incBtn.addEventListener('touchend', onMouseUp);
+        $incBtn.addEventListener('pointerdown', onMouseDown);
+        $incBtn.addEventListener('pointerup', onMouseUp);
+        $incBtn.addEventListener('contextmenu', onContextMenu);
 
         return $wrapper;
     }
@@ -261,7 +306,10 @@ export class SettingElement {
         const method = SettingElement.#METHOD_MAP[type];
         // @ts-ignore
         const $control = method(...Array.from(arguments).slice(1)) as HTMLElement;
-        $control.id = `bx_setting_${key}`;
+
+        if (type !== SettingElementType.NUMBER_STEPPER) {
+            $control.id = `bx_setting_${key}`;
+        }
 
         // Add "name" property to "select" elements
         if (type === SettingElementType.OPTIONS || type === SettingElementType.MULTIPLE_OPTIONS) {

src/utils/titles-info.ts

@@ -1,24 +0,0 @@
-import { STATES } from "./global";
-import { UserAgent } from "./user-agent";
-
-
-export class PreloadedState {
-    static override() {
-        Object.defineProperty(window, '__PRELOADED_STATE__', {
-            configurable: true,
-            get: () => {
-                // Override User-Agent
-                const userAgent = UserAgent.spoof();
-                if (userAgent) {
-                    (this as any)._state.appContext.requestInfo.userAgent = userAgent;
-                }
-
-                return (this as any)._state;
-            },
-            set: state => {
-                (this as any)._state = state;
-                STATES.appContext = structuredClone(state.appContext);
-            }
-        });
-    }
-}

src/utils/toast.ts

@@ -1,7 +1,8 @@
-import { CE } from "./html";
+import { CE } from "@utils/html";
 
 type ToastOptions = {
     instant?: boolean;
+    html?: boolean;
 }
 
 export class Toast {
@@ -14,7 +15,7 @@ export class Toast {
     static #timeout?: number | null;
     static #DURATION = 3000;
 
-    static show(msg: string, status?: string, options: Partial<ToastOptions>={}) {
+    static show(msg: string, status?: string, options: Partial<ToastOptions> = {}) {
         options = options || {};
 
         const args = Array.from(arguments) as [string, string, ToastOptions];
@@ -40,9 +41,13 @@ export class Toast {
         Toast.#timeout = window.setTimeout(Toast.#hide, Toast.#DURATION);
 
         // Get values from item
-        const [msg, status, _] = Toast.#stack.shift()!;
+        const [msg, status, options] = Toast.#stack.shift()!;
 
-        Toast.#$msg.textContent = msg;
+        if (options && options.html) {
+            Toast.#$msg.innerHTML = msg;
+        } else {
+            Toast.#$msg.textContent = msg;
+        }
 
         if (status) {
             Toast.#$status.classList.remove('bx-gone');

src/utils/user-agent.ts

@@ -1,16 +1,21 @@
-import { PrefKey, getPref } from "./preferences";
+type UserAgentConfig = {
+    profile: UserAgentProfile,
+    custom?: string,
+};
 
 export enum UserAgentProfile {
-    EDGE_WINDOWS = 'edge-windows',
-    SAFARI_MACOS = 'safari-macos',
+    WINDOWS_EDGE = 'windows-edge',
+    MACOS_SAFARI = 'macos-safari',
+    SMARTTV_GENERIC = 'smarttv-generic',
     SMARTTV_TIZEN = 'smarttv-tizen',
-    KIWI_V123 = 'kiwi-v123',
+    VR_OCULUS = 'vr-oculus',
+    ANDROID_KIWI_V123 = 'android-kiwi-v123',
     DEFAULT = 'default',
     CUSTOM = 'custom',
 }
 
 let CHROMIUM_VERSION = '123.0.0.0';
-if (!!(window as any).chrome) {
+if (!!(window as any).chrome || window.navigator.userAgent.includes('Chrome')) {
     // Get Chromium version in the original User-Agent value
     const match = window.navigator.userAgent.match(/\s(?:Chrome|Edg)\/([\d\.]+)/);
     if (match) {
@@ -18,16 +23,41 @@ if (!!(window as any).chrome) {
     }
 }
 
-// Repace Chromium version
-let EDGE_USER_AGENT = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/[[VERSION]] Safari/537.36 Edg/[[VERSION]]';
-EDGE_USER_AGENT = EDGE_USER_AGENT.replaceAll('[[VERSION]]', CHROMIUM_VERSION);
-
 export class UserAgent {
-    static #USER_AGENTS = {
-        [UserAgentProfile.EDGE_WINDOWS]: EDGE_USER_AGENT,
-        [UserAgentProfile.SAFARI_MACOS]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1',
-        [UserAgentProfile.SMARTTV_TIZEN]: 'Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) 94.0.4606.31/7.0 TV Safari/537.36',
-        [UserAgentProfile.KIWI_V123]: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.6312.118 Mobile Safari/537.36',
+    static readonly STORAGE_KEY = 'better_xcloud_user_agent';
+    static #config: UserAgentConfig;
+
+    static #USER_AGENTS: PartialRecord<UserAgentProfile, string> = {
+        [UserAgentProfile.WINDOWS_EDGE]: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/${CHROMIUM_VERSION} Safari/537.36 Edg/${CHROMIUM_VERSION}`,
+        [UserAgentProfile.MACOS_SAFARI]: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5.2 Safari/605.1.1',
+        [UserAgentProfile.SMARTTV_GENERIC]: window.navigator.userAgent + ' SmartTV',
+        [UserAgentProfile.SMARTTV_TIZEN]: `Mozilla/5.0 (SMART-TV; LINUX; Tizen 7.0) AppleWebKit/537.36 (KHTML, like Gecko) ${CHROMIUM_VERSION}/7.0 TV Safari/537.36`,
+        [UserAgentProfile.VR_OCULUS]: window.navigator.userAgent + ' OculusBrowser VR',
+        [UserAgentProfile.ANDROID_KIWI_V123]: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.6312.118 Mobile Safari/537.36',
+    }
+
+    static init() {
+        UserAgent.#config = JSON.parse(window.localStorage.getItem(UserAgent.STORAGE_KEY)  || '{}') as UserAgentConfig;
+        if (!UserAgent.#config.profile) {
+            UserAgent.#config.profile = UserAgentProfile.DEFAULT;
+        }
+
+        if (!UserAgent.#config.custom) {
+            UserAgent.#config.custom = '';
+        }
+
+        UserAgent.spoof();
+    }
+
+    static updateStorage(profile: UserAgentProfile, custom?: string) {
+        const clonedConfig = structuredClone(UserAgent.#config);
+        clonedConfig.profile = profile;
+
+        if (typeof custom !== 'undefined') {
+            clonedConfig.custom = custom;
+        }
+
+        window.localStorage.setItem(UserAgent.STORAGE_KEY, JSON.stringify(clonedConfig));
     }
 
     static getDefault(): string {
@@ -35,16 +65,22 @@ export class UserAgent {
     }
 
     static get(profile: UserAgentProfile): string {
-        const defaultUserAgent = UserAgent.getDefault();
-        if (profile === UserAgentProfile.CUSTOM) {
-            return getPref(PrefKey.USER_AGENT_CUSTOM);
-        }
+        const defaultUserAgent = window.navigator.userAgent;
 
-        return (UserAgent.#USER_AGENTS as any)[profile] || defaultUserAgent;
+        switch (profile) {
+            case UserAgentProfile.DEFAULT:
+                return defaultUserAgent;
+
+            case UserAgentProfile.CUSTOM:
+                return UserAgent.#config.custom || defaultUserAgent;
+
+            default:
+                return UserAgent.#USER_AGENTS[profile] || defaultUserAgent;
+        }
     }
 
     static isSafari(mobile=false): boolean {
-        const userAgent = (UserAgent.getDefault() || '').toLowerCase();
+        const userAgent = UserAgent.getDefault().toLowerCase();
         let result = userAgent.includes('safari') && !userAgent.includes('chrom');
 
         if (result && mobile) {
@@ -55,21 +91,17 @@ export class UserAgent {
     }
 
     static isMobile(): boolean {
-        const userAgent = (UserAgent.getDefault() || '').toLowerCase();
+        const userAgent = UserAgent.getDefault().toLowerCase();
         return /iphone|ipad|android/.test(userAgent);
     }
 
     static spoof() {
-        let newUserAgent;
-
-        const profile = getPref(PrefKey.USER_AGENT_PROFILE);
+        const profile = UserAgent.#config.profile;
         if (profile === UserAgentProfile.DEFAULT) {
             return;
         }
 
-        if (!newUserAgent) {
-            newUserAgent = UserAgent.get(profile);
-        }
+        const newUserAgent = UserAgent.get(profile);
 
         // Clear data of navigator.userAgentData, force xCloud to detect browser based on navigator.userAgent
         (window.navigator as any).orgUserAgentData = (window.navigator as any).userAgentData;
@@ -80,7 +112,5 @@ export class UserAgent {
         Object.defineProperty(window.navigator, 'userAgent', {
             value: newUserAgent,
         });
-
-        return newUserAgent;
     }
 }

src/utils/utils.ts

@@ -1,7 +1,11 @@
-import { PrefKey, getPref, setPref } from "./preferences";
-import { SCRIPT_VERSION } from "./global";
-import { UserAgent } from "./user-agent";
+import { PrefKey, getPref, setPref } from "@utils/preferences";
+import { AppInterface, SCRIPT_VERSION } from "@utils/global";
+import { UserAgent } from "@utils/user-agent";
+import { Translations } from "./translation";
 
+/**
+ * Check for update
+ */
 export function checkForUpdate() {
     const CHECK_INTERVAL_SECONDS = 2 * 3600; // check every 2 hours
 
@@ -22,9 +26,15 @@ export function checkForUpdate() {
             setPref(PrefKey.LATEST_VERSION, json.tag_name.substring(1));
             setPref(PrefKey.CURRENT_VERSION, SCRIPT_VERSION);
         });
+
+    // Update translations
+    Translations.updateTranslations(currentVersion === SCRIPT_VERSION);
 }
 
 
+/**
+ * Disable PWA requirement on Safari
+ */
 export function disablePwa() {
     const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
     if (!userAgent) {
@@ -32,10 +42,51 @@ export function disablePwa() {
     }
 
     // Check if it's Safari on mobile
-    if (UserAgent.isSafari(true)) {
+    if (!!AppInterface || UserAgent.isSafari(true)) {
         // Disable the PWA prompt
         Object.defineProperty(window.navigator, 'standalone', {
             value: true,
         });
     }
 }
+
+
+/**
+ * Calculate hash code from a string
+ * @see http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/
+ */
+export function hashCode(str: string): number {
+    let hash = 0;
+    for (let i = 0, len = str.length; i < len; i++) {
+        const chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32-bit integer
+    }
+
+    return hash;
+}
+
+
+export function renderString(str: string, obj: any){
+    return str.replace(/\$\{.+?\}/g, match => {
+        const key = match.substring(2, match.length - 1);
+        if (key in obj) {
+            return obj[key];
+        }
+
+        return match;
+    });
+}
+
+
+export function ceilToNearest(value: number, interval: number): number {
+    return Math.ceil(value / interval) * interval;
+}
+
+export function floorToNearest(value: number, interval: number): number {
+    return Math.floor(value / interval) * interval;
+}
+
+export function roundToNearest(value: number, interval: number): number {
+    return Math.round(value / interval) * interval;
+}

tsconfig.json

@@ -7,15 +7,23 @@
     "dist"
   ],
   "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["./*"],
+      "@assets/*": ["./assets/*"],
+      "@macros/*": ["./macros/*"],
+      "@modules/*": ["./modules/*"],
+      "@utils/*": ["./utils/*"],
+    },
     // Enable latest features
     "lib": ["ESNext", "DOM"],
     "target": "ESNext",
     "module": "ESNext",
     "moduleDetection": "force",
-    "allowJs": true,
+    "allowJs": false,
 
     // Bundler mode
-    "moduleResolution": "bundler",
+    "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "noEmit": true,