TidalTags - Add setting for toggling display of info columns

Inrixia · Jun 20, 2024 · 2295cda · 2295cda
1 parent 1c1b897
commit 2295cda
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 32 deletions.
diff --git a/plugins/TidalTags/src/Settings.ts b/plugins/TidalTags/src/Settings.ts
@@ -5,7 +5,8 @@ import { storage } from "@plugin";
 storage.showTags ??= true;
 storage.showAtmosQuality ??= true;
 storage.showFLACInfoBorder ??= true;
-storage.InfoColumnColors ??= false;
+storage.infoColumnColors ??= false;
+storage.displayInfoColumns ??= true;
 export const Settings = () => {
 	setTimeout(() => {
 		const showTags = document.getElementById("showTags");
@@ -19,6 +20,9 @@ export const Settings = () => {
 
 		const infoColumnColors = document.getElementById("infoColumnColors");
 		if (infoColumnColors instanceof HTMLInputElement && infoColumnColors.checked !== storage.infoColumnColors) infoColumnColors.checked = storage.infoColumnColors;
+
+		const displayInfoColumns = document.getElementById("displayInfoColumns");
+		if (displayInfoColumns instanceof HTMLInputElement && displayInfoColumns.checked !== storage.displayInfoColumns) displayInfoColumns.checked = storage.displayInfoColumns;
 	});
 
 	const onChange = (key: string) => (e: { target: { checked: boolean } }) => {
@@ -55,5 +59,13 @@ export const Settings = () => {
 			<input type="checkbox" id="infoColumnColors" onChange=${onChange("infoColumnColors")} />
 			<span class="slider" />
 		</label>
+
+		<br class="settings-spacer" />
+		<h3 class="settings-header">Display FLAC Info Columns</h3>
+		<p class="settings-explainer">Toggles if the info columns are displayed or not</p>
+		<label class="switch">
+			<input type="checkbox" id="displayInfoColumns" onChange=${onChange("displayInfoColumns")} />
+			<span class="slider" />
+		</label>
 	</div>`;
 };
diff --git a/plugins/TidalTags/src/updateTrackElements.ts b/plugins/TidalTags/src/updateTrackElements.ts
@@ -95,13 +95,15 @@ const ensureColumnHeader = (trackList: Element, name: string, sourceSelector: st
 };
 
 export const updateTrackRow = async (trackRows: NodeListOf<Element>) => {
-	for (const trackList of document.querySelectorAll(`div[aria-label="Tracklist"]`)) {
-		const bitDepthColumn = ensureColumnHeader(trackList, "Depth", `span[class^="timeColumn--"][role="columnheader"]`, `span[class^="timeColumn--"][role="columnheader"]`);
-		bitDepthColumn?.style.setProperty("min-width", "40px");
-		const sampleRateColumn = ensureColumnHeader(trackList, "Sample Rate", `span[class^="timeColumn--"][role="columnheader"]`, bitDepthColumn);
-		sampleRateColumn?.style.setProperty("min-width", "110px");
-		const bitrateColumn = ensureColumnHeader(trackList, "Bitrate", `span[class^="timeColumn--"][role="columnheader"]`, sampleRateColumn);
-		bitrateColumn?.style.setProperty("min-width", "100px");
+	if (storage.displayInfoColumns) {
+		for (const trackList of document.querySelectorAll(`div[aria-label="Tracklist"]`)) {
+			const bitDepthColumn = ensureColumnHeader(trackList, "Depth", `span[class^="timeColumn--"][role="columnheader"]`, `span[class^="timeColumn--"][role="columnheader"]`);
+			bitDepthColumn?.style.setProperty("min-width", "40px");
+			const sampleRateColumn = ensureColumnHeader(trackList, "Sample Rate", `span[class^="timeColumn--"][role="columnheader"]`, bitDepthColumn);
+			sampleRateColumn?.style.setProperty("min-width", "110px");
+			const bitrateColumn = ensureColumnHeader(trackList, "Bitrate", `span[class^="timeColumn--"][role="columnheader"]`, sampleRateColumn);
+			bitrateColumn?.style.setProperty("min-width", "100px");
+		}
 	}
 	for (const trackRow of trackRows) {
 		const trackId = trackRow.getAttribute("data-track-id");
@@ -112,38 +114,40 @@ export const updateTrackRow = async (trackRows: NodeListOf<Element>) => {
 
 		setQualityTag(trackRow, trackId, trackItem);
 
-		const qualityTag = sortQualityTags(<QualityTag[]>trackItem.mediaMetadata?.tags)[0] ?? "LOW";
+		if (storage.displayInfoColumns) {
+			const qualityTag = sortQualityTags(<QualityTag[]>trackItem.mediaMetadata?.tags)[0] ?? "LOW";
 
-		const audioQuality = lookupItemQuality(qualityTag, trackItem.audioQuality);
-		if (audioQuality === undefined) continue;
+			const audioQuality = lookupItemQuality(qualityTag, trackItem.audioQuality);
+			if (audioQuality === undefined) continue;
 
-		const bitDepthContent = document.createElement("span");
+			const bitDepthContent = document.createElement("span");
 
-		const bitDepthColumn = setColumn(trackRow, "Depth", `div[data-test="duration"]`, bitDepthContent, `div[data-test="duration"]`);
-		bitDepthColumn?.style.setProperty("min-width", "40px");
+			const bitDepthColumn = setColumn(trackRow, "Depth", `div[data-test="duration"]`, bitDepthContent, `div[data-test="duration"]`);
+			bitDepthColumn?.style.setProperty("min-width", "40px");
 
-		const sampleRateContent = document.createElement("span");
+			const sampleRateContent = document.createElement("span");
 
-		const sampleRateColumn = setColumn(trackRow, "Sample Rate", `div[data-test="duration"]`, sampleRateContent, bitDepthColumn);
-		sampleRateColumn?.style.setProperty("min-width", "110px");
+			const sampleRateColumn = setColumn(trackRow, "Sample Rate", `div[data-test="duration"]`, sampleRateContent, bitDepthColumn);
+			sampleRateColumn?.style.setProperty("min-width", "110px");
 
-		const bitrateContent = document.createElement("span");
+			const bitrateContent = document.createElement("span");
 
-		const bitrateColumn = setColumn(trackRow, "Bitrate", `div[data-test="duration"]`, bitrateContent, sampleRateColumn);
-		bitrateColumn?.style.setProperty("min-width", "100px");
+			const bitrateColumn = setColumn(trackRow, "Bitrate", `div[data-test="duration"]`, bitrateContent, sampleRateColumn);
+			bitrateColumn?.style.setProperty("min-width", "100px");
 
-		if (storage.infoColumnColors) {
-			const qualityColor = QualityMeta[qualityTag]?.color ?? "";
-			bitDepthContent.style.color = qualityColor;
-			sampleRateContent.style.color = qualityColor;
-			bitrateContent.style.color = qualityColor;
-		}
+			if (storage.infoColumnColors) {
+				const qualityColor = QualityMeta[qualityTag]?.color ?? "";
+				bitDepthContent.style.color = qualityColor;
+				sampleRateContent.style.color = qualityColor;
+				bitrateContent.style.color = qualityColor;
+			}
 
-		TrackInfoCache.register(trackId, audioQuality, async (trackInfoP) => {
-			const trackInfo = await trackInfoP;
-			if (!!trackInfo?.sampleRate) sampleRateContent.textContent = `${trackInfo.sampleRate / 1000}kHz`;
-			if (!!trackInfo?.bitDepth) bitDepthContent.textContent = `${trackInfo.bitDepth}bit`;
-			if (!!trackInfo?.bitrate) bitrateContent.textContent = `${Math.floor(trackInfo.bitrate / 1000)}kbps`;
-		});
+			TrackInfoCache.register(trackId, audioQuality, async (trackInfoP) => {
+				const trackInfo = await trackInfoP;
+				if (!!trackInfo?.sampleRate) sampleRateContent.textContent = `${trackInfo.sampleRate / 1000}kHz`;
+				if (!!trackInfo?.bitDepth) bitDepthContent.textContent = `${trackInfo.bitDepth}bit`;
+				if (!!trackInfo?.bitrate) bitrateContent.textContent = `${Math.floor(trackInfo.bitrate / 1000)}kbps`;
+			});
+		}
 	}
 };