Add showTags setting for #14

Inrixia · Dec 20, 2023 · 4546fdc · 4546fdc
1 parent ba66c17
commit 4546fdc
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 59 deletions.
diff --git 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,48 @@ 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`<div class="settings-section">
-		<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>
+			<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 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>
 
-		<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>
+			<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>
 	</div>`;
 };
diff --git 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();
 };