This commit is contained in:
2026-02-11 20:54:57 +11:00
parent b27f0ca165
commit 422d03a54e
+73 -54
View File
@@ -2,6 +2,18 @@ import { ReactiveStore } from "@luna/core";
import { LunaSettings, LunaSwitchSetting, LunaNumberSetting } from "@luna/ui"; import { LunaSettings, LunaSwitchSetting, LunaNumberSetting } from "@luna/ui";
import React from "react"; import React from "react";
declare global {
interface Window {
updateRadiantLyricsStyles?: () => void;
updateRadiantLyricsTextGlow?: () => void;
updateStickyLyricsFeature?: () => void;
updateRadiantLyricsPlayerBarTint?: () => void;
updateRadiantLyricsGlobalBackground?: () => void;
updateRadiantLyricsNowPlayingBackground?: () => void;
updateStickyLyricsIcon?: () => void;
}
}
export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", { export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
lyricsGlowEnabled: true, lyricsGlowEnabled: true,
trackTitleGlow: false, trackTitleGlow: false,
@@ -115,8 +127,8 @@ export const Settings = () => {
settings.lyricsGlowEnabled = checked; settings.lyricsGlowEnabled = checked;
setLyricsGlowEnabled(checked); setLyricsGlowEnabled(checked);
// Update styles immediately when setting changes // Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsStyles) { if (window.updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles(); window.updateRadiantLyricsStyles();
} }
}} }}
/> />
@@ -127,8 +139,8 @@ export const Settings = () => {
onChange={(_: unknown, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
settings.trackTitleGlow = checked; settings.trackTitleGlow = checked;
setTrackTitleGlow(checked); setTrackTitleGlow(checked);
if ((window as any).updateRadiantLyricsStyles) { if (window.updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles(); window.updateRadiantLyricsStyles();
} }
}} }}
/> />
@@ -144,8 +156,8 @@ export const Settings = () => {
settings.textGlow = value; settings.textGlow = value;
setTextGlow(value); setTextGlow(value);
// Update variables immediately when setting changes // Update variables immediately when setting changes
if ((window as any).updateRadiantLyricsTextGlow) { if (window.updateRadiantLyricsTextGlow) {
(window as any).updateRadiantLyricsTextGlow(); window.updateRadiantLyricsTextGlow();
} }
}} }}
/> />
@@ -157,8 +169,8 @@ export const Settings = () => {
onChange={(_: unknown, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
settings.stickyLyricsFeature = checked; settings.stickyLyricsFeature = checked;
setStickyLyricsFeature(checked); setStickyLyricsFeature(checked);
if ((window as any).updateStickyLyricsFeature) { if (window.updateStickyLyricsFeature) {
(window as any).updateStickyLyricsFeature(); window.updateStickyLyricsFeature();
} }
}} }}
/> />
@@ -181,8 +193,8 @@ export const Settings = () => {
settings.playerBarVisible = checked; settings.playerBarVisible = checked;
setPlayerBarVisible(checked); setPlayerBarVisible(checked);
// Update styles immediately when setting changes // Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsStyles) { if (window.updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles(); window.updateRadiantLyricsStyles();
} }
}} }}
/> />
@@ -194,8 +206,8 @@ export const Settings = () => {
onChange={(_: unknown, checked: boolean) => { onChange={(_: unknown, checked: boolean) => {
settings.floatingPlayerBar = checked; settings.floatingPlayerBar = checked;
setFloatingPlayerBar(checked); setFloatingPlayerBar(checked);
if ((window as any).updateRadiantLyricsStyles) { if (window.updateRadiantLyricsStyles) {
(window as any).updateRadiantLyricsStyles(); window.updateRadiantLyricsStyles();
} }
}} }}
/> />
@@ -211,7 +223,7 @@ export const Settings = () => {
onNumber={(value: number) => { onNumber={(value: number) => {
settings.playerBarRadius = value; settings.playerBarRadius = value;
setPlayerBarRadius(value); setPlayerBarRadius(value);
(window as any).updateRadiantLyricsPlayerBarTint?.(); window.updateRadiantLyricsPlayerBarTint?.();
}} }}
/> />
<LunaNumberSetting <LunaNumberSetting
@@ -224,7 +236,7 @@ export const Settings = () => {
onNumber={(value: number) => { onNumber={(value: number) => {
settings.playerBarSpacing = value; settings.playerBarSpacing = value;
setPlayerBarSpacing(value); setPlayerBarSpacing(value);
(window as any).updateRadiantLyricsPlayerBarTint?.(); window.updateRadiantLyricsPlayerBarTint?.();
}} }}
/> />
</> </>
@@ -248,7 +260,7 @@ export const Settings = () => {
setPlayerBarTintColor(color); setPlayerBarTintColor(color);
setTintCustomInput(color); setTintCustomInput(color);
settings.playerBarTintColor = color; settings.playerBarTintColor = color;
(window as any).updateRadiantLyricsPlayerBarTint?.(); window.updateRadiantLyricsPlayerBarTint?.();
}; };
const addTintCustomColor = () => { const addTintCustomColor = () => {
@@ -299,7 +311,7 @@ export const Settings = () => {
onNumber={(value: number) => { onNumber={(value: number) => {
settings.playerBarTint = value; settings.playerBarTint = value;
setPlayerBarTint(value); setPlayerBarTint(value);
(window as any).updateRadiantLyricsPlayerBarTint?.(); window.updateRadiantLyricsPlayerBarTint?.();
}} }}
/> />
{/* Color swatch — positioned just left of the value box */} {/* Color swatch — positioned just left of the value box */}
@@ -327,7 +339,10 @@ export const Settings = () => {
{/* Color Picker Modal */} {/* Color Picker Modal */}
{shouldRenderTintPicker && ( {shouldRenderTintPicker && (
<> <>
<div <button
type="button"
aria-label="Close color picker"
onClick={closeTintColorPicker}
style={{ style={{
position: "fixed", position: "fixed",
top: 0, left: 0, right: 0, bottom: 0, top: 0, left: 0, right: 0, bottom: 0,
@@ -335,8 +350,11 @@ export const Settings = () => {
zIndex: 1000, zIndex: 1000,
opacity: isTintAnimatingIn ? 1 : 0, opacity: isTintAnimatingIn ? 1 : 0,
transition: "opacity 0.2s ease", transition: "opacity 0.2s ease",
border: "none",
padding: 0,
cursor: "default",
width: "100%",
}} }}
onClick={closeTintColorPicker}
/> />
<div <div
style={{ style={{
@@ -370,6 +388,7 @@ export const Settings = () => {
const isCustomColor = tintCustomColors.includes(color); const isCustomColor = tintCustomColors.includes(color);
const isHovered = tintHoveredColorIndex === index; const isHovered = tintHoveredColorIndex === index;
return ( return (
// biome-ignore lint/a11y/noStaticElementInteractions: cosmetic hover tracking on wrapper containing interactive buttons
<div <div
key={color} key={color}
style={{ position: "relative", width: "32px", height: "32px", cursor: "pointer" }} style={{ position: "relative", width: "32px", height: "32px", cursor: "pointer" }}
@@ -507,8 +526,8 @@ export const Settings = () => {
settings.CoverEverywhere = checked; settings.CoverEverywhere = checked;
setCoverEverywhere(checked); setCoverEverywhere(checked);
// Update styles immediately when setting changes // Update styles immediately when setting changes
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
}} }}
/> />
@@ -522,11 +541,11 @@ export const Settings = () => {
settings.performanceMode = checked; settings.performanceMode = checked;
setPerformanceMode(checked); setPerformanceMode(checked);
// Update background animations immediately when setting changes // Update background animations immediately when setting changes
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ((window as any).updateRadiantLyricsNowPlayingBackground) { if (window.updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -543,14 +562,14 @@ export const Settings = () => {
); );
settings.spinningArt = checked; settings.spinningArt = checked;
setspinningArt(checked); setspinningArt(checked);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -566,14 +585,14 @@ export const Settings = () => {
onNumber={(value: number) => { onNumber={(value: number) => {
settings.backgroundScale = value; settings.backgroundScale = value;
setBackgroundScale(value); setBackgroundScale(value);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -589,14 +608,14 @@ export const Settings = () => {
onNumber={(value: number) => { onNumber={(value: number) => {
settings.backgroundRadius = value; settings.backgroundRadius = value;
setBackgroundRadius(value); setBackgroundRadius(value);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -612,14 +631,14 @@ export const Settings = () => {
onNumber={(value: number) => { onNumber={(value: number) => {
settings.backgroundContrast = value; settings.backgroundContrast = value;
setBackgroundContrast(value); setBackgroundContrast(value);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -636,14 +655,14 @@ export const Settings = () => {
console.log("Background Blur:", value); console.log("Background Blur:", value);
settings.backgroundBlur = value; settings.backgroundBlur = value;
setBackgroundBlur(value); setBackgroundBlur(value);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -660,14 +679,14 @@ export const Settings = () => {
console.log("Background Brightness:", value); console.log("Background Brightness:", value);
settings.backgroundBrightness = value; settings.backgroundBrightness = value;
setBackgroundBrightness(value); setBackgroundBrightness(value);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -684,14 +703,14 @@ export const Settings = () => {
console.log("Spin Speed:", value); console.log("Spin Speed:", value);
settings.spinSpeed = value; settings.spinSpeed = value;
setSpinSpeed(value); setSpinSpeed(value);
if ((window as any).updateRadiantLyricsGlobalBackground) { if (window.updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground(); window.updateRadiantLyricsGlobalBackground();
} }
if ( if (
settings.settingsAffectNowPlaying && settings.settingsAffectNowPlaying &&
(window as any).updateRadiantLyricsNowPlayingBackground window.updateRadiantLyricsNowPlayingBackground
) { ) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />
@@ -709,8 +728,8 @@ export const Settings = () => {
settings.settingsAffectNowPlaying = checked; settings.settingsAffectNowPlaying = checked;
setSettingsAffectNowPlaying(checked); setSettingsAffectNowPlaying(checked);
// Update Now Playing background immediately when setting changes // Update Now Playing background immediately when setting changes
if ((window as any).updateRadiantLyricsNowPlayingBackground) { if (window.updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground(); window.updateRadiantLyricsNowPlayingBackground();
} }
}} }}
/> />