Flow Refactor

plugins/oled-theme-luna/src/index.ts

@@ -31,11 +31,17 @@ const getQualityColor = (audioQuality: string): string => {
 		return QUALITY_COLORS.MAX;
 	} else if (quality?.includes("LOSSLESS")) {
 		return QUALITY_COLORS.HIGH;
-	} else {
+	} else if (quality?.includes("HIGH")) {
+		return QUALITY_COLORS.HIGH;
+	} else if (quality?.includes("LOW")) {
 		return QUALITY_COLORS.LOW;
 	}
+	return QUALITY_COLORS.LOW;
 };
 
+// Interval tracking for quality monitoring
+let qualityMonitoringIntervalId: number | null = null;
+
 // Function to Reset Seek Bar Color (if setting gets disabled while playing)
 const resetSeekBarColor = async (): Promise<void> => {
 	try {
@@ -82,17 +88,16 @@ const applyQualityColors = async (): Promise<void> => {
 
 // Function to monitor track changes using track ID
 const setupQualityMonitoring = (): void => {
+	if (qualityMonitoringIntervalId != null) return;
 	let lastTrackId: string | null = null;
-	const interval = setInterval(() => {
+	qualityMonitoringIntervalId = window.setInterval(() => {
 		if (!settings.qualityColorMatchedSeekBar) return;
 		const currentTrackId = PlayState.playbackContext?.actualProductId;
 		if (currentTrackId && currentTrackId !== lastTrackId) {
-			//trace.msg.log(`[OLED Theme] Track ID changed: ${lastTrackId} -> ${currentTrackId}`);
 			lastTrackId = currentTrackId;
 			applyQualityColors();
 		}
 	}, 250);
-	unloads.add(() => clearInterval(interval));
 
 	// Initial color application (if a track is already loaded)
 	const currentTrackId = PlayState.playbackContext?.actualProductId;
@@ -102,6 +107,13 @@ const setupQualityMonitoring = (): void => {
 	}
 };
 
+const stopQualityMonitoring = (): void => {
+	if (qualityMonitoringIntervalId != null) {
+		window.clearInterval(qualityMonitoringIntervalId);
+		qualityMonitoringIntervalId = null;
+	}
+};
+
 // Function to apply theme styles based on current settings
 const applyThemeStyles = (): void => {
 	// Choose the appropriate CSS file based on settings
@@ -126,8 +138,9 @@ const applyThemeStyles = (): void => {
 		);
 		setupQualityMonitoring();
 	} else {
-		// If disabling, reset the seek bar color
+		// If disabling, reset the seek bar color and stop monitoring
 		resetSeekBarColor();
+		stopQualityMonitoring();
 	}
 
 	// Apply the selected theme using StyleTag
@@ -145,3 +158,8 @@ window.updateOLEDThemeStyles = applyThemeStyles;
 
 // Apply the OLED theme initially
 applyThemeStyles();
+
+// Ensure interval is cleared on unload
+unloads.add(() => {
+	stopQualityMonitoring();
+});

plugins/oled-theme-luna/src/light-theme.css

@@ -145,7 +145,7 @@
 
 [data-test="current-media-imagery"] {
 	border: 0 !important;
-	margin: none;
+	margin: 0;
 }
 
 [class^="_imageBorder"] {

plugins/oled-theme-luna/src/oled-friendly.css

@@ -120,7 +120,7 @@
 
 [data-test="current-media-imagery"] {
 	border: 0 !important;
-	margin: none;
+	margin: 0;
 }
 
 [class^="_imageBorder"] {