CodeReview Changes

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

@@ -112,7 +112,8 @@ export const Settings = () => {
 				desc="Enable glowing effect for lyrics & Font Styling Changes"
 				checked={lyricsGlowEnabled}
 				onChange={(_: unknown, checked: boolean) => {
-					setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
+					settings.lyricsGlowEnabled = checked;
+				setLyricsGlowEnabled(checked);
 					// Update styles immediately when setting changes
 					if ((window as any).updateRadiantLyricsStyles) {
 						(window as any).updateRadiantLyricsStyles();
@@ -124,7 +125,8 @@ export const Settings = () => {
 				desc="Apply glow to the track title"
 				checked={trackTitleGlow}
 				onChange={(_: unknown, checked: boolean) => {
-					setTrackTitleGlow((settings.trackTitleGlow = checked));
+					settings.trackTitleGlow = checked;
+				setTrackTitleGlow(checked);
 					if ((window as any).updateRadiantLyricsStyles) {
 						(window as any).updateRadiantLyricsStyles();
 					}
@@ -139,7 +141,8 @@ export const Settings = () => {
 				step={1}
 				value={textGlow}
 				onNumber={(value: number) => {
-					setTextGlow((settings.textGlow = value));
+					settings.textGlow = value;
+				setTextGlow(value);
 					// Update variables immediately when setting changes
 					if ((window as any).updateRadiantLyricsTextGlow) {
 						(window as any).updateRadiantLyricsTextGlow();
@@ -152,7 +155,8 @@ export const Settings = () => {
 				desc="Adds a dropdown to the Lyrics tab that auto-switches to Play Queue when lyrics aren't available"
 				checked={stickyLyricsFeature}
 				onChange={(_: unknown, checked: boolean) => {
-					setStickyLyricsFeature((settings.stickyLyricsFeature = checked));
+					settings.stickyLyricsFeature = checked;
+				setStickyLyricsFeature(checked);
 					if ((window as any).updateStickyLyricsFeature) {
 						(window as any).updateStickyLyricsFeature();
 					}
@@ -163,7 +167,8 @@ export const Settings = () => {
 				desc="Enable hide/unhide UI functionality with toggle buttons"
 				checked={hideUIEnabled}
 				onChange={(_: unknown, checked: boolean) => {
-					setHideUIEnabled((settings.hideUIEnabled = checked));
+					settings.hideUIEnabled = checked;
+				setHideUIEnabled(checked);
 				}}
 			/>
 		{hideUIEnabled && (
@@ -173,7 +178,8 @@ export const Settings = () => {
 				checked={playerBarVisible}
 				onChange={(_: unknown, checked: boolean) => {
 					console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
-					setPlayerBarVisible((settings.playerBarVisible = checked));
+					settings.playerBarVisible = checked;
+				setPlayerBarVisible(checked);
 					// Update styles immediately when setting changes
 					if ((window as any).updateRadiantLyricsStyles) {
 						(window as any).updateRadiantLyricsStyles();
@@ -186,7 +192,8 @@ export const Settings = () => {
 				desc="Floating rounded player bar with backdrop blur"
 				checked={floatingPlayerBar}
 				onChange={(_: unknown, checked: boolean) => {
-					setFloatingPlayerBar((settings.floatingPlayerBar = checked));
+					settings.floatingPlayerBar = checked;
+				setFloatingPlayerBar(checked);
 					if ((window as any).updateRadiantLyricsStyles) {
 						(window as any).updateRadiantLyricsStyles();
 					}
@@ -202,7 +209,8 @@ export const Settings = () => {
 						step={1}
 						value={playerBarRadius}
 						onNumber={(value: number) => {
-							setPlayerBarRadius((settings.playerBarRadius = value));
+							settings.playerBarRadius = value;
+						setPlayerBarRadius(value);
 							(window as any).updateRadiantLyricsPlayerBarTint?.();
 						}}
 					/>
@@ -214,7 +222,8 @@ export const Settings = () => {
 						step={1}
 						value={playerBarSpacing}
 						onNumber={(value: number) => {
-							setPlayerBarSpacing((settings.playerBarSpacing = value));
+							settings.playerBarSpacing = value;
+						setPlayerBarSpacing(value);
 							(window as any).updateRadiantLyricsPlayerBarTint?.();
 						}}
 					/>
@@ -288,12 +297,14 @@ export const Settings = () => {
 							step={1}
 							value={playerBarTint}
 							onNumber={(value: number) => {
-								setPlayerBarTint((settings.playerBarTint = value));
+								settings.playerBarTint = value;
+							setPlayerBarTint(value);
 								(window as any).updateRadiantLyricsPlayerBarTint?.();
 							}}
 						/>
 						{/* Color swatch — positioned just left of the value box */}
 					<button
+						type="button"
 						onClick={() => showTintColorPicker ? closeTintColorPicker() : openTintColorPicker()}
 						style={{
 							width: "28px",
@@ -360,12 +371,13 @@ export const Settings = () => {
 											const isHovered = tintHoveredColorIndex === index;
 											return (
 											<div
-													kwey={index}
+												key={color}
 												style={{ position: "relative", width: "32px", height: "32px", cursor: "pointer" }}
 												onMouseEnter={() => setTintHoveredColorIndex(index)}
 												onMouseLeave={() => setTintHoveredColorIndex(null)}
 											>
 											<button
+													type="button"
 													onClick={() => { updateTintColor(color); closeTintColorPicker(); }}
 													style={{
 															width: "100%",
@@ -381,6 +393,7 @@ export const Settings = () => {
 													/>
 													{isCustomColor && (
 													<button
+														type="button"
 														onClick={(e) => { e.stopPropagation(); removeTintCustomColor(color); }}
 														style={{
 																position: "absolute",
@@ -437,6 +450,7 @@ export const Settings = () => {
 												}}
 											/>
 										<button
+											type="button"
 											onClick={() => { updateTintColor(tintCustomInput); addTintCustomColor(); }}
 											style={{
 												width: "32px", height: "32px",
@@ -460,6 +474,7 @@ export const Settings = () => {
 									</div>
 
 								<button
+									type="button"
 									onClick={closeTintColorPicker}
 									style={{
 										width: "100%",
@@ -489,9 +504,8 @@ export const Settings = () => {
 						"Spinning Cover Everywhere:",
 						checked ? "enabled" : "disabled",
 					);
-					setCoverEverywhere(
+					settings.CoverEverywhere = checked;
-						(settings.CoverEverywhere = checked),
+				setCoverEverywhere(checked);
-					);
 					// Update styles immediately when setting changes
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
@@ -505,7 +519,8 @@ export const Settings = () => {
 				checked={performanceMode}
 				onChange={(_: unknown, checked: boolean) => {
 					console.log("Performance Mode:", checked ? "enabled" : "disabled");
-					setPerformanceMode((settings.performanceMode = checked));
+					settings.performanceMode = checked;
+				setPerformanceMode(checked);
 					// Update background animations immediately when setting changes
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
@@ -526,7 +541,8 @@ export const Settings = () => {
 						"Background Cover Spin:",
 						checked ? "enabled" : "disabled",
 					);
-					setspinningArt((settings.spinningArt = checked));
+					settings.spinningArt = checked;
+				setspinningArt(checked);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -548,7 +564,8 @@ export const Settings = () => {
 				step={1}
 				value={backgroundScale}
 				onNumber={(value: number) => {
-					setBackgroundScale((settings.backgroundScale = value));
+					settings.backgroundScale = value;
+				setBackgroundScale(value);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -570,7 +587,8 @@ export const Settings = () => {
 				step={1}
 				value={backgroundRadius}
 				onNumber={(value: number) => {
-					setBackgroundRadius((settings.backgroundRadius = value));
+					settings.backgroundRadius = value;
+				setBackgroundRadius(value);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -592,7 +610,8 @@ export const Settings = () => {
 				step={1}
 				value={backgroundContrast}
 				onNumber={(value: number) => {
-					setBackgroundContrast((settings.backgroundContrast = value));
+					settings.backgroundContrast = value;
+				setBackgroundContrast(value);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -615,7 +634,8 @@ export const Settings = () => {
 				value={backgroundBlur}
 				onNumber={(value: number) => {
 					console.log("Background Blur:", value);
-					setBackgroundBlur((settings.backgroundBlur = value));
+					settings.backgroundBlur = value;
+				setBackgroundBlur(value);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -638,7 +658,8 @@ export const Settings = () => {
 				value={backgroundBrightness}
 				onNumber={(value: number) => {
 					console.log("Background Brightness:", value);
-					setBackgroundBrightness((settings.backgroundBrightness = value));
+					settings.backgroundBrightness = value;
+				setBackgroundBrightness(value);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -661,7 +682,8 @@ export const Settings = () => {
 				value={spinSpeed}
 				onNumber={(value: number) => {
 					console.log("Spin Speed:", value);
-					setSpinSpeed((settings.spinSpeed = value));
+					settings.spinSpeed = value;
+				setSpinSpeed(value);
 					if ((window as any).updateRadiantLyricsGlobalBackground) {
 						(window as any).updateRadiantLyricsGlobalBackground();
 					}
@@ -684,9 +706,8 @@ export const Settings = () => {
 						"Settings Affect Now Playing:",
 						checked ? "enabled" : "disabled",
 					);
-					setSettingsAffectNowPlaying(
+					settings.settingsAffectNowPlaying = checked;
-						(settings.settingsAffectNowPlaying = checked),
+				setSettingsAffectNowPlaying(checked);
-					);
 					// Update Now Playing background immediately when setting changes
 					if ((window as any).updateRadiantLyricsNowPlayingBackground) {
 						(window as any).updateRadiantLyricsNowPlayingBackground();

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

@@ -40,7 +40,13 @@ if (settings.lyricsGlowEnabled) {
 // Hex color to RGB
 // (i'm deranged and love Hexadecimal)
 const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
-	const cleaned = (hex || "#000000").replace("#", "");
+	let cleaned = (hex || "#000000").replace("#", "");
+	if (cleaned.length === 3) {
+		cleaned = cleaned[0] + cleaned[0] + cleaned[1] + cleaned[1] + cleaned[2] + cleaned[2];
+	}
+	if (cleaned.length !== 6) {
+		return { r: 0, g: 0, b: 0 };
+	}
 	return {
 		r: parseInt(cleaned.substring(0, 2), 16) || 0,
 		g: parseInt(cleaned.substring(2, 4), 16) || 0,