Added Spin Speed + Added Setting to Apply Adjustments to Now Playing BG

This commit is contained in:
2025-06-05 02:15:34 +10:00
parent 8ea741210f
commit 1be22c3d8a
2 changed files with 75 additions and 23 deletions
@@ -11,6 +11,8 @@ export const settings = await ReactiveStore.getPluginStorage("RadiantLyrics", {
backgroundContrast: 120,
backgroundBlur: 80,
backgroundBrightness: 40,
spinSpeed: 45,
settingsAffectNowPlaying: true,
});
export const Settings = () => {
@@ -22,6 +24,8 @@ export const Settings = () => {
const [backgroundContrast, setBackgroundContrast] = React.useState(settings.backgroundContrast);
const [backgroundBlur, setBackgroundBlur] = React.useState(settings.backgroundBlur);
const [backgroundBrightness, setBackgroundBrightness] = React.useState(settings.backgroundBrightness);
const [spinSpeed, setSpinSpeed] = React.useState(settings.spinSpeed);
const [settingsAffectNowPlaying, setSettingsAffectNowPlaying] = React.useState(settings.settingsAffectNowPlaying);
return (
<LunaSettings>
@@ -102,6 +106,9 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
@@ -117,6 +124,9 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
@@ -132,6 +142,40 @@ export const Settings = () => {
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaNumberSetting
title="Spin Speed"
desc="Adjust the rotation speed in seconds (10-120, default: 45) - Lower values = Faster rotation"
min={10}
max={120}
step={1}
value={spinSpeed}
onNumber={(value: number) => {
console.log("Spin Speed:", value);
setSpinSpeed((settings.spinSpeed = value));
if ((window as any).updateRadiantLyricsGlobalBackground) {
(window as any).updateRadiantLyricsGlobalBackground();
}
if (settings.settingsAffectNowPlaying && (window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
<LunaSwitchSetting
title="Settings Affect Now Playing"
desc="Apply background settings to Now Playing view"
checked={settingsAffectNowPlaying}
onChange={(_, checked: boolean) => {
console.log("Settings Affect Now Playing:", checked ? "enabled" : "disabled");
setSettingsAffectNowPlaying((settings.settingsAffectNowPlaying = checked));
// Update Now Playing background immediately when setting changes
if ((window as any).updateRadiantLyricsNowPlayingBackground) {
(window as any).updateRadiantLyricsNowPlayingBackground();
}
}}
/>
</LunaSettings>
+27 -19
View File
@@ -114,6 +114,7 @@ const applyGlobalSpinningBackground = (coverArtImageSrc: string): void => {
img.style.animation = 'none';
img.classList.add('performance-mode-static');
} else {
img.style.animation = `spinGlobal ${settings.spinSpeed}s linear infinite`;
img.classList.remove('performance-mode-static');
}
@@ -148,39 +149,46 @@ const updateRadiantLyricsGlobalBackground = function(): void {
}
};
// Function to update performance mode for existing backgrounds
const updateRadiantLyricsPerformanceMode = function(): void {
// Update global spinning background images
const globalImages = document.querySelectorAll('.global-spinning-image');
globalImages.forEach((img: Element) => {
const imgElement = img as HTMLElement;
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
} else {
imgElement.style.animation = '';
imgElement.classList.remove('performance-mode-static');
}
});
// Update Now Playing background images
// Function to update Now Playing background when settings change
const updateRadiantLyricsNowPlayingBackground = function(): void {
const nowPlayingBackgroundImages = document.querySelectorAll('.now-playing-background-image');
nowPlayingBackgroundImages.forEach((img: Element) => {
const imgElement = img as HTMLElement;
// Default values when settings don't affect Now Playing
const defaultBlur = 80;
const defaultBrightness = 40;
const defaultContrast = 120;
const defaultSpinSpeed = 45;
if (settings.settingsAffectNowPlaying) {
// Use settings values
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
} else {
imgElement.style.animation = 'spin 35s linear infinite';
imgElement.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
imgElement.classList.remove('performance-mode-static');
}
imgElement.style.filter = `blur(${settings.backgroundBlur}px) brightness(${settings.backgroundBrightness / 100}) contrast(${settings.backgroundContrast}%)`;
} else {
// Reset to default values
if (settings.performanceMode) {
imgElement.style.animation = 'none';
imgElement.classList.add('performance-mode-static');
} else {
imgElement.style.animation = `spin ${defaultSpinSpeed}s linear infinite`;
imgElement.classList.remove('performance-mode-static');
}
imgElement.style.filter = `blur(${defaultBlur}px) brightness(${defaultBrightness / 100}) contrast(${defaultContrast}%)`;
}
});
};
// Make these functions available globally so Settings can call them
(window as any).updateRadiantLyricsStyles = updateRadiantLyricsStyles;
(window as any).updateRadiantLyricsGlobalBackground = updateRadiantLyricsGlobalBackground;
(window as any).updateRadiantLyricsPerformanceMode = updateRadiantLyricsPerformanceMode;
(window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
const toggleRadiantLyrics = function(): void {
// Toggle the state first
@@ -494,7 +502,7 @@ const updateCoverArtBackground = function (method: number = 0): void {
backgroundImage.style.animation = 'none';
backgroundImage.classList.add('performance-mode-static');
} else {
backgroundImage.style.animation = 'spin 45s linear infinite';
backgroundImage.style.animation = `spin ${settings.spinSpeed}s linear infinite`;
backgroundImage.classList.remove('performance-mode-static');
}
nowPlayingContainerElement.appendChild(backgroundImage);