Port the rest of the code

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();
+}