Code Review

This commit is contained in:
2025-09-09 19:20:30 +10:00
parent 11d08b6403
commit d53fd08ee8
2 changed files with 27 additions and 22 deletions
+11 -11
View File
@@ -142,17 +142,17 @@ export const Settings = () => {
if (!hexColorRegex.test(trimmed)) return; if (!hexColorRegex.test(trimmed)) return;
if (mode === "single") { if (mode === "single") {
const next = normalizeToRGB(trimmed); const next = normalizeToRGB(trimmed);
setSingleColor(next);
settings.singleColor = next; settings.singleColor = next;
setSingleColor(next);
if (updateInput) setCustomInput(next); if (updateInput) setCustomInput(next);
} else if (mode === "gradient-experimental") { } else if (mode === "gradient-experimental") {
const next = normalizeToRGB(trimmed); const next = normalizeToRGB(trimmed);
if (activeEndpoint === "end") { if (activeEndpoint === "end") {
setGradientEnd(next);
settings.gradientEnd = next; settings.gradientEnd = next;
setGradientEnd(next);
} else { } else {
setGradientStart(next);
settings.gradientStart = next; settings.gradientStart = next;
setGradientStart(next);
} }
if (updateInput) setCustomInput(next); if (updateInput) setCustomInput(next);
} }
@@ -511,15 +511,15 @@ export const Settings = () => {
onClick={() => { onClick={() => {
const next = normalizeToRGB(color); const next = normalizeToRGB(color);
if (mode === "single") { if (mode === "single") {
setSingleColor(next);
settings.singleColor = next; settings.singleColor = next;
setSingleColor(next);
} else if (mode === "gradient-experimental") { } else if (mode === "gradient-experimental") {
if (activeEndpoint === "end") { if (activeEndpoint === "end") {
setGradientEnd(next);
settings.gradientEnd = next; settings.gradientEnd = next;
setGradientEnd(next);
} else { } else {
setGradientStart(next);
settings.gradientStart = next; settings.gradientStart = next;
setGradientStart(next);
} }
} }
setCustomInput(next); setCustomInput(next);
@@ -618,8 +618,8 @@ export const Settings = () => {
value={singleAlpha} value={singleAlpha}
onChange={(e) => { onChange={(e) => {
const value = Number(e.target.value); const value = Number(e.target.value);
setSingleAlpha(value);
settings.singleAlpha = value; settings.singleAlpha = value;
setSingleAlpha(value);
requestApply(); requestApply();
}} }}
style={{ width: "100%" }} style={{ width: "100%" }}
@@ -661,8 +661,8 @@ export const Settings = () => {
value={gradientStartAlpha} value={gradientStartAlpha}
onChange={(e) => { onChange={(e) => {
const value = Number(e.target.value); const value = Number(e.target.value);
setGradientStartAlpha(value);
settings.gradientStartAlpha = value; settings.gradientStartAlpha = value;
setGradientStartAlpha(value);
requestApply(); requestApply();
}} }}
style={{ width: "100%" }} style={{ width: "100%" }}
@@ -700,8 +700,8 @@ export const Settings = () => {
value={gradientEndAlpha} value={gradientEndAlpha}
onChange={(e) => { onChange={(e) => {
const value = Number(e.target.value); const value = Number(e.target.value);
setGradientEndAlpha(value);
settings.gradientEndAlpha = value; settings.gradientEndAlpha = value;
setGradientEndAlpha(value);
requestApply(); requestApply();
}} }}
style={{ width: "100%" }} style={{ width: "100%" }}
@@ -735,8 +735,8 @@ export const Settings = () => {
value={gradientAngle} value={gradientAngle}
onChange={(e) => { onChange={(e) => {
const value = Number(e.target.value); const value = Number(e.target.value);
setGradientAngle(value);
settings.gradientAngle = value; settings.gradientAngle = value;
setGradientAngle(value);
requestApply(); requestApply();
}} }}
style={{ width: "100%" }} style={{ width: "100%" }}
@@ -770,8 +770,8 @@ export const Settings = () => {
value={gradientAngle} value={gradientAngle}
onChange={(e) => { onChange={(e) => {
const value = Number(e.target.value); const value = Number(e.target.value);
setGradientAngle(value);
settings.gradientAngle = value; settings.gradientAngle = value;
setGradientAngle(value);
requestApply(); requestApply();
}} }}
style={{ width: "100%" }} style={{ width: "100%" }}
+16 -11
View File
@@ -54,18 +54,23 @@ export const Settings = () => {
settings.trackTitleGlow, settings.trackTitleGlow,
); );
// Use a permissive wrapper to align with current usage props // Derive props and override onChange to accept a broader first param type
type BaseSwitchProps = React.ComponentProps<typeof LunaSwitchSetting>;
type AnySwitchProps = Omit<BaseSwitchProps, "onChange"> & {
onChange: (_: unknown, checked: boolean) => void;
checked: boolean;
};
const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType< const AnySwitch = LunaSwitchSetting as unknown as React.ComponentType<
Record<string, unknown> AnySwitchProps
>; >;
return ( return (
<LunaSettings> <LunaSettings>
<AnySwitch <AnySwitch
title="Lyrics Glow Effect" title="Lyrics Glow Effect"
desc="Enable glowing effect for lyrics & Font Stytling Changes" desc="Enable glowing effect for lyrics & Font Styling Changes"
checked={lyricsGlowEnabled} checked={lyricsGlowEnabled}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked)); setLyricsGlowEnabled((settings.lyricsGlowEnabled = checked));
// Update styles immediately when setting changes // Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsStyles) { if ((window as any).updateRadiantLyricsStyles) {
@@ -77,7 +82,7 @@ export const Settings = () => {
title="Track Title Glow" title="Track Title Glow"
desc="Apply glow to the track title" desc="Apply glow to the track title"
checked={trackTitleGlow} checked={trackTitleGlow}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
setTrackTitleGlow((settings.trackTitleGlow = checked)); setTrackTitleGlow((settings.trackTitleGlow = checked));
if ((window as any).updateRadiantLyricsStyles) { if ((window as any).updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles(); (window as any).updateRadiantLyricsStyles();
@@ -88,7 +93,7 @@ export const Settings = () => {
title="Hide UI Feature" title="Hide UI Feature"
desc="Enable hide/unhide UI functionality with toggle buttons" desc="Enable hide/unhide UI functionality with toggle buttons"
checked={hideUIEnabled} checked={hideUIEnabled}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
setHideUIEnabled((settings.hideUIEnabled = checked)); setHideUIEnabled((settings.hideUIEnabled = checked));
}} }}
/> />
@@ -96,7 +101,7 @@ export const Settings = () => {
title="Player Bar Visibility in Hide UI Mode" title="Player Bar Visibility in Hide UI Mode"
desc="Keep player bar visible when UI is hidden" desc="Keep player bar visible when UI is hidden"
checked={playerBarVisible} checked={playerBarVisible}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
console.log("Player Bar Visibility:", checked ? "visible" : "hidden"); console.log("Player Bar Visibility:", checked ? "visible" : "hidden");
setPlayerBarVisible((settings.playerBarVisible = checked)); setPlayerBarVisible((settings.playerBarVisible = checked));
// Update styles immediately when setting changes // Update styles immediately when setting changes
@@ -109,7 +114,7 @@ export const Settings = () => {
title="Cover Everywhere" title="Cover Everywhere"
desc="Apply the spinning Cover Art background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia" desc="Apply the spinning Cover Art background to the entire app, not just the Now Playing view, Heavily Inspired by Cover-Theme by @Inrixia"
checked={spinningCoverEverywhere} checked={spinningCoverEverywhere}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
console.log( console.log(
"Spinning Cover Everywhere:", "Spinning Cover Everywhere:",
checked ? "enabled" : "disabled", checked ? "enabled" : "disabled",
@@ -127,7 +132,7 @@ export const Settings = () => {
title="Performance Mode | Experimental" title="Performance Mode | Experimental"
desc="Performance mode: Reduces blur effects & uses smaller image sizes, to optimize GPU usage" desc="Performance mode: Reduces blur effects & uses smaller image sizes, to optimize GPU usage"
checked={performanceMode} checked={performanceMode}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
console.log("Performance Mode:", checked ? "enabled" : "disabled"); console.log("Performance Mode:", checked ? "enabled" : "disabled");
setPerformanceMode((settings.performanceMode = checked)); setPerformanceMode((settings.performanceMode = checked));
// Update background animations immediately when setting changes // Update background animations immediately when setting changes
@@ -143,7 +148,7 @@ export const Settings = () => {
title="Background Cover Spin" // Cheers @Max/n0201 for the idea <3 title="Background Cover Spin" // Cheers @Max/n0201 for the idea <3
desc="Enable the spinning cover art background animation" desc="Enable the spinning cover art background animation"
checked={spinningArtEnabled} checked={spinningArtEnabled}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
console.log( console.log(
"Background Cover Spin:", "Background Cover Spin:",
checked ? "enabled" : "disabled", checked ? "enabled" : "disabled",
@@ -262,7 +267,7 @@ export const Settings = () => {
title="Settings Affect Now Playing" title="Settings Affect Now Playing"
desc="Apply background settings to Now Playing view" desc="Apply background settings to Now Playing view"
checked={settingsAffectNowPlaying} checked={settingsAffectNowPlaying}
onChange={(_: void, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
console.log( console.log(
"Settings Affect Now Playing:", "Settings Affect Now Playing:",
checked ? "enabled" : "disabled", checked ? "enabled" : "disabled",