Don't render MKB settings on unsupported devices

dist/better-xcloud.lite.user.js

@@ -120,7 +120,7 @@ function deepClone(obj) {
 }
 var SCRIPT_VERSION = "5.8.1-beta", SCRIPT_VARIANT = "lite", AppInterface = window.AppInterface;
 UserAgent.init();
-var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.includes("smart-tv") || userAgent.includes("smarttv") || /\baft.*\b/.test(userAgent), isVr = window.navigator.userAgent.includes("VR") && window.navigator.userAgent.includes("OculusBrowser"), browserHasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0, userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport, STATES = {
+var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.includes("smart-tv") || userAgent.includes("smarttv") || /\baft.*\b/.test(userAgent), isVr = window.navigator.userAgent.includes("VR") && window.navigator.userAgent.includes("OculusBrowser"), browserHasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0, userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport, supportMkb = AppInterface || !userAgent.match(/(android|iphone|ipad)/), STATES = {
   supportedRegion: !0,
   serverRegions: {},
   selectedRegion: {},
@@ -137,7 +137,8 @@ var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.inclu
   userAgent: {
     isTv,
     capabilities: {
-      touch: userAgentHasTouchSupport
+      touch: userAgentHasTouchSupport,
+      mkb: supportMkb
     }
   },
   currentStream: {},
@@ -1375,10 +1376,7 @@ class GlobalSettingsStorage extends BaseSettingsStore {
       requiredVariants: "full",
       label: t("enable-mkb"),
       default: !1,
-      unsupported: (() => {
+      unsupported: !STATES.userAgent.capabilities.mkb,
-        const userAgent2 = (window.navigator.orgUserAgent || window.navigator.userAgent || "").toLowerCase();
-        return !AppInterface && userAgent2.match(/(android|iphone|ipad)/) ? t("browser-unsupported-feature") : !1;
-      })(),
       ready: (setting) => {
         let note, url;
         if (setting.unsupported) note = t("browser-unsupported-feature"), url = "https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657";
@@ -3271,6 +3269,11 @@ class SettingsNavigationDialog extends NavigationDialog {
     requiredVariants: "full",
     group: "mkb",
     label: t("mouse-and-keyboard"),
+    note: !STATES.userAgent.capabilities.mkb ? CE("a", {
+      href: "https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657",
+      target: "_blank"
+    }, "⚠️ " + t("browser-unsupported-feature")) : null,
+    unsupported: !STATES.userAgent.capabilities.mkb,
     items: [
       "native_mkb_enabled",
       "game_msfs2020_force_native_mkb",
@@ -3914,9 +3917,7 @@ class SettingsNavigationDialog extends NavigationDialog {
           $tabContent.appendChild($title);
         }
         if (settingTabContent.note) {
-          let $note;
+          const $note = CE("b", { class: "bx-note-unsupported" }, settingTabContent.note);
-          if (typeof settingTabContent.note === "string") $note = CE("b", { class: "bx-note-unsupported" }, settingTabContent.note);
-          else $note = settingTabContent.note;
           $tabContent.appendChild($note);
         }
         if (settingTabContent.unsupported) continue;

dist/better-xcloud.user.js

@@ -122,7 +122,7 @@ function deepClone(obj) {
 }
 var SCRIPT_VERSION = "5.8.1-beta", SCRIPT_VARIANT = "full", AppInterface = window.AppInterface;
 UserAgent.init();
-var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.includes("smart-tv") || userAgent.includes("smarttv") || /\baft.*\b/.test(userAgent), isVr = window.navigator.userAgent.includes("VR") && window.navigator.userAgent.includes("OculusBrowser"), browserHasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0, userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport, STATES = {
+var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.includes("smart-tv") || userAgent.includes("smarttv") || /\baft.*\b/.test(userAgent), isVr = window.navigator.userAgent.includes("VR") && window.navigator.userAgent.includes("OculusBrowser"), browserHasTouchSupport = "ontouchstart" in window || navigator.maxTouchPoints > 0, userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport, supportMkb = AppInterface || !userAgent.match(/(android|iphone|ipad)/), STATES = {
   supportedRegion: !0,
   serverRegions: {},
   selectedRegion: {},
@@ -139,7 +139,8 @@ var userAgent = window.navigator.userAgent.toLowerCase(), isTv = userAgent.inclu
   userAgent: {
     isTv,
     capabilities: {
-      touch: userAgentHasTouchSupport
+      touch: userAgentHasTouchSupport,
+      mkb: supportMkb
     }
   },
   currentStream: {},
@@ -1402,10 +1403,7 @@ class GlobalSettingsStorage extends BaseSettingsStore {
       requiredVariants: "full",
       label: t("enable-mkb"),
       default: !1,
-      unsupported: (() => {
+      unsupported: !STATES.userAgent.capabilities.mkb,
-        const userAgent2 = (window.navigator.orgUserAgent || window.navigator.userAgent || "").toLowerCase();
-        return !AppInterface && userAgent2.match(/(android|iphone|ipad)/) ? t("browser-unsupported-feature") : !1;
-      })(),
       ready: (setting) => {
         let note, url;
         if (setting.unsupported) note = t("browser-unsupported-feature"), url = "https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657";
@@ -4652,6 +4650,11 @@ class SettingsNavigationDialog extends NavigationDialog {
     requiredVariants: "full",
     group: "mkb",
     label: t("mouse-and-keyboard"),
+    note: !STATES.userAgent.capabilities.mkb ? CE("a", {
+      href: "https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657",
+      target: "_blank"
+    }, "⚠️ " + t("browser-unsupported-feature")) : null,
+    unsupported: !STATES.userAgent.capabilities.mkb,
     items: [
       "native_mkb_enabled",
       "game_msfs2020_force_native_mkb",
@@ -5347,9 +5350,7 @@ class SettingsNavigationDialog extends NavigationDialog {
           $tabContent.appendChild($title);
         }
         if (settingTabContent.note) {
-          let $note;
+          const $note = CE("b", { class: "bx-note-unsupported" }, settingTabContent.note);
-          if (typeof settingTabContent.note === "string") $note = CE("b", { class: "bx-note-unsupported" }, settingTabContent.note);
-          else $note = settingTabContent.note;
           $tabContent.appendChild($note);
         }
         if (settingTabContent.unsupported) continue;

src/modules/ui/dialog/settings-dialog.ts

@@ -220,6 +220,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
         requiredVariants: 'full',
         group: 'mkb',
         label: t('mouse-and-keyboard'),
+        note: !STATES.userAgent.capabilities.mkb ? CE('a', {
+            href: 'https://github.com/redphx/better-xcloud/issues/206#issuecomment-1920475657',
+            target: '_blank',
+        }, '⚠️ ' + t('browser-unsupported-feature')) : null,
+        unsupported: !STATES.userAgent.capabilities.mkb,
         items: [
             PrefKey.NATIVE_MKB_ENABLED,
             PrefKey.GAME_MSFS2020_FORCE_NATIVE_MKB,
@@ -1336,12 +1341,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
 
                 // Add note
                 if (settingTabContent.note) {
-                    let $note;
+                    const $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.note);
-                    if (typeof settingTabContent.note === 'string') {
-                        $note = CE('b', {class: 'bx-note-unsupported'}, settingTabContent.note);
-                    } else {
-                        $note = settingTabContent.note;
-                    }
 
                     $tabContent.appendChild($note);
                 }

src/types/index.d.ts

@@ -46,6 +46,7 @@ type BxStates = {
         isTv: boolean;
         capabilities: {
             touch: boolean;
+            mkb: boolean;
         };
     };
 

src/utils/global.ts

@@ -13,6 +13,7 @@ const isTv = userAgent.includes('smart-tv') || userAgent.includes('smarttv') ||
 const isVr = window.navigator.userAgent.includes('VR') && window.navigator.userAgent.includes('OculusBrowser');
 const browserHasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 const userAgentHasTouchSupport = !isTv && !isVr && browserHasTouchSupport;
+const supportMkb = AppInterface || !userAgent.match(/(android|iphone|ipad)/);
 
 export const STATES: BxStates = {
     supportedRegion: true,
@@ -35,6 +36,7 @@ export const STATES: BxStates = {
         isTv: isTv,
         capabilities: {
             touch: userAgentHasTouchSupport,
+            mkb: supportMkb,
         }
     },
 

src/utils/settings-storages/global-settings-storage.ts

@@ -393,10 +393,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
             requiredVariants: 'full',
             label: t('enable-mkb'),
             default: false,
-            unsupported: ((): string | boolean => {
+            unsupported: !STATES.userAgent.capabilities.mkb,
-                const userAgent = ((window.navigator as any).orgUserAgent || window.navigator.userAgent || '').toLowerCase();
-                return !AppInterface && userAgent.match(/(android|iphone|ipad)/) ? t('browser-unsupported-feature') : false;
-            })(),
             ready: (setting: SettingDefinition) => {
                 let note;
                 let url;