Move User-Agent values to a separate localStorage item

src/index.ts

@@ -28,6 +28,7 @@ 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 { UserAgent } from "./utils/user-agent";
 
 // Handle login page
 if (window.location.pathname.includes('/auth/msa')) {
@@ -187,6 +188,8 @@ window.addEventListener(BxEvent.STREAM_STOPPED, e => {
 
 
 function main() {
+    UserAgent.init();
+
     // Monkey patches
     patchRtcPeerConnection();
     patchRtcCodecs();

src/modules/ui/global-settings.ts

@@ -6,6 +6,7 @@ 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";
+import { profile } from "console";
 
 const SETTINGS_UI = {
     'Better xCloud': {
@@ -215,7 +216,7 @@ export function setupSettingsUi() {
                 }
             }
 
-            let $control;
+            let $control: any;
             let $inpCustomUserAgent: HTMLInputElement;
             let labelAttrs = {};
 
@@ -227,15 +228,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;

src/utils/preferences.ts

@@ -20,7 +20,6 @@ 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',
@@ -450,9 +449,6 @@ export class Preferences {
                 [UserAgentProfile.CUSTOM]: t('custom'),
             },
         },
-        [PrefKey.USER_AGENT_CUSTOM]: {
-            default: '',
-        },
         [PrefKey.VIDEO_CLARITY]: {
             type: SettingElementType.NUMBER_STEPPER,
             default: 0,
@@ -722,7 +718,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;
@@ -741,7 +736,7 @@ export class Preferences {
             currentValue = Preferences.SETTINGS[key].default;
         }
 
-        $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
+        const $control = SettingElement.render(type!, key as string, setting, currentValue, (e: any, value: any) => {
                 this.set(key, value);
                 onChange && onChange(e, value);
             }, params);

src/utils/user-agent.ts

@@ -1,4 +1,7 @@
-import { PrefKey, getPref } from "@utils/preferences";
+type UserAgentConfig = {
+    profile: UserAgentProfile,
+    custom?: string,
+};
 
 export enum UserAgentProfile {
     EDGE_WINDOWS = 'edge-windows',
@@ -21,6 +24,9 @@ if (!!(window as any).chrome || window.navigator.userAgent.includes('Chrome')) {
 }
 
 export class UserAgent {
+    static readonly STORAGE_KEY = 'better_xcloud_user_agent';
+    static #config: UserAgentConfig;
+
     static #USER_AGENTS: PartialRecord<UserAgentProfile, string> = {
         [UserAgentProfile.EDGE_WINDOWS]: `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.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',
@@ -30,6 +36,28 @@ export class UserAgent {
         [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 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 = '';
+        }
+    }
+
+    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 {
         return (window.navigator as any).orgUserAgent || window.navigator.userAgent;
     }
@@ -37,7 +65,7 @@ export class UserAgent {
     static get(profile: UserAgentProfile): string {
         const defaultUserAgent = UserAgent.getDefault();
         if (profile === UserAgentProfile.CUSTOM) {
-            return getPref(PrefKey.USER_AGENT_CUSTOM);
+            return UserAgent.#config.custom || '';
         }
 
         return (UserAgent.#USER_AGENTS as any)[profile] || defaultUserAgent;
@@ -62,7 +90,7 @@ export class UserAgent {
     static spoof() {
         let newUserAgent;
 
-        const profile = getPref(PrefKey.USER_AGENT_PROFILE);
+        const profile = UserAgent.#config.profile;
         if (profile === UserAgentProfile.DEFAULT) {
             return;
         }