From 80e31433fe92b9ad7487bd35f868415b14b8ad8e Mon Sep 17 00:00:00 2001
From: Inrixia <Inrixia@gmail.com>
Date: Wed, 20 Dec 2023 14:35:27 +1300
Subject: [PATCH] Fix for showTags #14

---
 plugins/TidalTags/src/Settings.ts | 67 +++++++++++++++----------------
 plugins/TidalTags/src/index.ts    | 31 +++++++-------
 2 files changed, 48 insertions(+), 50 deletions(-)

diff --git a/plugins/TidalTags/src/Settings.ts b/plugins/TidalTags/src/Settings.ts
index 5b6540d..da0df33 100644
--- a/plugins/TidalTags/src/Settings.ts
+++ b/plugins/TidalTags/src/Settings.ts
@@ -34,43 +34,42 @@ export const Settings = () => {
 		updateTrackLists();
 	};
 	return html`<div class="settings-section">
-			<h3 class="settings-header">Display Tags</h3>
-			<p class="settings-explainer">Display Quality Tags.</p>
-			<label class="switch">
-				<input type="checkbox" id="showAllQualities" onChange=${onChange("showAllQualities")} />
-				<span class="slider" />
-			</label>
+		<h3 class="settings-header">Display Tags</h3>
+		<p class="settings-explainer">Display Quality Tags.</p>
+		<label class="switch">
+			<input type="checkbox" id="showTags" onChange=${onChange("showTags")} />
+			<span class="slider" />
+		</label>
 
-			<h3 class="settings-header">Display all Qualities</h3>
-			<p class="settings-explainer">Display MQA if HiRes is avalible.</p>
-			<label class="switch">
-				<input type="checkbox" id="showTags" onChange=${onChange("showTags")} />
-				<span class="slider" />
-			</label>
+		<h3 class="settings-header">Display all Qualities</h3>
+		<p class="settings-explainer">Display MQA if HiRes is avalible.</p>
+		<label class="switch">
+			<input type="checkbox" id="showAllQualities" onChange=${onChange("showAllQualities")} />
+			<span class="slider" />
+		</label>
 
-			<br class="settings-spacer" />
-			<h3 class="settings-header">Display Atmos Quality</h3>
-			<p class="settings-explainer">Display the Atmos Quality tags.</p>
-			<label class="switch">
-				<input type="checkbox" id="showAtmosQuality" onChange=${onChange("showAtmosQuality")} />
-				<span class="slider" />
-			</label>
+		<br class="settings-spacer" />
+		<h3 class="settings-header">Display Atmos Quality</h3>
+		<p class="settings-explainer">Display the Atmos Quality tags.</p>
+		<label class="switch">
+			<input type="checkbox" id="showAtmosQuality" onChange=${onChange("showAtmosQuality")} />
+			<span class="slider" />
+		</label>
 
-			<br class="settings-spacer" />
-			<h3 class="settings-header">Show FLAC Info</h3>
-			<p class="settings-explainer">Show Sample Rate/Bit Depth</p>
-			<label class="switch">
-				<input type="checkbox" id="showFLACInfo" onChange=${onChange("showFLACInfo")} />
-				<span class="slider" />
-			</label>
+		<br class="settings-spacer" />
+		<h3 class="settings-header">Show FLAC Info</h3>
+		<p class="settings-explainer">Show Sample Rate/Bit Depth</p>
+		<label class="switch">
+			<input type="checkbox" id="showFLACInfo" onChange=${onChange("showFLACInfo")} />
+			<span class="slider" />
+		</label>
 
-			<br class="settings-spacer" />
-			<h3 class="settings-header">Show FLAC Info Border</h3>
-			<p class="settings-explainer">Show a border around the FLAC Info</p>
-			<label class="switch">
-				<input type="checkbox" id="showFLACInfoBorder" onChange=${onChange("showFLACInfoBorder")} />
-				<span class="slider" />
-			</label>
-		</div>
+		<br class="settings-spacer" />
+		<h3 class="settings-header">Show FLAC Info Border</h3>
+		<p class="settings-explainer">Show a border around the FLAC Info</p>
+		<label class="switch">
+			<input type="checkbox" id="showFLACInfoBorder" onChange=${onChange("showFLACInfoBorder")} />
+			<span class="slider" />
+		</label>
 	</div>`;
 };
diff --git a/plugins/TidalTags/src/index.ts b/plugins/TidalTags/src/index.ts
index 1d26c90..28ee599 100644
--- a/plugins/TidalTags/src/index.ts
+++ b/plugins/TidalTags/src/index.ts
@@ -13,30 +13,29 @@ const unloadIntercept = intercept(["playbackControls/SET_PLAYBACK_STATE", "playb
 	setTimeout(setStreamQualityIndicator);
 });
 
-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 = () => {
+const processItems = () => {
+	observer.disconnect();
+	updateTrackLists();
+	observer.observe(document.body, { childList: true, subtree: true });
+};
+
+let timeoutId: NodeJS.Timeout | null;
+const debouncedProcessItems = () => {
+	if (storage.showTags) {
 		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 });
-}
+const observer = new MutationObserver(debouncedProcessItems);
+// Start observing the document with the configured parameters
+observer.observe(document.body, { childList: true, subtree: true });
 
 export const onUnload = () => {
-	if (storage.showTags) observer.disconnect();
+	observer.disconnect();
 	unloadIntercept();
 };