Port the rest of the code

src/modules/ui/global-settings.ts

@@ -0,0 +1,347 @@
+import { CE, createButton, Icon, ButtonStyle } from "../../utils/html";
+import { getPreferredServerRegion } from "../../utils/region";
+import { UserAgent, UserAgentProfile } from "../../utils/user-agent";
+import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "../preferences";
+import { getLocale, t } from "../translation";
+
+const SETTINGS_UI = {
+    'Better xCloud': {
+        items: [
+            PrefKey.BETTER_XCLOUD_LOCALE,
+            PrefKey.REMOTE_PLAY_ENABLED,
+        ],
+    },
+
+    [t('server')]: {
+        items: [
+            PrefKey.SERVER_REGION,
+            PrefKey.STREAM_PREFERRED_LOCALE,
+            PrefKey.PREFER_IPV6_SERVER,
+        ],
+    },
+
+    [t('stream')]: {
+        items: [
+            PrefKey.STREAM_TARGET_RESOLUTION,
+            PrefKey.STREAM_CODEC_PROFILE,
+            PrefKey.GAME_FORTNITE_FORCE_CONSOLE,
+            PrefKey.AUDIO_MIC_ON_PLAYING,
+            PrefKey.STREAM_DISABLE_FEEDBACK_DIALOG,
+
+            PrefKey.SCREENSHOT_BUTTON_POSITION,
+            PrefKey.SCREENSHOT_APPLY_FILTERS,
+
+            PrefKey.AUDIO_ENABLE_VOLUME_CONTROL,
+            PrefKey.STREAM_COMBINE_SOURCES,
+        ],
+    },
+
+    [t('local-co-op')]: {
+        items: [
+            PrefKey.LOCAL_CO_OP_ENABLED,
+        ],
+    },
+
+    [t('mouse-and-keyboard')]: {
+        items: [
+            PrefKey.MKB_ENABLED,
+            PrefKey.MKB_HIDE_IDLE_CURSOR,
+        ],
+    },
+
+    [t('touch-controller')]: {
+        note: !States.hasTouchSupport ? '⚠️ ' + t('device-unsupported-touch') : null,
+        unsupported: !States.hasTouchSupport,
+        items: [
+            PrefKey.STREAM_TOUCH_CONTROLLER,
+            PrefKey.STREAM_TOUCH_CONTROLLER_AUTO_OFF,
+            PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_STANDARD,
+            PrefKey.STREAM_TOUCH_CONTROLLER_STYLE_CUSTOM,
+        ],
+    },
+
+    [t('loading-screen')]: {
+        items: [
+            PrefKey.UI_LOADING_SCREEN_GAME_ART,
+            PrefKey.UI_LOADING_SCREEN_WAIT_TIME,
+            PrefKey.UI_LOADING_SCREEN_ROCKET,
+        ],
+    },
+
+    [t('ui')]: {
+        items: [
+            PrefKey.UI_LAYOUT,
+            PrefKey.STREAM_SIMPLIFY_MENU,
+            PrefKey.SKIP_SPLASH_VIDEO,
+            !AppInterface && PrefKey.UI_SCROLLBAR_HIDE,
+            PrefKey.HIDE_DOTS_ICON,
+            PrefKey.REDUCE_ANIMATIONS,
+        ],
+    },
+
+    [t('other')]: {
+        items: [
+            PrefKey.BLOCK_SOCIAL_FEATURES,
+            PrefKey.BLOCK_TRACKING,
+        ],
+    },
+
+    [t('advanced')]: {
+        items: [
+            PrefKey.USER_AGENT_PROFILE,
+        ],
+    },
+};
+
+
+export function setupSettingsUi() {
+    // Avoid rendering the Settings multiple times
+    if (document.querySelector('.bx-settings-container')) {
+        return;
+    }
+
+    const PREF_PREFERRED_REGION = getPreferredServerRegion();
+    const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
+
+    let $reloadBtnWrapper: HTMLButtonElement;
+
+    // Setup Settings UI
+    const $container = CE<HTMLElement>('div', {
+        'class': 'bx-settings-container bx-gone',
+    });
+
+    let $updateAvailable;
+
+    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-settings-wrapper'},
+            CE<HTMLElement>('div', {'class': 'bx-settings-title-wrapper'},
+                CE('a', {
+                    'class': 'bx-settings-title',
+                    'href': SCRIPT_HOME,
+                    'target': '_blank',
+                }, 'Better xCloud ' + SCRIPT_VERSION),
+                createButton({icon: Icon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}),
+            )
+        );
+    $updateAvailable = CE('a', {
+        'class': 'bx-settings-update bx-gone',
+        'href': 'https://github.com/redphx/better-xcloud/releases',
+        'target': '_blank',
+    });
+
+    $wrapper.appendChild($updateAvailable);
+
+    // Show new version indicator
+    if (PREF_LATEST_VERSION && PREF_LATEST_VERSION != SCRIPT_VERSION) {
+        $updateAvailable.textContent = `🌟 Version ${PREF_LATEST_VERSION} available`;
+        $updateAvailable.classList.remove('bx-gone');
+    }
+
+    // Show link to Android app
+    if (!AppInterface) {
+        const userAgent = UserAgent.getDefault().toLowerCase();
+        if (userAgent.includes('android')) {
+            const $btn = createButton({
+                label: '🔥 ' + t('install-android'),
+                style: ButtonStyle.FULL_WIDTH | ButtonStyle.FOCUSABLE,
+                url: 'https://better-xcloud.github.io/android',
+            });
+
+            $wrapper.appendChild($btn);
+        }
+    }
+
+    const onChange = (e: Event) => {
+        if (!$reloadBtnWrapper) {
+            return;
+        }
+
+        $reloadBtnWrapper.classList.remove('bx-gone');
+
+        if ((e.target as HTMLElement).id === 'bx_setting_' + PrefKey.BETTER_XCLOUD_LOCALE) {
+            // Update locale
+            LOCALE = getLocale();
+
+            const $btn = $reloadBtnWrapper.firstElementChild! as HTMLButtonElement;
+            $btn.textContent = t('settings-reloading');
+            $btn.click();
+        }
+    };
+
+    // Render settings
+    for (let groupLabel in SETTINGS_UI) {
+        const $group = CE('span', {'class': 'bx-settings-group-label'}, groupLabel);
+
+        // Render note
+        if (SETTINGS_UI[groupLabel].note) {
+            const $note = CE('b', {}, SETTINGS_UI[groupLabel].note);
+            $group.appendChild($note);
+        }
+
+        $wrapper.appendChild($group);
+
+        // Don't render settings if this is an unsupported feature
+        if (SETTINGS_UI[groupLabel].unsupported) {
+            continue;
+        }
+
+        const settingItems = SETTINGS_UI[groupLabel].items
+        for (let settingId in settingItems) {
+            // Don't render custom settings
+            if (!settingId) {
+                continue;
+            }
+
+            const setting = Preferences.SETTINGS[settingId];
+            if (!setting) {
+                continue;
+            }
+
+            let settingLabel = setting.label;
+            let settingNote = setting.note || '';
+
+            // Add Experimental text
+            if (setting.experimental) {
+                settingLabel = '🧪 ' + settingLabel;
+                if (!settingNote) {
+                    settingNote = t('experimental')
+                } else {
+                    settingNote = `${t('experimental')}: ${settingNote}`
+                }
+            }
+
+            let $control;
+            let $inpCustomUserAgent: HTMLInputElement;
+            let labelAttrs = {};
+
+            if (settingId === PrefKey.USER_AGENT_PROFILE) {
+                let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent;
+                $inpCustomUserAgent = CE('input', {
+                    'type': 'text',
+                    'placeholder': defaultUserAgent,
+                    'class': 'bx-settings-custom-user-agent',
+                });
+                $inpCustomUserAgent.addEventListener('change', e => {
+                    setPref(PrefKey.USER_AGENT_CUSTOM, (e.target as HTMLInputElement).value.trim());
+                    onChange(e);
+                });
+
+                $control = toPrefElement(PrefKey.USER_AGENT_PROFILE, (e: Event) => {
+                    const value = (e.target as HTMLInputElement).value;
+                    let isCustom = value === UserAgentProfile.CUSTOM;
+                    let userAgent = UserAgent.get(value);
+
+                    $inpCustomUserAgent.value = userAgent;
+                    $inpCustomUserAgent.readOnly = !isCustom;
+                    $inpCustomUserAgent.disabled = !isCustom;
+
+                    onChange(e);
+                });
+            } else if (settingId === PrefKey.SERVER_REGION) {
+                let selectedValue;
+
+                $control = CE<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`});
+                $control.name = $control.id;
+
+                $control.addEventListener('change', e => {
+                    setPref(settingId, (e.target as HTMLSelectElement).value);
+                    onChange(e);
+                });
+
+                selectedValue = PREF_PREFERRED_REGION;
+
+                setting.options = {};
+                for (let regionName in States.serverRegions) {
+                    const region = States.serverRegions[regionName];
+                    let value = regionName;
+
+                    let label = `${region.shortName} - ${regionName}`;
+                    if (region.isDefault) {
+                        label += ` (${t('default')})`;
+                        value = 'default';
+
+                        if (selectedValue === regionName) {
+                            selectedValue = 'default';
+                        }
+                    }
+
+                    setting.options[value] = label;
+                }
+
+                for (let value in setting.options) {
+                    const label = setting.options[value];
+
+                    const $option = CE('option', {value: value}, label);
+                    $control.appendChild($option);
+                }
+
+                // Select preferred region
+                $control.value = selectedValue;
+            } else {
+                if (settingId === PrefKey.BETTER_XCLOUD_LOCALE) {
+                    $control = toPrefElement(settingId, (e: Event) => {
+                        localStorage.setItem('better_xcloud_locale', (e.target as HTMLSelectElement).value);
+                        onChange(e);
+                    });
+                } else {
+                    $control = toPrefElement(settingId, onChange);
+                }
+                labelAttrs = {'for': $control.id, 'tabindex': 0};
+            }
+
+            // Disable unsupported settings
+            if (setting.unsupported) {
+                ($control as HTMLInputElement).disabled = true;
+            }
+
+            const $label = CE('label', labelAttrs, settingLabel);
+            if (settingNote) {
+                $label.appendChild(CE('b', {}, settingNote));
+            }
+            const $elm = CE<HTMLElement>('div', {'class': 'bx-settings-row'},
+                            $label,
+                            $control
+                           );
+
+            $wrapper.appendChild($elm);
+
+            // Add User-Agent input
+            if (settingId === PrefKey.USER_AGENT_PROFILE) {
+                $wrapper.appendChild($inpCustomUserAgent!);
+                // Trigger 'change' event
+                $control.dispatchEvent(new Event('change'));
+            }
+        }
+    }
+
+    // Setup Reload button
+    const $reloadBtn = createButton({
+        label: t('settings-reload'),
+        style: ButtonStyle.DANGER | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
+        onClick: e => {
+            window.location.reload();
+            $reloadBtn.disabled = true;
+            $reloadBtn.textContent = t('settings-reloading');
+        },
+    });
+    $reloadBtn.setAttribute('tabindex', '0');
+
+    $reloadBtnWrapper = CE<HTMLButtonElement>('div', {'class': 'bx-settings-reload-button-wrapper bx-gone'}, $reloadBtn);
+    $wrapper.appendChild($reloadBtnWrapper);
+
+    // Donation link
+    const $donationLink = CE('a', {'class': 'bx-donation-link', href: 'https://ko-fi.com/redphx', target: '_blank'}, `❤️ ${t('support-better-xcloud')}`);
+    $wrapper.appendChild($donationLink);
+
+    // Show Game Pass app version
+    try {
+        const appVersion = (document.querySelector('meta[name=gamepass-app-version]') as HTMLMetaElement).content;
+        const appDate = new Date((document.querySelector('meta[name=gamepass-app-date]') as HTMLMetaElement).content).toISOString().substring(0, 10);
+        $wrapper.appendChild(CE<HTMLElement>('div', {'class': 'bx-settings-app-version'}, `xCloud website version ${appVersion} (${appDate})`));
+    } catch (e) {}
+
+    $container.appendChild($wrapper);
+
+    // Add Settings UI to the web page
+    const $pageContent = document.getElementById('PageContent');
+    $pageContent?.parentNode?.insertBefore($container, $pageContent);
+}

src/modules/ui/header.ts

@@ -0,0 +1,83 @@
+import { createButton, Icon, ButtonStyle } from "../../utils/html";
+import { getPreferredServerRegion } from "../../utils/region";
+import { PrefKey, getPref } from "../preferences";
+import { RemotePlay } from "../remote-play";
+import { t } from "../translation";
+import { setupSettingsUi } from "./global-settings";
+
+
+function injectSettingsButton($parent?: HTMLElement) {
+    if (!$parent) {
+        return;
+    }
+
+    const PREF_PREFERRED_REGION = getPreferredServerRegion(true);
+    const PREF_LATEST_VERSION = getPref(PrefKey.LATEST_VERSION);
+
+    const $headerFragment = document.createDocumentFragment();
+
+    // Remote Play button
+    if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) {
+        const $remotePlayBtn = createButton({
+            classes: ['bx-header-remote-play-button'],
+            icon: Icon.REMOTE_PLAY,
+            title: t('remote-play'),
+            style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
+            onClick: e => {
+                RemotePlay.togglePopup();
+            },
+        });
+        $headerFragment.appendChild($remotePlayBtn);
+    }
+
+    // Setup Settings button
+    const $settingsBtn = createButton({
+        classes: ['bx-header-settings-button'],
+        label: PREF_PREFERRED_REGION,
+        style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE | ButtonStyle.FULL_HEIGHT,
+        onClick: e => {
+            setupSettingsUi();
+
+            const $settings = document.querySelector('.bx-settings-container')!;
+            $settings.classList.toggle('bx-gone');
+            window.scrollTo(0, 0);
+            document.activeElement && (document.activeElement as HTMLElement).blur();
+        },
+    });
+
+    // Show new update status
+    if (PREF_LATEST_VERSION && PREF_LATEST_VERSION !== SCRIPT_VERSION) {
+        $settingsBtn.setAttribute('data-update-available', 'true');
+    }
+
+    // Add the Settings button to the web page
+    $headerFragment.appendChild($settingsBtn);
+    $parent.appendChild($headerFragment);
+}
+
+
+export function checkHeader() {
+    const $button = document.querySelector('.bx-header-settings-button');
+
+    if (!$button) {
+        const $rightHeader = document.querySelector('#PageContent div[class*=EdgewaterHeader-module__rightSectionSpacing]');
+        injectSettingsButton($rightHeader as HTMLElement);
+    }
+}
+
+
+export function watchHeader() {
+    const $header = document.querySelector('#PageContent header');
+    if (!$header) {
+        return;
+    }
+
+    let timeout: number | null;
+    const observer = new MutationObserver(mutationList => {
+        timeout && clearTimeout(timeout);
+        timeout = setTimeout(checkHeader, 2000);
+    });
+    observer.observe($header, {subtree: true, childList: true});
+
+    checkHeader();
+}

src/modules/ui/ui.ts

@@ -0,0 +1,483 @@
+import { Icon, CE, createButton, ButtonStyle } from "../../utils/html";
+import { UserAgent } from "../../utils/user-agent";
+import { BxEvent } from "../bx-event";
+import { MkbRemapper } from "../mkb/mkb-remapper";
+import { getPref, Preferences, PrefKey, toPrefElement } from "../preferences";
+import { setupScreenshotButton } from "../screenshot";
+import { StreamStats } from "../stream/stream-stats";
+import { TouchController } from "../touch-controller";
+import { t } from "../translation";
+import { VibrationManager } from "../vibration-manager";
+
+
+export function localRedirect(path: string) {
+    const url = window.location.href.substring(0, 31) + path;
+
+    const $pageContent = document.getElementById('PageContent');
+    if (!$pageContent) {
+        return;
+    }
+
+    const $anchor = CE<HTMLAnchorElement>('a', {
+            href: url,
+            class: 'bx-hidden bx-offscreen'
+        }, '');
+    $anchor.addEventListener('click', e => {
+        // Remove element after clicking on it
+        setTimeout(() => {
+            $pageContent.removeChild($anchor);
+        }, 1000);
+    });
+
+    $pageContent.appendChild($anchor);
+    $anchor.click();
+}
+
+
+function getVideoPlayerFilterStyle() {
+    const filters = [];
+
+    const clarity = getPref(PrefKey.VIDEO_CLARITY);
+    if (clarity != 0) {
+        const level = (7 - (clarity - 1) * 0.5).toFixed(1); // 5, 5.5, 6, 6.5, 7
+        const matrix = `0 -1 0 -1 ${level} -1 0 -1 0`;
+        document.getElementById('bx-filter-clarity-matrix')!.setAttributeNS(null, 'kernelMatrix', matrix);
+
+        filters.push(`url(#bx-filter-clarity)`);
+    }
+
+    const saturation = getPref(PrefKey.VIDEO_SATURATION);
+    if (saturation != 100) {
+        filters.push(`saturate(${saturation}%)`);
+    }
+
+    const contrast = getPref(PrefKey.VIDEO_CONTRAST);
+    if (contrast != 100) {
+        filters.push(`contrast(${contrast}%)`);
+    }
+
+    const brightness = getPref(PrefKey.VIDEO_BRIGHTNESS);
+    if (brightness != 100) {
+        filters.push(`brightness(${brightness}%)`);
+    }
+
+    return filters.join(' ');
+}
+
+function setupQuickSettingsBar() {
+    const isSafari = UserAgent.isSafari();
+
+    const SETTINGS_UI = [
+        getPref(PrefKey.MKB_ENABLED) && {
+            icon: Icon.MOUSE,
+            group: 'mkb',
+            items: [
+                {
+                    group: 'mkb',
+                    label: t('mouse-and-keyboard'),
+                    help_url: 'https://better-xcloud.github.io/mouse-and-keyboard/',
+                    content: MkbRemapper.INSTANCE.render(),
+                },
+            ],
+        },
+
+        {
+            icon: Icon.DISPLAY,
+            group: 'stream',
+            items: [
+                {
+                    group: 'audio',
+                    label: t('audio'),
+                    help_url: 'https://better-xcloud.github.io/ingame-features/#audio',
+                    items: [
+                        {
+                            pref: PrefKey.AUDIO_VOLUME,
+                            label: t('volume'),
+                            onChange: (e: any, value: number) => {
+                                States.currentStream && (States.currentStream.audioGainNode!.gain.value = value / 100)
+                            },
+                            params: {
+                                disabled: !getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL),
+                            },
+                        },
+                    ],
+                },
+
+                {
+                    group: 'video',
+                    label: t('video'),
+                    help_url: 'https://better-xcloud.github.io/ingame-features/#video',
+                    items: [
+                        {
+                            pref: PrefKey.VIDEO_RATIO,
+                            label: t('ratio'),
+                            onChange: updateVideoPlayerCss,
+                        },
+
+                        {
+                            pref: PrefKey.VIDEO_CLARITY,
+                            label: t('clarity'),
+                            onChange: updateVideoPlayerCss,
+                            unsupported: isSafari,
+                        },
+
+                        {
+                            pref: PrefKey.VIDEO_SATURATION,
+                            label: t('saturation'),
+                            onChange: updateVideoPlayerCss,
+                        },
+
+                        {
+                            pref: PrefKey.VIDEO_CONTRAST,
+                            label: t('contrast'),
+                            onChange: updateVideoPlayerCss,
+                        },
+
+                        {
+                            pref: PrefKey.VIDEO_BRIGHTNESS,
+                            label: t('brightness'),
+                            onChange: updateVideoPlayerCss,
+                        },
+                    ],
+                },
+            ],
+        },
+
+        {
+            icon: Icon.CONTROLLER,
+            group: 'controller',
+            items: [
+                {
+                    group: 'controller',
+                    label: t('controller'),
+                    help_url: 'https://better-xcloud.github.io/ingame-features/#controller',
+                    items: [
+                        {
+                            pref: PrefKey.CONTROLLER_ENABLE_VIBRATION,
+                            label: t('controller-vibration'),
+                            unsupported: !VibrationManager.supportControllerVibration(),
+                            onChange: VibrationManager.updateGlobalVars,
+                        },
+
+                        {
+                            pref: PrefKey.CONTROLLER_DEVICE_VIBRATION,
+                            label: t('device-vibration'),
+                            unsupported: !VibrationManager.supportDeviceVibration(),
+                            onChange: VibrationManager.updateGlobalVars,
+                        },
+
+                        (VibrationManager.supportControllerVibration() || VibrationManager.supportDeviceVibration()) && {
+                            pref: PrefKey.CONTROLLER_VIBRATION_INTENSITY,
+                            label: t('vibration-intensity'),
+                            unsupported: !VibrationManager.supportDeviceVibration(),
+                            onChange: VibrationManager.updateGlobalVars,
+                        },
+                    ],
+                },
+
+                States.hasTouchSupport && {
+                    group: 'touch-controller',
+                    label: t('touch-controller'),
+                    items: [
+                        {
+                            label: t('layout'),
+                            content: CE('select', {disabled: true}, CE('option', {}, t('default'))),
+                            onMounted: ($elm: HTMLSelectElement) => {
+                                $elm.addEventListener('change', e => {
+                                    TouchController.loadCustomLayout(States.currentStream?.xboxTitleId!, $elm.value, 1000);
+                                });
+
+                                window.addEventListener(BxEvent.CUSTOM_TOUCH_LAYOUTS_LOADED, e => {
+                                    const data = (e as any).data;
+
+                                    if (States.currentStream?.xboxTitleId && ($elm as any).xboxTitleId === States.currentStream?.xboxTitleId) {
+                                        $elm.dispatchEvent(new Event('change'));
+                                        return;
+                                    }
+
+                                    ($elm as any).xboxTitleId = States.currentStream?.xboxTitleId;
+
+                                    // Clear options
+                                    while ($elm.firstChild) {
+                                        $elm.removeChild($elm.firstChild);
+                                    }
+
+                                    $elm.disabled = !data;
+                                    if (!data) {
+                                        $elm.appendChild(CE('option', {value: ''}, t('default')));
+                                        $elm.value = '';
+                                        $elm.dispatchEvent(new Event('change'));
+                                        return;
+                                    }
+
+                                    // Add options
+                                    const $fragment = document.createDocumentFragment();
+                                    for (const key in data.layouts) {
+                                        const layout = data.layouts[key];
+
+                                        const $option = CE('option', {value: key}, layout.name);
+                                        $fragment.appendChild($option);
+                                    }
+
+                                    $elm.appendChild($fragment);
+                                    $elm.value = data.default_layout;
+                                    $elm.dispatchEvent(new Event('change'));
+                                });
+                            },
+                        },
+                    ],
+                }
+            ],
+        },
+
+        {
+            icon: Icon.STREAM_STATS,
+            group: 'stats',
+            items: [
+                {
+                    group: 'stats',
+                    label: t('menu-stream-stats'),
+                    help_url: 'https://better-xcloud.github.io/stream-stats/',
+                    items: [
+                        {
+                            pref: PrefKey.STATS_SHOW_WHEN_PLAYING,
+                            label: t('show-stats-on-startup'),
+                        },
+                        {
+                            pref: PrefKey.STATS_QUICK_GLANCE,
+                            label: '👀 ' + t('enable-quick-glance-mode'),
+                            onChange: (e: InputEvent) => {
+                                (e.target! as HTMLInputElement).checked ? StreamStats.quickGlanceSetup() : StreamStats.quickGlanceStop();
+                            },
+                        },
+                        {
+                            pref: PrefKey.STATS_ITEMS,
+                            label: t('stats'),
+                            onChange: StreamStats.refreshStyles,
+                        },
+                        {
+                            pref: PrefKey.STATS_POSITION,
+                            label: t('position'),
+                            onChange: StreamStats.refreshStyles,
+                        },
+                        {
+                            pref: PrefKey.STATS_TEXT_SIZE,
+                            label: t('text-size'),
+                            onChange: StreamStats.refreshStyles,
+                        },
+                        {
+                            pref: PrefKey.STATS_OPACITY,
+                            label: t('opacity'),
+                            onChange: StreamStats.refreshStyles,
+                        },
+                        {
+                            pref: PrefKey.STATS_TRANSPARENT,
+                            label: t('transparent-background'),
+                            onChange: StreamStats.refreshStyles,
+                        },
+                        {
+                            pref: PrefKey.STATS_CONDITIONAL_FORMATTING,
+                            label: t('conditional-formatting'),
+                            onChange: StreamStats.refreshStyles,
+                        },
+                    ],
+                },
+            ],
+        },
+    ];
+
+    let $tabs: HTMLElement;
+    let $settings: HTMLElement;
+
+    const $wrapper = CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar bx-gone'},
+            $tabs = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tabs'}),
+            $settings = CE<HTMLElement>('div', {'class': 'bx-quick-settings-tab-contents'}),
+        );
+
+    for (const settingTab of SETTINGS_UI) {
+        if (!settingTab) {
+            continue;
+        }
+
+        const $svg = CE('svg', {
+            'xmlns': 'http://www.w3.org/2000/svg',
+            'data-group': settingTab.group,
+            'fill': 'none',
+            'stroke': '#fff',
+            'fill-rule': 'evenodd',
+            'stroke-linecap': 'round',
+            'stroke-linejoin': 'round',
+            'stroke-width': 2,
+        });
+        $svg.innerHTML = settingTab.icon;
+        $svg.setAttribute('viewBox', '0 0 32 32');
+        $svg.addEventListener('click', e => {
+            // Switch tab
+            for (const $child of Array.from($settings.children)) {
+                if ($child.getAttribute('data-group') === settingTab.group) {
+                    $child.classList.remove('bx-gone');
+                } else {
+                    $child.classList.add('bx-gone');
+                }
+            }
+
+            // Highlight current tab button
+            for (const $child of Array.from($tabs.children)) {
+                $child.classList.remove('bx-active');
+            }
+
+            $svg.classList.add('bx-active');
+        });
+
+        $tabs.appendChild($svg);
+
+        const $group = CE<HTMLElement>('div', {'data-group': settingTab.group, 'class': 'bx-gone'});
+
+        for (const settingGroup of settingTab.items) {
+            if (!settingGroup) {
+                continue;
+            }
+
+            $group.appendChild(CE('h2', {},
+                    CE('span', {}, settingGroup.label),
+                    settingGroup.help_url && createButton({
+                            icon: Icon.QUESTION,
+                            style: ButtonStyle.GHOST,
+                            url: settingGroup.help_url,
+                            title: t('help'),
+                        }),
+                ));
+            if (settingGroup.note) {
+                if (typeof settingGroup.note === 'string') {
+                    settingGroup.note = document.createTextNode(settingGroup.note);
+                }
+                $group.appendChild(settingGroup.note);
+            }
+
+            if (settingGroup.content) {
+                $group.appendChild(settingGroup.content);
+                continue;
+            }
+
+            if (!settingGroup.items) {
+                settingGroup.items = [];
+            }
+
+            for (const setting of settingGroup.items) {
+                if (!setting) {
+                    continue;
+                }
+
+                const pref = setting.pref;
+
+                let $control;
+                if (setting.content) {
+                    $control = setting.content;
+                } else if (!setting.unsupported) {
+                    $control = toPrefElement(pref, setting.onChange, setting.params);
+                }
+
+                const $content = CE<HTMLElement>('div', {'class': 'bx-quick-settings-row', 'data-type': settingGroup.group},
+                            CE('label', {for: `bx_setting_${pref}`},
+                            setting.label,
+                            setting.unsupported && CE<HTMLElement>('div', {'class': 'bx-quick-settings-bar-note'}, t('browser-unsupported-feature')),
+                        ),
+                        !setting.unsupported && $control,
+                    );
+
+                $group.appendChild($content);
+
+                setting.onMounted && setting.onMounted($control);
+            }
+        }
+
+        $settings.appendChild($group);
+    }
+
+    // Select first tab
+    $tabs.firstElementChild!.dispatchEvent(new Event('click'));
+
+    document.documentElement.appendChild($wrapper);
+}
+
+
+export function updateVideoPlayerCss() {
+    let $elm = document.getElementById('bx-video-css');
+    if (!$elm) {
+        const $fragment = document.createDocumentFragment();
+        $elm = CE<HTMLStyleElement>('style', {id: 'bx-video-css'});
+        $fragment.appendChild($elm);
+
+        // Setup SVG filters
+        const $svg = CE('svg', {
+            'id': 'bx-video-filters',
+            'xmlns': 'http://www.w3.org/2000/svg',
+            'class': 'bx-gone',
+        }, CE('defs', {'xmlns': 'http://www.w3.org/2000/svg'},
+              CE('filter', {'id': 'bx-filter-clarity', 'xmlns': 'http://www.w3.org/2000/svg'},
+                CE('feConvolveMatrix', {'id': 'bx-filter-clarity-matrix', 'order': '3', 'xmlns': 'http://www.w3.org/2000/svg'}))
+             )
+        );
+        $fragment.appendChild($svg);
+        document.documentElement.appendChild($fragment);
+    }
+
+    let filters = getVideoPlayerFilterStyle();
+    let videoCss = '';
+    if (filters) {
+        videoCss += `filter: ${filters} !important;`;
+    }
+
+    // Apply video filters to screenshots
+    if (getPref(PrefKey.SCREENSHOT_APPLY_FILTERS)) {
+        States.currentStream.$screenshotCanvas!.getContext('2d')!.filter = filters;
+    }
+
+    const PREF_RATIO = getPref(PrefKey.VIDEO_RATIO);
+    if (PREF_RATIO && PREF_RATIO !== '16:9') {
+        if (PREF_RATIO.includes(':')) {
+            videoCss += `aspect-ratio: ${PREF_RATIO.replace(':', '/')}; object-fit: unset !important;`;
+
+            const tmp = PREF_RATIO.split(':');
+            const ratio = parseFloat(tmp[0]) / parseFloat(tmp[1]);
+            const maxRatio = window.innerWidth / window.innerHeight;
+            if (ratio < maxRatio) {
+                videoCss += 'width: fit-content !important;'
+            } else {
+                videoCss += 'height: fit-content !important;'
+            }
+        } else {
+            videoCss += `object-fit: ${PREF_RATIO} !important;`;
+        }
+    }
+
+    let css = '';
+    if (videoCss) {
+        css = `
+div[data-testid="media-container"] {
+    display: flex;
+}
+
+#game-stream video {
+    margin: 0 auto;
+    align-self: center;
+    background: #000;
+    ${videoCss}
+}
+`;
+    }
+
+    $elm.textContent = css;
+}
+
+export function setupBxUi() {
+    // Prevent initializing multiple times
+    if (!document.querySelector('.bx-quick-settings-bar')) {
+        window.addEventListener('resize', updateVideoPlayerCss);
+        setupQuickSettingsBar();
+        setupScreenshotButton();
+        StreamStats.render();
+    }
+
+    updateVideoPlayerCss();
+}