Merge pull request #211 from Brskt/fix-tidaltags-dom-recycling

fix(TidalTags): properly update tags when DOM is recycled

Author: Inrixia

plugins/TidalTags/src/index.ts

@@ -11,7 +11,7 @@ export { Settings, unloads };
 
 new StyleTag("TidalTags", unloads, styles);
 
-observe(unloads, 'div[data-test="tracklist-row"]', async (trackRow) => {
+const updateTrackRow = async (trackRow: Element) => {
 	if (!settings.displayQalityTags && !settings.displayFormatColumns) return;
 	const trackId = trackRow.getAttribute("data-track-id");
 	if (trackId == null) return;
@@ -21,7 +21,25 @@ observe(unloads, 'div[data-test="tracklist-row"]', async (trackRow) => {
 
 	if (settings.displayQalityTags) setQualityTags(trackRow, mediaItem);
 	if (settings.displayFormatColumns) await setFormatColumns(trackRow, mediaItem);
+};
+
+// Observe new tracklist rows
+observe(unloads, 'div[data-test="tracklist-row"]', updateTrackRow);
+
+// Observe data-track-id attribute changes (DOM recycling)
+const attrObserver = new MutationObserver((mutations) => {
+	for (const mutation of mutations) {
+		if (mutation.type === "attributes" && mutation.attributeName === "data-track-id") {
+			updateTrackRow(mutation.target as Element);
+		}
+	}
+});
+attrObserver.observe(document.body, {
+	subtree: true,
+	attributes: true,
+	attributeFilter: ["data-track-id"],
 });
+unloads.add(() => attrObserver.disconnect());
 
 MediaItem.onMediaTransition(unloads, setFormatInfo);
 MediaItem.fromPlaybackContext().then(setFormatInfo);

plugins/TidalTags/src/lib/setColumn.ts

@@ -2,7 +2,11 @@ import { isElement } from "./isElement";
 
 export const setColumn = (trackRow: Element, name: string, sourceSelector: string, content: HTMLElement, beforeSelector?: string | Element) => {
 	let column = trackRow.querySelector<HTMLElement>(`div[data-test="${name}"]`);
-	if (column !== null) return;
+	if (column !== null) {
+		column.innerHTML = "";
+		column.appendChild(content);
+		return column;
+	}
 
 	const sourceColumn = trackRow.querySelector<HTMLElement>(sourceSelector);
 	if (sourceColumn === null) return;

plugins/TidalTags/src/setQualityTags.ts

@@ -6,14 +6,15 @@ export const setQualityTags = (trackRow: Element, mediaItem: MediaItem) => {
 
 	const { qualityTags, bestQuality } = mediaItem;
 	const id = String(mediaItem.id);
-	if (qualityTags.length === 0) return;
-
-	if (qualityTags.length === 1 && qualityTags[0] === Quality.High && bestQuality === Quality.High) return;
 
 	let span = trackTitle.querySelector(".quality-tag-container");
 	if (span?.getAttribute("track-id") === id) return;
 
+	// Remove old span before checking if we need a new one
 	span?.remove();
+
+	if (qualityTags.length === 0) return;
+	if (qualityTags.length === 1 && qualityTags[0] === Quality.High && bestQuality === Quality.High) return;
 	span = document.createElement("span");
 
 	span.className = "quality-tag-container";