Show debug info

src/assets/css/global-settings.styl

@@ -203,3 +203,19 @@
     display: block;
     width: 100%;
 }
+
+.bx-debug-info {
+    button {
+        margin-top: 10px;
+    }
+
+    pre {
+        margin-top: 10px;
+        cursor: copy;
+        color: white;
+        padding: 8px;
+        border: 1px solid #2d2d2d;
+        background: #212121;
+        white-space: break-spaces;
+    }
+}

src/modules/ui/global-settings.ts

@@ -1,4 +1,4 @@
-import { STATES, AppInterface, SCRIPT_VERSION } from "@utils/global";
+import { STATES, AppInterface, SCRIPT_VERSION, deepClone } from "@utils/global";
 import { CE, createButton, ButtonStyle } from "@utils/html";
 import { BxIcon } from "@utils/bx-icon";
 import { getPreferredServerRegion } from "@utils/region";
@@ -9,6 +9,8 @@ import { PatcherCache } from "../patcher";
 import { UserAgentProfile } from "@enums/user-agent";
 import { BxSelectElement } from "@/web-components/bx-select";
 import { StreamSettings } from "../stream/stream-settings";
+import { BX_FLAGS } from "@/utils/bx-flags";
+import { Toast } from "@/utils/toast";
 
 const SETTINGS_UI = {
     'Better xCloud': {
@@ -455,6 +457,47 @@ export function setupSettingsUi() {
         $wrapper.appendChild(CE('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
     } catch (e) {}
 
+    // Show Debug info
+    const debugInfo = deepClone(BX_FLAGS.DeviceInfo);
+    const debugSettings = [
+        PrefKey.STREAM_TARGET_RESOLUTION,
+        PrefKey.STREAM_CODEC_PROFILE,
+
+        PrefKey.VIDEO_PLAYER_TYPE,
+        PrefKey.VIDEO_PROCESSING,
+        PrefKey.VIDEO_SHARPNESS,
+    ];
+
+    debugInfo['settings'] = {};
+    for (const key of debugSettings) {
+        debugInfo['settings'][key] = getPref(key);
+    }
+
+    const $debugInfo = CE('div', {class: 'bx-debug-info'},
+        createButton({
+            label: 'Debug info',
+            style: ButtonStyle.GHOST | ButtonStyle.FULL_WIDTH,
+            onClick: e => {
+                console.log(e);
+                (e.target as HTMLElement).closest('button')?.nextElementSibling?.classList.toggle('bx-gone');
+            },
+        }),
+        CE('pre', {
+            class: 'bx-gone',
+            on: {
+                click: async (e: Event) => {
+                    try {
+                        await navigator.clipboard.writeText((e.target as HTMLElement).innerText);
+                        Toast.show('Copied to clipboard', '', {instant: true});
+                    } catch (err) {
+                        console.error('Failed to copy: ', err);
+                    }
+                },
+            },
+        }, JSON.stringify(debugInfo, null, '  ')),
+    );
+    $wrapper.appendChild($debugInfo);
+
     $container.appendChild($wrapper);
 
     // Add Settings UI to the web page

src/utils/bx-flags.ts

@@ -11,6 +11,11 @@ type BxFlags = Partial<{
     FeatureGates: {[key: string]: boolean} | null,
 
     IsSupportedTvBrowser: boolean,
+
+    DeviceInfo: Partial<{
+        deviceType: 'android' | 'android-tv' | 'webos' | 'unknown',
+        userAgent: string,
+    }>,
 }>
 
 // Setup flags
@@ -25,6 +30,11 @@ const DEFAULT_FLAGS: BxFlags = {
 
     ForceNativeMkbTitles: [],
     FeatureGates: null,
+
+    DeviceInfo: {
+        deviceType: 'unknown',
+        userAgent: window.navigator.userAgent,
+    },
 }
 
 export const BX_FLAGS: BxFlags = Object.assign(DEFAULT_FLAGS, window.BX_FLAGS || {});

src/utils/html.ts

@@ -35,7 +35,13 @@ function createElement<T=HTMLElement>(elmName: string, props: {[index: string]:
         if (hasNs) {
             $elm.setAttributeNS(null, key, props[key]);
         } else {
-            $elm.setAttribute(key, props[key]);
+            if (key === 'on') {
+                for (const eventName in props[key]) {
+                    $elm.addEventListener(eventName, props[key][eventName]);
+                }
+            } else {
+                $elm.setAttribute(key, props[key]);
+            }
         }
     }