Merge pull request #63 from meowarex/dev

Added Quality Matched Seeker Color

plugins/radiant-lyrics-luna/src/Settings.tsx

@@ -11,6 +11,7 @@ declare global {
 		updateRadiantLyricsGlobalBackground?: () => void;
 		updateRadiantLyricsNowPlayingBackground?: () => void;
 		updateStickyLyricsIcon?: () => void;
+		updateQualityProgressColor?: () => void;
 	}
 }
 
@@ -19,6 +20,7 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
 	trackTitleGlow: false,
 	hideUIEnabled: true,
 	playerBarVisible: false,
+	qualityProgressColor: true,
 	floatingPlayerBar: true,
 	playerBarTint: 5,
 	playerBarTintColor: "#000000" as string,
@@ -106,6 +108,9 @@ export const Settings = () => {
 	const [stickyLyricsFeature, setStickyLyricsFeature] = React.useState(
 		settings.stickyLyricsFeature,
 	);
+	const [qualityProgressColor, setQualityProgressColor] = React.useState(
+		settings.qualityProgressColor,
+	);
 
 	// Derive props and override onChange to accept a broader first param type
 	type BaseSwitchProps = React.ComponentProps<typeof LunaSwitchSetting>;
@@ -199,6 +204,18 @@ export const Settings = () => {
 				}}
 			/>
 		)}
+			<AnySwitch
+				title="Quality Matched Seeker Color"
+				desc="Color the progress/seeker bar based on streaming quality"
+				checked={qualityProgressColor}
+				onChange={(_: unknown, checked: boolean) => {
+					settings.qualityProgressColor = checked;
+				setQualityProgressColor(checked);
+					if (window.updateQualityProgressColor) {
+						window.updateQualityProgressColor();
+					}
+				}}
+			/>
 			<AnySwitch
 				title="Floating Player Bar"
 				desc="Floating rounded player bar with backdrop blur"

plugins/radiant-lyrics-luna/src/index.ts

@@ -22,7 +22,6 @@ export { Settings };
 // clean up resources
 export const unloads = new Set<LunaUnload>();
 
-// Marker: Styles and Settings Integration
 // StyleTag instances for different CSS modules
 const lyricsStyleTag = new StyleTag("RadiantLyrics-lyrics", unloads);
 const baseStyleTag = new StyleTag("RadiantLyrics-base", unloads);
@@ -100,7 +99,53 @@ observe<HTMLElement>(unloads, '[data-test="footer-player"]', () => {
 	applyPlayerBarTintToElement();
 });
 
-// Apply base styles always (contains global fixes and conditional UI hiding styles)
+// MARKER: Quality-Based Seeker Color
+// Maps data-test-media-state-indicator-streaming-quality values to colors
+const qualityColors: Record<string, string> = {
+	HI_RES_LOSSLESS: "#ffd432", //Max
+	LOSSLESS: "#3fe", 			//High
+	HIGH: "#FFFFFF", 			//Low
+};
+
+const applyQualityProgressColor = (): void => {
+	const progressIndicator = document.querySelector(
+		'[data-test="progress-indicator"]',
+	) as HTMLElement | null;
+	if (!progressIndicator) return;
+
+	// Remove inline style if disabled
+	if (!settings.qualityProgressColor) {
+		progressIndicator.style.removeProperty("background-color");
+		return;
+	}
+
+	// Read quality from the media-state tag
+	// (using data-test-media-state-indicator-streaming-quality)
+	const qualityButton = document.querySelector(
+		"[data-test-media-state-indicator-streaming-quality]",
+	) as HTMLElement | null;
+	if (!qualityButton) return;
+
+	const quality = qualityButton.getAttribute("data-test-media-state-indicator-streaming-quality") ?? "";
+	const color = qualityColors[quality];
+	if (!color) return;
+
+	progressIndicator.style.setProperty("background-color", color, "important");
+};
+
+// Called Settings
+const updateQualityProgressColor = (): void => {
+	applyQualityProgressColor();
+};
+
+function setupQualityProgressObserver(): void {
+	// Apply on load (uses observeTrackChanges instead of polling yay me <3)
+	if (settings.qualityProgressColor) {
+		applyQualityProgressColor();
+	}
+}
+
+// Apply base styles always (I kinda dont really remember what this does but it's important i guess)
 baseStyleTag.css = baseStyles;
 
 // Update CSS variables for lyrics text glow based on settings
@@ -861,6 +906,7 @@ const updateRadiantLyricsNowPlayingBackground = function (): void {
 	updateRadiantLyricsNowPlayingBackground;
 (window as any).updateRadiantLyricsTextGlow = updateRadiantLyricsTextGlow;
 (window as any).updateRadiantLyricsPlayerBarTint = updateRadiantLyricsPlayerBarTint;
+(window as any).updateQualityProgressColor = updateQualityProgressColor;
 
 const cleanUpDynamicArt = function (): void {
 	// Clean up cached Now Playing elements
@@ -1224,6 +1270,7 @@ const observeTrackChanges = (): void => {
 		if (currentTrackId && currentTrackId !== lastTrackId) {
 			lastTrackId = currentTrackId;
 			updateCoverArtBackground();
+			if (settings.qualityProgressColor) applyQualityProgressColor();
 			checkCount = 0;
 			currentInterval = 250;
 		}
@@ -1237,6 +1284,7 @@ const observeTrackChanges = (): void => {
 	if (currentTrackId) {
 		lastTrackId = currentTrackId;
 		setTimeout(() => updateCoverArtBackground(), 100);
+		if (settings.qualityProgressColor) setTimeout(() => applyQualityProgressColor(), 100);
 	}
 };
 
@@ -1289,3 +1337,4 @@ setupNowPlayingObserver();
 setupTrackTitleObserver();
 observeTrackChanges();
 setupStickyLyricsObserver();
+setupQualityProgressObserver();