feat: fixes and improvements to app store icons plugins

src/plugins/built-in/appIcons/index.ts

@@ -1,84 +1,83 @@
-import type { Plugin } from "../../core/types";
+import type { Plugin } from "@/plugins/core/types";
+import { resolveExtensionAssetUrl } from "@/lib/extensionAssetUrl";
 import appstoredark from "@/resources/icons/dlappstore-dark.svg";
 import appstorelight from "@/resources/icons/dlappstore-light.svg";
 import gplayicon from "@/resources/icons/googleplay.svg";
+import styles from "./styles.css?inline";
+
+const APPSTORE =
+  'a[href="https://itunes.apple.com/au/app/seqta-learn/id1143069793"]>img';
+const GOOGLEPLAY =
+  'a[href="https://play.google.com/store/apps/details?id=com.seqta.android.learn"]>img';
+
+const APPSTORE_DARK = resolveExtensionAssetUrl(appstoredark);
+const APPSTORE_LIGHT = resolveExtensionAssetUrl(appstorelight);
+const GOOGLEPLAY_ICON = resolveExtensionAssetUrl(gplayicon);
 
 const appIconPlugin: Plugin<{}, {}> = {
-    id: "app-icons",
+  id: "app-icons",
-    name: "App Icons",
+  name: "App Icons",
-    description: "Fixes the unthemed playstore and app store icons in the SEQTA download page in settings.",
+  description:
-    version: "1.0.0",
+    "Fixes unthemed App Store and Google Play icons on the SEQTA settings download page.",
-    settings: {},
+  version: "1.0.0",
-    disableToggle: true,
+  settings: {},
+  disableToggle: true,
+  styles,
 
-    run: async (api) => {
+  run: async (api) => {
-        const appstoreSelector =
+    let domObserver: MutationObserver | null = null;
-            'a[href="https://itunes.apple.com/au/app/seqta-learn/id1143069793"]>img';
-        const googleplaySelector =
-            'a[href="https://play.google.com/store/apps/details?id=com.seqta.android.learn"]>img';
 
-        let observer: MutationObserver | null = null;
+    const updateIcons = () => {
-        let classObserver: MutationObserver | null = null;
+      const appstore = document.querySelector<HTMLImageElement>(APPSTORE);
+      const googleplay = document.querySelector<HTMLImageElement>(GOOGLEPLAY);
+      const dark = document.documentElement.classList.contains("dark");
 
-        const updateIcons = () => {
+      if (appstore) {
-            const appstore =
+        appstore.src = dark ? APPSTORE_DARK : APPSTORE_LIGHT;
-                document.querySelector<HTMLImageElement>(appstoreSelector);
+      }
-            const googleplay =
-                document.querySelector<HTMLImageElement>(googleplaySelector);
 
-            const isDark =
+      if (googleplay) {
-                document.documentElement.classList.contains("dark");
+        googleplay.src = GOOGLEPLAY_ICON;
+        googleplay.classList.add("bsplus-googleplay-badge");
+      }
+    };
 
-            if (appstore) {
+    const watchDom = () => {
-                appstore.src = isDark ? appstoredark : appstorelight;
+      domObserver?.disconnect();
-            }
+      domObserver = new MutationObserver(updateIcons);
+      domObserver.observe(document.body, { childList: true, subtree: true });
+    };
 
-            if (googleplay && appstore) {
+    const stopDomWatch = () => {
-                googleplay.src = gplayicon;
+      domObserver?.disconnect();
-                googleplay.style.width = `130px`;
+      domObserver = null;
-                googleplay.style.height = `40px`;
+    };
-                googleplay.style.objectFit = "contain";
-                googleplay.style.flexShrink = "0";
-                googleplay.style.marginLeft = "8px";
-            }
-        };
 
-        const ensureObserver = () => {
+    const onSettingsPage = (page: string) => {
-            observer?.disconnect();
+      if (page === "settings") {
+        updateIcons();
+        watchDom();
+      } else {
+        stopDomWatch();
+      }
+    };
 
-            observer = new MutationObserver(() => {
+    const pageChange = api.seqta.onPageChange(onSettingsPage);
-                updateIcons();
-            });
 
-            observer.observe(document.body, {
+    const themeObserver = new MutationObserver(updateIcons);
-                childList: true,
+    themeObserver.observe(document.documentElement, {
-                subtree: true,
+      attributes: true,
-            });
+      attributeFilter: ["class"],
-        };
+    });
 
-        const onHashChange = () => {
+    onSettingsPage(api.seqta.getCurrentPage());
-            if (window.location.hash === "#?page=/settings") {
-                updateIcons();
-                ensureObserver();
-            } else {
-                observer?.disconnect();
-                observer = null;
-            }
-        };
 
-        window.addEventListener("hashchange", onHashChange);
+    return () => {
-
+      pageChange.unregister();
-        classObserver = new MutationObserver(updateIcons);
+      stopDomWatch();
-        classObserver.observe(document.documentElement, {
+      themeObserver.disconnect();
-            attributes: true,
+    };
-            attributeFilter: ["class"],
+  },
-        });
-
-        if (window.location.hash === "#?page=/settings") {
-            updateIcons();
-            ensureObserver();
-        }
-    },
 };
 
 export default appIconPlugin;

src/plugins/built-in/appIcons/styles.css

@@ -0,0 +1,7 @@
+.bsplus-googleplay-badge {
+  width: 130px;
+  height: 40px;
+  object-fit: contain;
+  flex-shrink: 0;
+  margin-left: 8px;
+}