Bump version to 4.3.0

Update better-xcloud.user.js
Misc
2025-06-29 10:51:44 +02:00 · 2024-05-12 22:10:54 +07:00 · 2024-05-12 21:50:36 +07:00 · 2024-05-12 21:50:18 +07:00 · 2024-05-12 21:49:54 +07:00 · 2024-05-12 21:48:58 +07:00
51 changed files with 3779 additions and 2015 deletions
--- a/dist/better-xcloud.meta.js
+++ b/dist/better-xcloud.meta.js
@ -1,5 +1,5 @@
 // ==UserScript==
 // @name         Better xCloud
 // @namespace    https://github.com/redphx
-// @version      4.1.0
+// @version      4.3.0
 // ==/UserScript==
--- a/dist/better-xcloud.user.js
+++ b/dist/better-xcloud.user.js
--- a/src/assets/css/game-bar.styl
+++ b/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;
+        }
+    }
+}
--- a/src/assets/css/number-stepper.styl
+++ b/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;
    }
--- a/src/assets/css/root.styl
+++ b/src/assets/css/root.styl
@ -27,9 +27,9 @@
    --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 {
--- a/src/assets/css/stream-actions.styl
+++ b/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;
-    }
-}
--- a/src/assets/css/stream-settings.styl
+++ b/src/assets/css/stream-settings.styl
@ -86,13 +86,6 @@
            white-space: nowrap;
        }
    }
-
-    input[type="range"] {
-        display: block;
-        margin: 12px auto 2px;
-        width: 180px;
-        color: #959595 !important;
-    }
 }


--- a/src/assets/css/stream.styl
+++ b/src/assets/css/stream.styl
@ -7,3 +7,38 @@ 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].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);
+}
--- a/src/assets/css/styles.styl
+++ b/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';
--- a/src/assets/css/toast.styl
+++ b/src/assets/css/toast.styl
@ -23,6 +23,7 @@

    &.bx-hide {
        opacity: 0;
+        pointer-events: none;
    }
 }

--- a/src/assets/svg/camera.svg
+++ b/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>
--- a/src/assets/svg/caret-left.svg
+++ b/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>
--- a/src/assets/svg/caret-right.svg
+++ b/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>
--- a/src/assets/svg/microphone-slash.svg
+++ b/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>
--- a/src/assets/svg/microphone.svg
+++ b/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>
--- a/src/assets/svg/refresh.svg
+++ b/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>
--- a/src/assets/svg/touch-control-disable.svg
+++ b/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>
--- a/src/assets/svg/touch-control-enable.svg
+++ b/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>
--- a/src/index.ts
+++ b/src/index.ts
@ -11,7 +11,7 @@ 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 { 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";
@ -22,11 +22,14 @@ 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 { overridePreloadState } from "@utils/preload-state";
+import { patchAudioContext, patchCanvasContext, patchMeControl, patchRtcCodecs, patchRtcPeerConnection, patchVideoApi } from "@utils/monkey-patches";
 import { 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')) {
@ -123,9 +126,7 @@ window.addEventListener(BxEvent.STREAM_LOADING, e => {
    }

    // Setup UI
-    setupBxUi();
-
-
+    setupStreamUi();
 });

 // Setup loading screen
@ -143,37 +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.classList.remove('bx-gone');
-        $btn.style.display = 'block';
-
-        if (PREF_SCREENSHOT_BUTTON_POSITION === 'bottom-right') {
-            $btn.style.right = '0';
-        } else {
-            $btn.style.left = '0';
-        }
-    }
-
-    const $touchControllerBar = document.getElementById('bx-touch-controller-bar');
-    $touchControllerBar && $touchControllerBar.classList.remove('bx-gone');
 });

 window.addEventListener(BxEvent.STREAM_ERROR_PAGE, e => {
@ -186,6 +172,8 @@ 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();
@ -199,13 +187,9 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
    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();
 });


@ -215,12 +199,13 @@ function main() {
    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();

@ -230,7 +215,8 @@ 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();
--- a/src/modules/game-bar/action-base.ts
+++ b/src/modules/game-bar/action-base.ts
@ -0,0 +1,6 @@
+export abstract class BaseGameBarAction {
+    constructor() {}
+    reset() {}
+
+    abstract render(): HTMLElement;
+}
--- a/src/modules/game-bar/action-microphone.ts
+++ b/src/modules/game-bar/action-microphone.ts
@ -0,0 +1,78 @@
+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";
+
+enum MicrophoneState {
+    REQUESTED = 'Requested',
+    ENABLED = 'Enabled',
+    MUTED = 'Muted',
+    NOT_ALLOWED = 'NotAllowed',
+    NOT_FOUND = 'NotFound',
+}
+
+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 state = this.$content.getAttribute('data-enabled');
+                const enableMic = state === 'true' ? false : true;
+
+                try {
+                    window.BX_EXPOSED.streamSession.tryEnableChatAsync(enableMic);
+                    this.$content.setAttribute('data-enabled', enableMic.toString());
+                } catch (e) {
+                    console.log(e);
+                }
+            };
+
+        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');
+    }
+}
--- a/src/modules/game-bar/action-screenshot.ts
+++ b/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;
+    }
+}
--- a/src/modules/game-bar/action-touch-control.ts
+++ b/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');
+    }
+}
--- a/src/modules/game-bar/game-bar.ts
+++ b/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();
+        }
+    }
+}
--- a/src/modules/mkb/mkb-handler.ts
+++ b/src/modules/mkb/mkb-handler.ts
@ -393,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'})),
                ),
            );

--- a/src/modules/patcher.ts
+++ b/src/modules/patcher.ts
@ -3,7 +3,8 @@ import { BX_FLAGS } from "@utils/bx-flags";
 import { getPref, PrefKey } from "@utils/preferences";
 import { VibrationManager } from "@modules/vibration-manager";
 import { BxLogger } from "@utils/bx-logger";
-import { hashCode } from "@/utils/utils";
+import { hashCode } from "@utils/utils";
+import { BxEvent } from "@/utils/bx-event";

 type PatchArray = (keyof typeof PATCHES)[];

@ -59,22 +60,25 @@ const PATCHES = {

    // Disable IndexDB logging
    disableIndexDbLogging(str: string) {
-        const text = 'async addLog(e,t=1e4){';
+        const text = ',this.logsDb=new';
        if (!str.includes(text)) {
            return false;
        }

-        return str.replace(text, text + 'return;');
+        // Replace log() with an empty function
+        let newCode = ',this.log=()=>{}';
+        return str.replace(text, newCode + text);
    },

-    // Set TV layout
-    tvLayout(str: string) {
+    // Set custom website layout
+    websiteLayout(str: string) {
        const text = '?"tv":"default"';
        if (!str.includes(text)) {
            return false;
        }

-        return str.replace(text, '?"tv":"tv"');
+        const layout = getPref(PrefKey.UI_LAYOUT) === 'tv' ? 'tv' : 'default';
+        return str.replace(text, `?"${layout}":"${layout}"`);
    },

    // Replace "/direct-connect" with "/play"
@ -282,7 +286,13 @@ if (window.BX_VIBRATION_INTENSITY && window.BX_VIBRATION_INTENSITY < 1) {
            return false;
        }

-        str = str.replace(text, 'window.BX_EXPOSED["touch_layout_manager"] = this,' + text);
+        const newCode = `
+true;
+window.BX_EXPOSED["touchLayoutManager"] = this;
+window.dispatchEvent(new Event("${BxEvent.TOUCH_LAYOUT_MANAGER_READY}"));
+`;
+
+        str = str.replace(text, newCode + text);
        return str;
    },

@ -458,6 +468,98 @@ BxLogger.info('patchRemotePlayMkb', ${configsVar});
        return str;

    },
+
+    patchAudioMediaStream(str: string) {
+        const text = '.srcObject=this.audioMediaStream,';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `window.BX_EXPOSED.setupGainNode(arguments[1], this.audioMediaStream),`;
+
+        str = str.replace(text, text + newCode);
+        return str;
+    },
+
+    patchCombinedAudioVideoMediaStream(str: string) {
+        const text = '.srcObject=this.combinedAudioVideoStream';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `,window.BX_EXPOSED.setupGainNode(arguments[0], this.combinedAudioVideoStream)`;
+        str = str.replace(text, text + newCode);
+        return str;
+    },
+
+    patchTouchControlDefaultOpacity(str: string) {
+        const text = 'opacityMultiplier:1';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const opacity = (getPref(PrefKey.STREAM_TOUCH_CONTROLLER_DEFAULT_OPACITY) / 100).toFixed(1);
+        const newCode = `opacityMultiplier: ${opacity}`;
+        str = str.replace(text, newCode);
+        return str;
+    },
+
+    patchShowSensorControls(str: string) {
+        const text = '{shouldShowSensorControls:';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `{shouldShowSensorControls: (window.BX_EXPOSED && window.BX_EXPOSED.shouldShowSensorControls) ||`;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+
+    /*
+    exposeEventTarget(str: string) {
+        const text ='this._eventTarget=new EventTarget';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `
+window.BX_EXPOSED.eventTarget = ${text},
+window.dispatchEvent(new Event('${BxEvent.STREAM_EVENT_TARGET_READY}'))
+`;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
+    //*/
+
+    // Class with: connectAsync(), doConnectAsync(), setPlayClient()
+    exposeStreamSession(str: string) {
+        const text =',this._connectionType=';
+        if (!str.includes(text)) {
+            return false;
+        }
+
+        const newCode = `;
+window.BX_EXPOSED.streamSession = this;
+
+const orgSetMicrophoneState = this.setMicrophoneState.bind(this);
+this.setMicrophoneState = state => {
+    orgSetMicrophoneState(state);
+
+    const evt = new Event('${BxEvent.MICROPHONE_STATE_CHANGED}');
+    evt.microphoneState = state;
+
+    window.dispatchEvent(evt);
+};
+
+window.dispatchEvent(new Event('${BxEvent.STREAM_SESSION_READY}'))
+
+true` + text;
+
+        str = str.replace(text, newCode);
+        return str;
+    },
 };

 let PATCH_ORDERS: PatchArray = [
@ -465,7 +567,9 @@ let PATCH_ORDERS: PatchArray = [
    'overrideSettings',
    'broadcastPollingMode',

-    getPref(PrefKey.UI_LAYOUT) === 'tv' && 'tvLayout',
+    'exposeStreamSession',
+
+    getPref(PrefKey.UI_LAYOUT) !== 'default' && 'websiteLayout',
    getPref(PrefKey.LOCAL_CO_OP_ENABLED) && 'supportLocalCoOp',
    getPref(PrefKey.GAME_FORTNITE_FORCE_CONSOLE) && 'forceFortniteConsole',

@ -500,8 +604,18 @@ let PLAYING_PATCH_ORDERS: PatchArray = [
    'patchStreamHud',
    'playVibration',

+    // 'exposeEventTarget',
+
+    // Patch volume control for normal stream
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && !getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchAudioMediaStream',
+    // Patch volume control for combined audio+video stream
+    getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && getPref(PrefKey.STREAM_COMBINE_SOURCES) && 'patchCombinedAudioVideoMediaStream',
+
+
+    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',

    BX_FLAGS.EnableXcloudLogging && 'enableConsoleLogging',

@ -520,8 +634,14 @@ const ALL_PATCHES = [...PATCH_ORDERS, ...PLAYING_PATCH_ORDERS];
 export class Patcher {
    static #patchFunctionBind() {
        const nativeBind = Function.prototype.bind;
-        Function.prototype.bind = function () {
+        Function.prototype.bind = function() {
            let valid = false;
+
+            // Looking for these criteria:
+            // - Variable name <= 2 characters
+            // - Has 2 params:
+            //     - The first one is null
+            //     - The second one is either 0 or a function
            if (this.name.length <= 2 && arguments.length === 2 && arguments[0] === null) {
                if (arguments[1] === 0 || (typeof arguments[1] === 'function')) {
                    valid = true;
@ -533,6 +653,8 @@ export class Patcher {
                return nativeBind.apply(this, arguments);
            }

+            PatcherCache.init();
+
            if (typeof arguments[1] === 'function') {
                BxLogger.info(LOG_TAG, 'Restored Function.prototype.bind()');
                Function.prototype.bind = nativeBind;
@ -549,23 +671,23 @@ export class Patcher {
        };
    }

-    static length() { return PATCH_ORDERS.length; };
-
    static patch(item: [[number], { [key: string]: () => {} }]) {
+        // !!! Use "caches" as variable name will break touch controller???
        // console.log('patch', '-----');
        let patchesToCheck: PatchArray;
-        let appliedPatches;
-        const caches: { [key: string]: string[] } = {};
+        let appliedPatches: PatchArray;
+
+        const patchesMap: Record<string, PatchArray> = {};

        for (let id in item[1]) {
            appliedPatches = [];

            const cachedPatches = PatcherCache.getPatches(id);
            if (cachedPatches) {
-                patchesToCheck = cachedPatches;
+                patchesToCheck = cachedPatches.slice(0);
                patchesToCheck.push(...PATCH_ORDERS);
            } else {
-                patchesToCheck = PATCH_ORDERS;
+                patchesToCheck = PATCH_ORDERS.slice(0);
            }

            // Empty patch list
@ -573,20 +695,21 @@ export class Patcher {
                continue;
            }

-            // console.log(patchesToCheck);
            const func = item[1][id];
            let str = func.toString();

-            // console.log(id, str);
-
-            for (let groupIndex = 0; groupIndex < patchesToCheck.length; groupIndex++) {
-                const patchName = patchesToCheck[groupIndex];
-                let modified = false;
+            let modified = false;

+            for (let patchIndex = 0; patchIndex < patchesToCheck.length; patchIndex++) {
+                const patchName = patchesToCheck[patchIndex];
                if (appliedPatches.indexOf(patchName) > -1) {
                    continue;
                }

+                if (!PATCHES[patchName]) {
+                    continue;
+                }
+
                // Check function against patch
                const patchedStr = PATCHES[patchName].call(null, str);

@ -598,28 +721,28 @@ export class Patcher {
                modified = true;
                str = patchedStr;

-                BxLogger.info(LOG_TAG, `Applied "${patchName}" patch`);
+                BxLogger.info(LOG_TAG, `✅ ${patchName}`);
                appliedPatches.push(patchName);

                // Remove patch
-                patchesToCheck.splice(groupIndex, 1);
-                groupIndex--;
+                patchesToCheck.splice(patchIndex, 1);
+                patchIndex--;
                PATCH_ORDERS = PATCH_ORDERS.filter(item => item != patchName);
+            }

-                // Apply patched functions
-                if (modified) {
-                    item[1][id] = eval(str);
-                }
+            // Apply patched functions
+            if (modified) {
+                item[1][id] = eval(str);
            }

            // Save to cache
            if (appliedPatches.length) {
-                caches[id] = appliedPatches;
+                patchesMap[id] = appliedPatches;
            }
        }

-        if (Object.keys(caches).length) {
-            PatcherCache.saveToCache(caches);
+        if (Object.keys(patchesMap).length) {
+            PatcherCache.saveToCache(patchesMap);
        }
    }

@ -628,12 +751,14 @@ export class Patcher {
    }
 }

-class PatcherCache {
+export class PatcherCache {
    static #KEY_CACHE = 'better_xcloud_patches_cache';
    static #KEY_SIGNATURE = 'better_xcloud_patches_cache_signature';

    static #CACHE: any;

+    static #isInitialized = false;
+
    /**
     * Get patch's signature
     */
@ -647,18 +772,22 @@ class PatcherCache {
        return sig;
    }

+    static clear() {
+        // Clear cache
+        window.localStorage.removeItem(PatcherCache.#KEY_CACHE);
+        PatcherCache.#CACHE = {};
+    }
+
    static checkSignature() {
        const storedSig = window.localStorage.getItem(PatcherCache.#KEY_SIGNATURE) || 0;
        const currentSig = PatcherCache.#getSignature();

        if (currentSig !== parseInt(storedSig as string)) {
-            BxLogger.warning(LOG_TAG, 'Signature changed');
-
-            // Clear cache
-            window.localStorage.setItem(PatcherCache.#KEY_CACHE, '{}');
-
            // Save new signature
+            BxLogger.warning(LOG_TAG, 'Signature changed');
            window.localStorage.setItem(PatcherCache.#KEY_SIGNATURE, currentSig.toString());
+
+            PatcherCache.clear();
        } else {
            BxLogger.info(LOG_TAG, 'Signature unchanged');
        }
@ -682,7 +811,7 @@ class PatcherCache {
        return PatcherCache.#CACHE[id];
    }

-    static saveToCache(subCache: { [key: string]: string[] }) {
+    static saveToCache(subCache: Record<string, PatchArray>) {
        for (const id in subCache) {
            const patchNames = subCache[id];

@ -703,6 +832,13 @@ class PatcherCache {
    }

    static init() {
+        if (PatcherCache.#isInitialized) {
+            return;
+        }
+        PatcherCache.#isInitialized = true;
+
+        PatcherCache.checkSignature();
+
        // Read cache from storage
        PatcherCache.#CACHE = JSON.parse(window.localStorage.getItem(PatcherCache.#KEY_CACHE) || '{}');
        BxLogger.info(LOG_TAG, PatcherCache.#CACHE);
@ -721,11 +857,3 @@ class PatcherCache {
        BxLogger.info(LOG_TAG, PLAYING_PATCH_ORDERS.slice(0));
    }
 }
-
-document.addEventListener('readystatechange', e => {
-    if (document.readyState === 'interactive') {
-        PatcherCache.checkSignature();
-    }
-});
-
-PatcherCache.init();
--- a/src/modules/screenshot.ts
+++ b/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);
-}
--- a/src/modules/stream/stream-ui.ts
+++ b/src/modules/stream/stream-ui.ts
@ -8,65 +8,6 @@ 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: typeof BxIcon) {
    const $container = $orgButton.cloneNode(true) as HTMLElement;
    let timeout: number | null;
@ -94,7 +35,7 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: t
        }
    };

-    if (STATES.hasTouchSupport) {
+    if (STATES.browserHasTouchSupport) {
        $container.addEventListener('transitionstart', onTransitionStart);
        $container.addEventListener('transitionend', onTransitionEnd);
    }
@ -179,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;
                }
@ -192,25 +138,39 @@ 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 Quick bar when closing HUD
                    $btnCloseHud && $btnCloseHud.addEventListener('click', e => {
                        $quickBar.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]');
@ -220,7 +180,7 @@ export function injectStreamMenuButtons() {
                    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');
                }

--- a/src/modules/touch-controller.ts
+++ b/src/modules/touch-controller.ts
@ -1,5 +1,5 @@
 import { STATES } from "@utils/global";
-import { CE } from "@utils/html";
+import { escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS } from "@utils/bx-flags";
@ -12,7 +12,11 @@ const LOG_TAG = 'TouchController';

 export class TouchController {
    static readonly #EVENT_SHOW_DEFAULT_CONTROLLER = new MessageEvent('message', {
-            data: '{"content":"{\\"layoutId\\":\\"\\"}","target":"/streaming/touchcontrols/showlayoutv2","type":"Message"}',
+            data: JSON.stringify({
+                content: '{"layoutId":""}',
+                target: '/streaming/touchcontrols/showlayoutv2',
+                type: 'Message',
+            }),
            origin: 'better-xcloud',
        });

@ -23,17 +27,17 @@ export class TouchController {
        });
    */

-    static #$bar: HTMLElement;
    static #$style: HTMLStyleElement;

    static #enable = false;
-    static #showing = false;
    static #dataChannel: RTCDataChannel | null;

    static #customLayouts: {[index: string]: any} = {};
    static #baseCustomLayouts: {[index: string]: any} = {};
    static #currentLayoutId: string;

+    static #customList: string[];
+
    static enable() {
        TouchController.#enable = true;
    }
@ -48,37 +52,28 @@ export class TouchController {

    static #showDefault() {
        TouchController.#dispatchMessage(TouchController.#EVENT_SHOW_DEFAULT_CONTROLLER);
-        TouchController.#showing = true;
    }

    static #show() {
        document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.remove('bx-offscreen');
-        TouchController.#showing = true;
    }

    static #hide() {
        document.querySelector('#BabylonCanvasContainer-main')?.parentElement?.classList.add('bx-offscreen');
-        TouchController.#showing = false;
    }

-    static #toggleVisibility() {
+    static toggleVisibility(status: boolean) {
        if (!TouchController.#dataChannel) {
            return;
        }

-        TouchController.#showing ? TouchController.#hide() : TouchController.#show();
-    }
-
-    static #toggleBar(value: boolean) {
-        TouchController.#$bar && TouchController.#$bar.setAttribute('data-showing', value.toString());
+        status ? TouchController.#hide() : TouchController.#show();
    }

    static reset() {
        TouchController.#enable = false;
-        TouchController.#showing = false;
        TouchController.#dataChannel = null;

-        TouchController.#$bar && TouchController.#$bar.removeAttribute('data-showing');
        TouchController.#$style && (TouchController.#$style.textContent = '');
    }

@ -103,7 +98,7 @@ export class TouchController {
        retries = retries || 1;
        if (retries > 2) {
            TouchController.#customLayouts[xboxTitleId] = null;
-            // Wait for BX_EXPOSED.touch_layout_manager
+            // Wait for BX_EXPOSED.touchLayoutManager
            window.setTimeout(() => TouchController.#dispatchLayouts(null), 1000);
            return;
        }
@ -139,7 +134,7 @@ export class TouchController {
            json.layouts = layouts;
            TouchController.#customLayouts[xboxTitleId] = json;

-            // Wait for BX_EXPOSED.touch_layout_manager
+            // Wait for BX_EXPOSED.touchLayoutManager
            window.setTimeout(() => TouchController.#dispatchLayouts(json), 1000);
        } catch (e) {
            // Retry
@ -148,7 +143,16 @@ export class TouchController {
    }

    static loadCustomLayout(xboxTitleId: string, layoutId: string, delay: number=0) {
-        if (!window.BX_EXPOSED.touch_layout_manager) {
+        // TODO: fix this
+        if (!window.BX_EXPOSED.touchLayoutManager) {
+            const listener = (e: Event) => {
+                window.removeEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
+                if (TouchController.#enable) {
+                    TouchController.loadCustomLayout(xboxTitleId, layoutId, 0);
+                }
+            };
+            window.addEventListener(BxEvent.TOUCH_LAYOUT_MANAGER_READY, listener);
+
            return;
        }

@ -168,69 +172,71 @@ export class TouchController {
        }

        // Show a toast with layout's name
-        layoutChanged && Toast.show(t('touch-control-layout'), layout.name);
+        let msg: string;
+        let html = false;
+        if (layout.author) {
+            const author = `<b>${escapeHtml(layout.author)}</b>`;
+            msg = t('touch-control-layout-by', {name: author});
+            html = true;
+        } else {
+            msg = t('touch-control-layout');
+        }
+
+        layoutChanged && Toast.show(msg, layout.name, {html: html});

        window.setTimeout(() => {
-            window.BX_EXPOSED.touch_layout_manager.changeLayoutForScope({
+            // Show gyroscope control in the "More options" dialog if this layout has gyroscope
+            window.BX_EXPOSED.shouldShowSensorControls = JSON.stringify(layout).includes('gyroscope');
+
+            window.BX_EXPOSED.touchLayoutManager.changeLayoutForScope({
                type: 'showLayout',
                scope: xboxTitleId,
                subscope: 'base',
                layout: {
                    id: 'System.Standard',
                    displayName: 'System',
-                    layoutFile: {
-                        content: layout.content,
-                    },
+                    layoutFile: layout,
                }
            });
        }, delay);
    }

+    static updateCustomList() {
+        const key = 'better_xcloud_custom_touch_layouts';
+        TouchController.#customList = JSON.parse(window.localStorage.getItem(key) || '[]');
+
+        NATIVE_FETCH('https://raw.githubusercontent.com/redphx/better-xcloud/gh-pages/touch-layouts/ids.json')
+            .then(response => response.json())
+            .then(json => {
+                TouchController.#customList = json;
+                window.localStorage.setItem(key, JSON.stringify(json));
+            });
+    }
+
+    static getCustomList(): string[] {
+        return TouchController.#customList;
+    }
+
    static setup() {
        // Function for testing touch control
-        window.BX_EXPOSED.test_touch_control = (content: any) => {
-            const { touch_layout_manager } = window.BX_EXPOSED;
+        (window as any).testTouchLayout = (layout: any) => {
+            const { touchLayoutManager } = window.BX_EXPOSED;

-            touch_layout_manager && touch_layout_manager.changeLayoutForScope({
+            touchLayoutManager && touchLayoutManager.changeLayoutForScope({
                type: 'showLayout',
                scope: '' + STATES.currentStream?.xboxTitleId,
                subscope: 'base',
                layout: {
                    id: 'System.Standard',
                    displayName: 'Custom',
-                    layoutFile: {
-                        content: content,
-                    },
+                    layoutFile: layout,
                },
            });
        };

-        const $fragment = document.createDocumentFragment();
        const $style = document.createElement('style');
-        $fragment.appendChild($style);
+        document.documentElement.appendChild($style);

-        const $bar = CE('div', {'id': 'bx-touch-controller-bar'});
-        $fragment.appendChild($bar);
-
-        document.documentElement.appendChild($fragment);
-
-        // Setup double-tap event
-        let clickTimeout: number | null;
-        $bar.addEventListener('mousedown', (e: MouseEvent) => {
-            clickTimeout && clearTimeout(clickTimeout);
-            if (clickTimeout) {
-                // Double-clicked
-                clickTimeout = null;
-                TouchController.#toggleVisibility();
-                return;
-            }
-
-            clickTimeout = window.setTimeout(() => {
-                clickTimeout = null;
-            }, 400);
-        });
-
-        TouchController.#$bar = $bar;
        TouchController.#$style = $style;

        const PREF_STYLE_STANDARD = getPref(PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD);
@ -289,7 +295,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) {
--- a/src/modules/ui/global-settings.ts
+++ b/src/modules/ui/global-settings.ts
@ -5,6 +5,7 @@ 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 { PatcherCache } from "../patcher";

 const SETTINGS_UI = {
    'Better xCloud': {
@ -26,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,
@ -57,6 +66,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,
        ],
@ -159,6 +169,9 @@ export function setupSettingsUi() {

        $reloadBtnWrapper.classList.remove('bx-gone');

+        // Clear PatcherCache;
+        PatcherCache.clear();
+
        if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
            // Update locale
            refreshCurrentLocale();
@ -211,7 +224,7 @@ export function setupSettingsUi() {
                }
            }

-            let $control;
+            let $control: any;
            let $inpCustomUserAgent: HTMLInputElement;
            let labelAttrs = {};

@ -223,15 +236,20 @@ export function setupSettingsUi() {
                    '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;
@ -244,7 +262,7 @@ export function setupSettingsUi() {
                $control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`});
                $control.name = $control.id;

-                $control.addEventListener('change', e => {
+                $control.addEventListener('change', (e: Event) => {
                    setPref(settingId, (e.target as HTMLSelectElement).value);
                    onChange(e);
                });
--- a/src/modules/ui/ui.ts
+++ b/src/modules/ui/ui.ts
@ -5,11 +5,11 @@ import { UserAgent } from "@utils/user-agent";
 import { BxEvent } from "@utils/bx-event";
 import { MkbRemapper } from "@modules/mkb/mkb-remapper";
 import { getPref, PrefKey, toPrefElement } from "@utils/preferences";
-import { setupScreenshotButton } from "@modules/screenshot";
 import { StreamStats } from "@modules/stream/stream-stats";
 import { TouchController } from "@modules/touch-controller";
 import { t } from "@utils/translation";
 import { VibrationManager } from "@modules/vibration-manager";
+import { Screenshot } from "@/utils/screenshot";


 export function localRedirect(path: string) {
@ -217,7 +217,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);
                                    }

@ -421,7 +428,7 @@ export function updateVideoPlayerCss() {

    // Apply video filters to screenshots
    if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
-        STATES.currentStream.$screenshotCanvas!.getContext('2d')!.filter = filters;
+        Screenshot.updateCanvasFilters(filters);
    }

    const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
@ -461,13 +468,14 @@ div[data-testid="media-container"] {
    $elm.textContent = css;
 }

-export function setupBxUi() {
+export function setupStreamUi() {
    // Prevent initializing multiple times
    if (!document.querySelector('.bx-quick-settings-bar')) {
        window.addEventListener('resize', updateVideoPlayerCss);
        setupQuickSettingsBar();
-        setupScreenshotButton();
        StreamStats.render();
+
+        Screenshot.setup();
    }

    updateVideoPlayerCss();
--- a/src/types/index.d.ts
+++ b/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;
@ -35,6 +39,7 @@ type BxStates = {

        $video: HTMLVideoElement | null;
        $screenshotCanvas: HTMLCanvasElement | null;
+        screenshotCanvasContext: CanvasRenderingContext2D | null;

        peerConnection: RTCPeerConnection;
        audioContext: AudioContext | null;
--- a/src/types/preferences.d.ts
+++ b/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;
--- a/src/utils/bx-event.ts
+++ b/src/utils/bx-event.ts
@ -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,13 @@ 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',
+}
+
+export enum XcloudEvent {
+    MICROPHONE_STATE_CHANGED = 'microphoneStateChanged',
 }

 export namespace BxEvent {
--- a/src/utils/bx-exposed.ts
+++ b/src/utils/bx-exposed.ts
@ -1,3 +1,4 @@
+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";
@ -13,27 +14,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 +37,11 @@ export const BxExposed = {
        // Clone the object since the original is read-only
        titleInfo = structuredClone(titleInfo);

+        let supportedInputTypes = titleInfo.details.supportedInputTypes;
+        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)) {
@ -72,10 +69,9 @@ 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
@ -91,5 +87,26 @@ export const BxExposed = {
        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;
+            });
+        }
+
+        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);
    }
 };
--- a/src/utils/bx-icon.ts
+++ b/src/utils/bx-icon.ts
@ -6,10 +6,20 @@ import iconMouseSettings from "@assets/svg/mouse-settings.svg" with { type: "tex
 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,
@ -23,8 +33,17 @@ export const BxIcon = {
    TRASH: iconTrash,
    CURSOR_TEXT: iconCursorText,
    QUESTION: iconQuestion,
+    REFRESH: iconRefresh,

    REMOTE_PLAY: iconRemotePlay,

-    // 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"/>',
+    // 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;
--- a/src/utils/bx-logger.ts
+++ b/src/utils/bx-logger.ts
@ -20,7 +20,7 @@ export class BxLogger {
    }

    static #log(color: TextColor, tag: string, ...args: any) {
-        console.log('%c' + BxLogger.#PREFIX, 'color:' + color + ';font-weight:bold;', tag, '-', ...args);
+        console.log(`%c${BxLogger.#PREFIX}`, `color:${color};font-weight:bold;`, tag, '//', ...args);
    }
 }

--- a/src/utils/gamepass-gallery.ts
+++ b/src/utils/gamepass-gallery.ts
@ -0,0 +1,4 @@
+export enum GamePassCloudGallery {
+    TOUCH = '9c86f07a-f3e8-45ad-82a0-a1f759597059',
+    ALL = '29a81209-df6f-41fd-a528-2ae6b91f719c',
+}
--- a/src/utils/global.ts
+++ b/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: {},
--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@ -96,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;
--- a/src/utils/monkey-patches.ts
+++ b/src/utils/monkey-patches.ts
@ -1,8 +1,8 @@
 import { BxEvent } from "@utils/bx-event";
 import { getPref, PrefKey } from "@utils/preferences";
 import { STATES } from "@utils/global";
-import { UserAgent } from "@utils/user-agent";
 import { BxLogger } from "@utils/bx-logger";
+import { patchSdpBitrate } from "./sdp";

 export function patchVideoApi() {
    const PREF_SKIP_SPLASH_VIDEO = getPref(PrefKey.SKIP_SPLASH_VIDEO);
@ -97,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() {
@ -104,10 +120,6 @@ export function patchRtcPeerConnection() {
        STATES.currentStream.peerConnection = conn;

        conn.addEventListener('connectionstatechange', e => {
-                if (conn.connectionState === 'connecting') {
-                    STATES.currentStream.audioGainNode = null;
-                }
-
                BxLogger.info('connectionstatechange', conn.connectionState);
            });
        return conn;
@ -115,46 +127,95 @@ export function patchRtcPeerConnection() {
 }

 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]);
    }
 }
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@ -7,6 +7,7 @@ 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";

 export const NATIVE_FETCH = window.fetch;

@ -437,6 +438,9 @@ class XcloudInterceptor {
        overrides.inputConfiguration = overrides.inputConfiguration || {};
        overrides.inputConfiguration.enableVibration = true;

+        overrides.videoConfiguration = overrides.videoConfiguration || {};
+        overrides.videoConfiguration.setCodecPreferences = true;
+
        // Enable touch controller
        if (TouchController.isEnabled()) {
            overrides.inputConfiguration.enableTouchInput = true;
@ -526,6 +530,8 @@ export function interceptHttpRequests() {
        return nativeXhrSend.apply(this, arguments);
    };

+    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;

@ -549,6 +555,33 @@ export function interceptHttpRequests() {
            BxEvent.dispatch(window, BxEvent.STREAM_STARTING);
        }

+        // 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;
--- a/src/utils/preferences.ts
+++ b/src/utils/preferences.ts
@ -3,7 +3,7 @@ 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 { PreferenceSettings } from "@/types/preferences";
+import type { PreferenceSetting, PreferenceSettings } from "@/types/preferences";
 import { STATES } from "@utils/global";

 export enum PrefKey {
@ -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',

@ -45,7 +49,6 @@ export enum PrefKey {
    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',
@ -207,8 +210,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 +228,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 +258,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 +269,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 +316,39 @@ export class Preferences {
            default: false,
        },

+        [PrefKey.BITRATE_VIDEO_MAX]: {
+            type: SettingElementType.NUMBER_STEPPER,
+            label: 'Maximum video bitrate',
+            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,
@ -359,15 +398,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,7 +412,7 @@ 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);
@ -417,6 +454,7 @@ export class Preferences {
            default: 'default',
            options: {
                default: t('default'),
+                normal: t('normal'),
                tv: t('smart-tv'),
            },
        },
@ -436,19 +474,19 @@ 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]: {
            type: SettingElementType.NUMBER_STEPPER,
            default: 0,
@ -509,7 +547,6 @@ export class Preferences {
        [PrefKey.AUDIO_ENABLE_VOLUME_CONTROL]: {
            label: t('enable-volume-control'),
            default: false,
-            experimental: true,
        },
        [PrefKey.AUDIO_VOLUME]: {
            type: SettingElementType.NUMBER_STEPPER,
@ -621,7 +658,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]);
@ -718,7 +755,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 +773,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);
--- a/src/utils/preload-state.ts
+++ b/src/utils/preload-state.ts
@ -0,0 +1,49 @@
+import { STATES } from "@utils/global";
+import { BxLogger } from "./bx-logger";
+import { TouchController } from "@modules/touch-controller";
+import { GamePassCloudGallery } from "./gamepass-gallery";
+
+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);
+                }
+            }
+
+            // @ts-ignore
+            _state = state;
+            STATES.appContext = structuredClone(state.appContext);
+        }
+    });
+}
--- a/src/utils/screenshot.ts
+++ b/src/utils/screenshot.ts
@ -0,0 +1,77 @@
+import { AppInterface, STATES } from "./global";
+import { CE } from "./html";
+
+
+export class Screenshot {
+    static setup() {
+        const currentStream = STATES.currentStream;
+        if (!currentStream.$screenshotCanvas) {
+            currentStream.$screenshotCanvas = CE<HTMLCanvasElement>('canvas', {'class': 'bx-gone'});
+
+            currentStream.screenshotCanvasContext = currentStream.$screenshotCanvas.getContext('2d', {
+                alpha: false,
+                willReadFrequently: false,
+            });
+        }
+        // document.documentElement.appendChild(currentStream.$screenshotCanvas!);
+    }
+
+    static updateCanvasSize(width: number, height: number) {
+        const $canvas = STATES.currentStream.$screenshotCanvas;
+        if ($canvas) {
+            $canvas.width = width;
+            $canvas.height = height;
+        }
+    }
+
+    static updateCanvasFilters(filters: string) {
+        STATES.currentStream.screenshotCanvasContext && (STATES.currentStream.screenshotCanvasContext.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 = currentStream.$screenshotCanvas;
+        if (!$video || !$canvas) {
+            return;
+        }
+
+        $video.parentElement?.addEventListener('animationend', this.onAnimationEnd);
+        $video.parentElement?.classList.add('bx-taking-screenshot');
+
+        const canvasContext = currentStream.screenshotCanvasContext!;
+        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');
+    }
+}
--- a/src/utils/sdp.ts
+++ b/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');
+}
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@ -12,6 +12,8 @@ type NumberStepperParams = {

    ticks?: number;
    exactTicks?: number;
+
+    customTextValue?: (value: any) => string | null;
 }

 export enum SettingElementType {
@ -131,9 +133,24 @@ 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,
+                            $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement,
                            $incBtn = CE('button', {'data-type': 'inc'}, '+') as HTMLButtonElement,
                           );

@ -141,8 +158,7 @@ export class SettingElement {
            $range = CE('input', {'type': 'range', 'min': MIN, 'max': MAX, 'value': value, 'step': STEPS}) as HTMLInputElement;
            $range.addEventListener('input', e => {
                value = parseInt((e.target as HTMLInputElement).value);
-
-                $text.textContent = value + options.suffix;
+                $text.textContent = renderTextValue(value);
                onChange && onChange(e, value);
            });
            $wrapper.appendChild($range);
@ -204,17 +220,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 +242,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;
    }
--- a/src/utils/titles-info.ts
+++ b/src/utils/titles-info.ts
@ -1,24 +0,0 @@
-import { STATES } from "@utils/global";
-import { UserAgent } from "@utils/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);
-            }
-        });
-    }
-}
--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@ -2,6 +2,7 @@ import { CE } from "@utils/html";

 type ToastOptions = {
    instant?: boolean;
+    html?: boolean;
 }

 export class Toast {
@ -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.html) {
+            Toast.#$msg.innerHTML = msg;
+        } else {
+            Toast.#$msg.textContent = msg;
+        }

        if (status) {
            Toast.#$status.classList.remove('bx-gone');
--- a/src/utils/translation.ts
+++ b/src/utils/translation.ts
--- a/src/utils/user-agent.ts
+++ b/src/utils/user-agent.ts
@ -1,16 +1,21 @@
-import { PrefKey, getPref } from "@utils/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;
    }
 }
Author	SHA1	Message	Date
redphx	2ef1d17901	Bump version to 4.3.0	2024-05-12 22:10:54 +07:00
redphx	8334a79f5d	Update better-xcloud.user.js	2024-05-12 21:50:36 +07:00
redphx	a80da85098	Misc	2024-05-12 21:50:18 +07:00
redphx	0ffa6b55b2	Change the max value of video bitrate to 14 to discourage people from using it	2024-05-12 21:49:54 +07:00
redphx	8f8b7c6f22	Update translations	2024-05-12 21:48:58 +07:00
redphx	31804ea8cc	Update better-xcloud.user.js	2024-05-12 19:00:17 +07:00
redphx	99c81cfb90	Change "Default" to "Unlimited" in maximum video bitrate setting	2024-05-12 18:59:50 +07:00
redphx	761e58254a	Update better-xcloud.user.js	2024-05-12 18:06:40 +07:00
redphx	1dee720f77	Add "Maximum video bitrate" option	2024-05-12 18:05:21 +07:00
redphx	c1b41663db	Update better-xcloud.user.js	2024-05-12 15:51:20 +07:00
redphx	5e1c5c5420	Remove "exposeEventTarget" patch	2024-05-12 15:51:13 +07:00
redphx	99a9396d5b	Update better-xcloud.user.js	2024-05-12 15:20:44 +07:00
redphx	bd3f8c9f50	Reorder settings	2024-05-12 15:20:41 +07:00
redphx	5e8db626c5	Update better-xcloud.user.js	2024-05-12 15:19:23 +07:00
redphx	5d9319b831	Remove "experimental" flag from AUDIO_ENABLE_VOLUME_CONTROL	2024-05-12 15:18:15 +07:00
redphx	e867f156e8	Trying to fix custom touch control sometimes not showing	2024-05-12 15:07:18 +07:00
redphx	4068930db7	Fix bug with Game Bar when showing it on the right side	2024-05-12 14:40:15 +07:00
redphx	8a1dff3372	Update better-xcloud.user.js	2024-05-12 12:26:40 +07:00
redphx	41effff226	Show gyroscope settings if the custom layout supports it	2024-05-12 12:26:34 +07:00
redphx	be897848fe	Cache screenshot's canvas context	2024-05-12 11:13:32 +07:00
redphx	453a45a995	Update better-xcloud.user.js	2024-05-12 08:28:26 +07:00
redphx	30e2193fe7	Update caret icons	2024-05-12 08:28:22 +07:00
redphx	f06346457a	Update better-xcloud.user.js	2024-05-12 08:09:05 +07:00
redphx	cec2bdf807	Fix emulated MKB not being disabled on native MKB games (#391 )	2024-05-12 08:07:35 +07:00
redphx	1be9bd8ee1	Add option for Game Bar's position	2024-05-12 08:01:49 +07:00
redphx	84adf9989e	Remove empty translations at the end of arrays	2024-05-12 07:39:33 +07:00
redphx	bc429088ca	Ignore translations that are the same in English	2024-05-12 07:35:42 +07:00
redphx	7d79b12d4d	Update translations	2024-05-12 07:32:54 +07:00
redphx	952af5c274	Update better-xcloud.user.js	2024-05-11 21:23:42 +07:00
redphx	362c5386d1	Add microphone action for Game Bar	2024-05-11 21:15:22 +07:00
redphx	5c9202119b	Update style of the show/hide touch control button	2024-05-11 21:12:14 +07:00
redphx	0092417a6e	Add microphone icons	2024-05-11 20:56:00 +07:00
redphx	328372878e	Update better-xcloud.user.js	2024-05-11 15:45:57 +07:00
redphx	ae37c0660f	Add taking screenshot animation	2024-05-11 15:45:46 +07:00
redphx	e9b0d900b0	Update better-xcloud.user.js	2024-05-11 12:18:47 +07:00
redphx	85eac4be14	Move screenshot functions to a separate file	2024-05-11 12:18:36 +07:00
redphx	40b61b173f	Use singleton in GameBar	2024-05-11 11:48:07 +07:00
redphx	b3033089ed	Fix unexpected behavior with Stream bar when using Quest VR profile	2024-05-11 10:47:29 +07:00
redphx	6b88f73e34	Add setting to enable/disable Game Bar feature	2024-05-11 10:42:30 +07:00
redphx	72579249b1	Update translations	2024-05-11 10:20:11 +07:00
redphx	b866cc95a3	Detect hasTouchSupport based on spoofed User-Agent	2024-05-11 10:09:10 +07:00
redphx	8bee5b2073	Init UserAgent before STATES	2024-05-11 09:39:50 +07:00
redphx	011b75057a	Refactor UserAgent class	2024-05-11 09:35:38 +07:00
redphx	daaaea1f16	Minor fixes	2024-05-11 09:16:01 +07:00
redphx	84182ffe77	Update User-Agent values	2024-05-11 09:13:21 +07:00
redphx	9ce906c0b2	Move User-Agent values to a separate localStorage item	2024-05-11 09:08:08 +07:00
redphx	77f7b647da	Improve ready() in Preferences	2024-05-11 07:58:27 +07:00
redphx	9988a55601	Prevent clicking when hiding game bar & toast	2024-05-10 20:34:54 +07:00
redphx	49af04a3e0	Update better-xcloud.user.js	2024-05-10 18:38:35 +07:00
redphx	b2e932cc4c	Game bar (#392 ) * Fix games with custom touch control sometimes not showing touch icon * Create game-bar with screenshot button * Disable Game bar when opening the Guide * Remove SCREENSHOT_BUTTON_POSITION pref * Make the touch control action functional * Show game bar when the game starts * Fix 720p/High not working (#387) * Update icons * Update game bar's animations * Reset states of Game bar actions before playing * Don't show Touch control action on non-touch-supported devices * Clean up * Update translations * Update actions' texts * Clean up	2024-05-10 18:35:40 +07:00
redphx	b66ca192b2	Bump version to 4.2.0	2024-05-08 17:38:45 +07:00
redphx	660aac4e8c	Update better-xcloud.user.js	2024-05-08 17:18:42 +07:00
redphx	3b1f5155c6	Update translations	2024-05-08 17:18:23 +07:00
redphx	500f6671c6	Rename "touchLayoutManager" and "testTouchLayout"	2024-05-08 17:11:15 +07:00
redphx	26bf14eda6	Show custom touch layout's author name in toast message	2024-05-08 17:04:14 +07:00
redphx	d8fada8f5d	Fix not able to get Chromium version in WebView	2024-05-08 16:48:42 +07:00
redphx	4e8848d2fb	Update better-xcloud.user.js	2024-05-08 08:55:10 +07:00
redphx	8e23ca51de	Remove debuggers	2024-05-08 08:55:05 +07:00
redphx	9ac988e894	Update dist	2024-05-08 08:04:09 +07:00
redphx	c2efbd9c1d	Remove non-cloud games from touch games list	2024-05-08 08:03:58 +07:00
redphx	7eda0b61cc	Update dist	2024-05-07 21:40:28 +07:00
redphx	c948b63b8d	Show touch icon on games with custom layouts	2024-05-07 21:40:12 +07:00
redphx	fc56d486a7	Update dist	2024-05-07 18:03:00 +07:00
redphx	7dacc8f23a	Fix problems when holding NumberStepper's buttons	2024-05-07 18:01:36 +07:00
redphx	2df3bb4611	Add "Default opacity" setting for touch controller	2024-05-07 17:37:49 +07:00
redphx	b9355d5c01	Optimize touch control's canvas, use low-power profile and disable antialiasing	2024-05-07 17:07:15 +07:00
redphx	d1b99705e6	Bump version to 4.1.2	2024-05-05 21:32:41 +07:00
redphx	52896c94ae	Update dist	2024-05-05 18:29:14 +07:00
redphx	cadc7987b7	Update "disableIndexDbLogging" patch	2024-05-05 18:29:04 +07:00
redphx	8fb1787222	Disable telemetry flags in meversion.js	2024-05-05 18:04:20 +07:00
redphx	4231d7e9c6	Update logs	2024-05-05 11:54:59 +07:00
redphx	ba05eab47b	Update dist	2024-05-05 09:37:06 +07:00
redphx	e852b246d3	Rewrite volume control feature	2024-05-05 09:36:53 +07:00
redphx	23fb50cb6f	Update dist	2024-05-04 17:32:17 +07:00
redphx	443bf93c9a	Fix the refresh button not focusable using gamepad	2024-05-04 17:32:08 +07:00
redphx	df2af43c64	Bump version to 4.1.1	2024-05-04 17:01:57 +07:00
redphx	fca3bee6dd	Update dist	2024-05-04 16:20:38 +07:00
redphx	9bf8a2ef66	Add a standalone Refresh stream button (#315 )	2024-05-04 16:20:12 +07:00
redphx	b1df189c7d	Support "styles" param in touch control	2024-05-04 15:33:19 +07:00
redphx	d91fdb798e	Update dist	2024-05-04 15:15:15 +07:00
redphx	a291443d43	Update dist	2024-05-04 15:01:49 +07:00
redphx	8a7be5d523	Add ability to use normal website's layout on TV	2024-05-04 15:00:27 +07:00
redphx	7588f37472	Add "Smart TV" + "Meta Quest VR" User-Agent profiles	2024-05-04 14:52:54 +07:00
redphx	a597d52585	Update dist	2024-05-04 14:34:19 +07:00
redphx	f945a3adde	Move PatcherCache.init() to patchFunctionBind()	2024-05-04 14:34:06 +07:00
redphx	438afe086a	Update dist	2024-05-04 11:23:19 +07:00
redphx	f6ee79770c	Clear PatcherCache when changing settings	2024-05-04 11:22:42 +07:00
redphx	f36c77e727	Fix touch control not showing when using "caches" as variable name	2024-05-04 11:21:18 +07:00