diff --git a/plugins/TidalTags/src/Settings.ts b/plugins/TidalTags/src/Settings.ts index 9b2c5aa..02ec1d2 100644 --- a/plugins/TidalTags/src/Settings.ts +++ b/plugins/TidalTags/src/Settings.ts @@ -5,12 +5,16 @@ import { storage } from "@plugin"; import { setStreamQualityIndicator } from "./streamQualitySelector"; import { updateTrackLists } from "./updateTrackElements"; +storage.showTags ??= true; storage.showFLACInfo ??= true; storage.showFLACInfoBorder ??= false; storage.showAllQualities ??= true; storage.showAtmosQuality ??= true; export const Settings = () => { setTimeout(() => { + const showTags = document.getElementById("showTags"); + if (showTags instanceof HTMLInputElement && showTags.checked !== storage.showTags) showTags!.checked = storage.showTags; + const showFLACInfo = document.getElementById("showFLACInfo"); if (showFLACInfo instanceof HTMLInputElement && showFLACInfo.checked !== storage.showFLACInfo) showFLACInfo!.checked = storage.showFLACInfo; @@ -25,53 +29,49 @@ export const Settings = () => { }); const onChange = (key: string) => (e: { target: { checked: boolean } }) => { - switch (key) { - case "showFLACInfo": - storage.showFLACInfo = e.target.checked; - break; - case "showFLACInfoBorder": - storage.showFLACInfoBorder = e.target.checked; - break; - case "showAllQualities": - storage.showAllQualities = e.target.checked; - break; - case "showAtmosQuality": - storage.showAtmosQuality = e.target.checked; - break; - } + storage[key] = e.target.checked; setStreamQualityIndicator(); updateTrackLists(); }; return html`
-

Display all Qualities

-

Display MQA if HiRes is avalible.

+

Display Tags

+

Display Quality Tags.

-
-

Display Atmos Quality

-

Display the Atmos Quality tags.

- +
+

Display all Qualities

+

Display MQA if HiRes is avalible.

+ -
-

Show FLAC Info

-

Show Sample Rate/Bit Depth

- +
+

Display Atmos Quality

+

Display the Atmos Quality tags.

+ -
-

Show FLAC Info Border

-

Show a border around the FLAC Info

- +
+

Show FLAC Info

+

Show Sample Rate/Bit Depth

+ + +
+

Show FLAC Info Border

+

Show a border around the FLAC Info

+ +
`; }; diff --git a/plugins/TidalTags/src/index.ts b/plugins/TidalTags/src/index.ts index 6f3ede1..1d26c90 100644 --- a/plugins/TidalTags/src/index.ts +++ b/plugins/TidalTags/src/index.ts @@ -6,31 +6,37 @@ import "./style"; import { updateTrackLists } from "./updateTrackElements"; export { Settings } from "./Settings"; +// @ts-expect-error Remove this when types are available +import { storage } from "@plugin"; const unloadIntercept = intercept(["playbackControls/SET_PLAYBACK_STATE", "playbackControls/MEDIA_PRODUCT_TRANSITION"], () => { setTimeout(setStreamQualityIndicator); }); -const processItems = () => { - observer.disconnect(); - updateTrackLists(); - observer.observe(document.body, { childList: true, subtree: true }); -}; +let observer: MutationObserver; +if (storage.showTags) { + const processItems = () => { + observer.disconnect(); + updateTrackLists(); + observer.observe(document.body, { childList: true, subtree: true }); + }; -let timeoutId: NodeJS.Timeout | null; -const debouncedProcessItems = () => { - if (timeoutId === null) processItems(); - else clearTimeout(timeoutId); - timeoutId = setTimeout(() => { - processItems(); - timeoutId = null; - }, 5); -}; -const observer = new MutationObserver(debouncedProcessItems); -// Start observing the document with the configured parameters -observer.observe(document.body, { childList: true, subtree: true }); + let timeoutId: NodeJS.Timeout | null; + const debouncedProcessItems = () => { + if (timeoutId === null) processItems(); + else clearTimeout(timeoutId); + timeoutId = setTimeout(() => { + processItems(); + timeoutId = null; + }, 5); + }; + + observer = new MutationObserver(debouncedProcessItems); + // Start observing the document with the configured parameters + observer.observe(document.body, { childList: true, subtree: true }); +} export const onUnload = () => { - observer.disconnect(); + if (storage.showTags) observer.disconnect(); unloadIntercept(); };