diff --git a/src/plugins/built-in/appIcons/index.ts b/src/plugins/built-in/appIcons/index.ts index 87da0363..28e4ef21 100644 --- a/src/plugins/built-in/appIcons/index.ts +++ b/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", - name: "App Icons", - description: "Fixes the unthemed playstore and app store icons in the SEQTA download page in settings.", - version: "1.0.0", - settings: {}, - disableToggle: true, + id: "app-icons", + name: "App Icons", + description: + "Fixes unthemed App Store and Google Play icons on the SEQTA settings download page.", + version: "1.0.0", + settings: {}, + disableToggle: true, + styles, - run: async (api) => { - const appstoreSelector = - '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'; + run: async (api) => { + let domObserver: MutationObserver | null = null; - let observer: MutationObserver | null = null; - let classObserver: MutationObserver | null = null; + const updateIcons = () => { + const appstore = document.querySelector(APPSTORE); + const googleplay = document.querySelector(GOOGLEPLAY); + const dark = document.documentElement.classList.contains("dark"); - const updateIcons = () => { - const appstore = - document.querySelector(appstoreSelector); - const googleplay = - document.querySelector(googleplaySelector); + if (appstore) { + appstore.src = dark ? APPSTORE_DARK : APPSTORE_LIGHT; + } - const isDark = - document.documentElement.classList.contains("dark"); + if (googleplay) { + googleplay.src = GOOGLEPLAY_ICON; + googleplay.classList.add("bsplus-googleplay-badge"); + } + }; - if (appstore) { - appstore.src = isDark ? appstoredark : appstorelight; - } + const watchDom = () => { + domObserver?.disconnect(); + domObserver = new MutationObserver(updateIcons); + domObserver.observe(document.body, { childList: true, subtree: true }); + }; - if (googleplay && appstore) { - googleplay.src = gplayicon; - googleplay.style.width = `130px`; - googleplay.style.height = `40px`; - googleplay.style.objectFit = "contain"; - googleplay.style.flexShrink = "0"; - googleplay.style.marginLeft = "8px"; - } - }; + const stopDomWatch = () => { + domObserver?.disconnect(); + domObserver = null; + }; - const ensureObserver = () => { - observer?.disconnect(); + const onSettingsPage = (page: string) => { + if (page === "settings") { + updateIcons(); + watchDom(); + } else { + stopDomWatch(); + } + }; - observer = new MutationObserver(() => { - updateIcons(); - }); + const pageChange = api.seqta.onPageChange(onSettingsPage); - observer.observe(document.body, { - childList: true, - subtree: true, - }); - }; + const themeObserver = new MutationObserver(updateIcons); + themeObserver.observe(document.documentElement, { + attributes: true, + attributeFilter: ["class"], + }); - const onHashChange = () => { - if (window.location.hash === "#?page=/settings") { - updateIcons(); - ensureObserver(); - } else { - observer?.disconnect(); - observer = null; - } - }; + onSettingsPage(api.seqta.getCurrentPage()); - window.addEventListener("hashchange", onHashChange); - - classObserver = new MutationObserver(updateIcons); - classObserver.observe(document.documentElement, { - attributes: true, - attributeFilter: ["class"], - }); - - if (window.location.hash === "#?page=/settings") { - updateIcons(); - ensureObserver(); - } - }, + return () => { + pageChange.unregister(); + stopDomWatch(); + themeObserver.disconnect(); + }; + }, }; export default appIconPlugin; diff --git a/src/plugins/built-in/appIcons/styles.css b/src/plugins/built-in/appIcons/styles.css new file mode 100644 index 00000000..518fe3f9 --- /dev/null +++ b/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; +}