From 2295cdabd2bf55c8215097b1fab511cd67c74108 Mon Sep 17 00:00:00 2001 From: Inrixia Date: Thu, 20 Jun 2024 12:34:58 +1200 Subject: [PATCH] TidalTags - Add setting for toggling display of info columns --- plugins/TidalTags/src/Settings.ts | 14 ++++- plugins/TidalTags/src/updateTrackElements.ts | 66 +++++++++++--------- 2 files changed, 48 insertions(+), 32 deletions(-) diff --git a/plugins/TidalTags/src/Settings.ts b/plugins/TidalTags/src/Settings.ts index e1d3d53..464d487 100644 --- 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 = () => { + +
+

Display FLAC Info Columns

+

Toggles if the info columns are displayed or not

+ `; }; diff --git a/plugins/TidalTags/src/updateTrackElements.ts b/plugins/TidalTags/src/updateTrackElements.ts index 0d043ec..6f06762 100644 --- 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) => { - 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) => { setQualityTag(trackRow, trackId, trackItem); - const qualityTag = sortQualityTags(trackItem.mediaMetadata?.tags)[0] ?? "LOW"; + if (storage.displayInfoColumns) { + const qualityTag = sortQualityTags(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`; + }); + } } };